/* ==========================================================================
   Ljubljančan — prenova (design1)
   Ločen slog SAMO za portal Ljubljančan. Naložen le v templates/portals/ljubljancan/base.html.
   Ne vpliva na druge portale (vsak ima svoj base.html + svoj CSS).
   Barve iz logotipa: temno modra, zelena, rečna modra.
   ========================================================================== */

:root {
  --lj-ink:        #142F3B;  /* glavno besedilo / temno modra */
  --lj-ink-900:    #0C222C;  /* najtemnejša — topbar, noga */
  --lj-green:      #2C9A43;  /* primarna zelena */
  --lj-green-dark: #1E7A33;  /* hover / povezave */
  --lj-river:      #2E90E8;  /* rečna modra — akcenti */
  --lj-bg:         #E7ECEA;  /* ozadje strani */
  --lj-surface:    #F5F8F6;  /* svetla površina */
  --lj-card:       #ffffff;
  --lj-border:     #E2E9E6;
  --lj-border-2:   #EDF2EF;
  --lj-muted:      #5E7178;
  --lj-faint:      #8AA0A6;
  --lj-green-bg:   #E6F4E9;
  --lj-green-bg-bd:#CBE7D2;
  --lj-green-bg-tx:#1E4429;
  --lj-shadow:     0 18px 44px rgba(15,40,50,.08);
  --lj-radius:     14px;
  --lj-maxw:       1280px;
}

/* --- Tipografija ---------------------------------------------------------- */
body { background: var(--lj-bg); color: var(--lj-ink); }
.font-head, h1, h2, h3, h4, h5,
.lj-h { font-family: 'Bricolage Grotesque', 'Archivo', system-ui, sans-serif; }
.lj-serif-off { letter-spacing: -.3px; }
::selection { background: #D6ECDB; }

.lj-wrap { max-width: var(--lj-maxw); margin: 0 auto; padding-left: 20px; padding-right: 20px; }
@media (min-width: 1024px){ .lj-wrap{ padding-left: 40px; padding-right: 40px; } }

a { color: var(--lj-green-dark); text-decoration: none; }
a:hover { color: var(--lj-green); }

/* “rečni” trije trakci — akcent */
.lj-river-mark { display:flex; flex-direction:column; gap:3px; }
.lj-river-mark i { display:block; height:3px; border-radius:2px; background: var(--lj-river); }
.lj-river-mark i:nth-child(1){ width:26px; }
.lj-river-mark i:nth-child(2){ width:18px; }
.lj-river-mark i:nth-child(3){ width:10px; }

/* --- Kickerji / badge ----------------------------------------------------- */
.lj-kicker { font: 700 11px 'Archivo', sans-serif; letter-spacing:.14em; text-transform:uppercase; color: var(--lj-green-dark); }
.lj-badge { display:inline-flex; align-items:center; padding:.28rem .6rem; font:700 10px 'Archivo',sans-serif; letter-spacing:.12em; text-transform:uppercase; background: var(--lj-green); color:#fff; border-radius:6px; }
.lj-badge-featured { background: var(--lj-green); }
.lj-meta { font-size:13px; color: var(--lj-faint); }
.lj-dot { width:4px; height:4px; border-radius:2px; background:#C3D2CC; display:inline-block; }

/* --- Header / topbar ------------------------------------------------------ */
.lj-topbar { background: var(--lj-ink-900); color:#B9C9CE; }
.lj-topbar-inner { display:flex; justify-content:space-between; align-items:center; height:38px; font-size:12.5px; }
.lj-topbar a { color:#B9C9CE; }
.lj-topbar a:hover { color:#fff; }
.lj-topbar .sep { border-left:1px solid rgba(255,255,255,.18); padding-left:22px; color:#fff; font-weight:600; }

.lj-headbar { background:#fff; }
.lj-headbar-inner { display:flex; align-items:center; gap:24px; padding:16px 0; }
.lj-logo img { height:52px; display:block; width:auto; }
.lj-search { display:flex; align-items:center; height:42px; border:1px solid var(--lj-border); border-radius:21px; background:#F9FBFA; overflow:hidden; }
.lj-search input { border:0; outline:0; background:transparent; padding:0 16px; height:100%; width:210px; font-size:14px; color: var(--lj-ink); }
.lj-search input::placeholder { color: var(--lj-faint); }
.lj-search button { width:42px; height:42px; display:flex; align-items:center; justify-content:center; color: var(--lj-faint); background:transparent; border:0; cursor:pointer; }
.lj-btn-green { display:inline-flex; align-items:center; justify-content:center; height:42px; padding:0 20px; border-radius:21px; background: var(--lj-green); color:#fff; font-weight:700; font-size:14px; border:0; cursor:pointer; transition:background .15s; white-space:nowrap; }
.lj-btn-green:hover { background: var(--lj-green-dark); color:#fff; }
.lj-btn-outline { display:inline-flex; align-items:center; justify-content:center; height:42px; padding:0 20px; border-radius:21px; border:1.5px solid var(--lj-green); color: var(--lj-green-dark); font-weight:700; font-size:14px; background:transparent; }
.lj-btn-outline:hover { background: var(--lj-green); color:#fff; }

.lj-nav { border-top:1px solid var(--lj-border); border-bottom:1px solid var(--lj-border); background:#fff; }
.lj-nav-inner { display:flex; align-items:stretch; gap:2px; font-size:15px; font-weight:600; }
.lj-nav-link { padding:15px 14px; border-bottom:3px solid transparent; color: var(--lj-ink); transition:color .15s,border-color .15s; }
.lj-nav-link:hover { color: var(--lj-green-dark); }
.lj-nav-link.active { border-bottom-color: var(--lj-green); color: var(--lj-green-dark); }

/* --- Kartice -------------------------------------------------------------- */
.lj-card { background:#fff; border:1px solid var(--lj-border); border-radius:12px; overflow:hidden; display:flex; flex-direction:column; }
.lj-card .lj-thumb { display:block; width:100%; aspect-ratio:3/2; object-fit:cover; background: var(--lj-surface); }
.lj-card .lj-body { padding:16px 18px 18px; display:flex; flex-direction:column; gap:8px; }
.lj-card-title { font:700 17px/1.32 'Bricolage Grotesque',sans-serif; color: var(--lj-ink); transition:color .15s; }
.lj-card:hover .lj-card-title, a:hover .lj-card-title { color: var(--lj-green-dark); }

/* hero overlay kartica */
.lj-hero-card { position:relative; display:block; border-radius:14px; overflow:hidden; }
.lj-hero-card img { width:100%; height:100%; object-fit:cover; display:block; }
.lj-hero-card .lj-ov { position:absolute; inset:0; background:linear-gradient(to top, rgba(12,34,44,.92) 0%, rgba(12,34,44,.35) 55%, transparent 100%); }
.lj-hero-card .lj-ov-body { position:absolute; left:0; right:0; bottom:0; padding:22px 24px; color:#fff; }

.lj-thumb-box { border-radius:10px; overflow:hidden; background: var(--lj-surface); border:1px solid var(--lj-border); }
.lj-thumb-box img { width:100%; height:100%; object-fit:cover; display:block; }

/* --- Section heads -------------------------------------------------------- */
.lj-sec-head { display:flex; align-items:baseline; gap:14px; }
.lj-sec-title { font:800 24px 'Bricolage Grotesque',sans-serif; color: var(--lj-ink); }
.lj-sec-title.big { font-size:26px; }
.lj-sec-note { font-size:14px; color: var(--lj-faint); }
.lj-see-all { font-weight:700; font-size:14px; color: var(--lj-green-dark); margin-left:auto; }
.lj-see-all:hover { color: var(--lj-green); }
.lj-rule-top { border-top:1px solid var(--lj-border); padding-top:26px; }

/* --- Ticker --------------------------------------------------------------- */
.lj-ticker { display:flex; align-items:center; gap:16px; height:48px; background: var(--lj-ink-900); border-radius:12px; color:#DDE7E4; font-size:14px; padding:0 12px; overflow:hidden; }
.lj-ticker-tag { flex-shrink:0; background: var(--lj-green); color:#fff; font:700 11px 'Archivo',sans-serif; letter-spacing:.12em; padding:7px 12px; border-radius:8px; }
.lj-ticker-track { display:flex; align-items:center; gap:16px; white-space:nowrap; overflow:hidden; }
.lj-ticker-track a { color:#DDE7E4; }
.lj-ticker-track a:hover { color:#fff; }
.lj-ticker-sep { width:5px; height:5px; border-radius:3px; background: var(--lj-green); flex-shrink:0; }

/* --- Sidebar -------------------------------------------------------------- */
.lj-box { background:#fff; border:1px solid var(--lj-border); border-radius:14px; padding:22px; }
.lj-box-title { font:800 20px 'Bricolage Grotesque',sans-serif; color: var(--lj-ink); }
.lj-mostread-item { display:flex; gap:16px; align-items:baseline; padding:14px 0; border-top:1px solid var(--lj-border-2); }
.lj-mostread-item:first-of-type { border-top:0; }
.lj-mostread-num { font:800 26px 'Bricolage Grotesque',sans-serif; -webkit-text-stroke:1.4px var(--lj-green); color:transparent; min-width:24px; }
.lj-mostread-title { font:600 15px/1.4 'Archivo',sans-serif; color: var(--lj-ink); }
a:hover .lj-mostread-title { color: var(--lj-green-dark); }

.lj-notice { background: var(--lj-green-bg); border:1px solid var(--lj-green-bg-bd); border-radius:14px; padding:22px; }
.lj-notice-title { display:flex; align-items:center; gap:10px; font:800 18px 'Bricolage Grotesque',sans-serif; color:#14532D; padding-bottom:10px; }
.lj-notice-title .d { width:10px; height:10px; border-radius:5px; background: var(--lj-green); }
.lj-notice-list { display:flex; flex-direction:column; gap:12px; font-size:14.5px; line-height:1.45; color: var(--lj-green-bg-tx); }
.lj-notice-list a { color: var(--lj-green-bg-tx); }
.lj-notice-list a:hover { color: var(--lj-green-dark); }

.lj-news { background: var(--lj-ink-900); border-radius:14px; padding:24px; color:#fff; }
.lj-news-title { font:800 20px 'Bricolage Grotesque',sans-serif; color:#fff; }
.lj-news p { font-size:14px; color:#B9C9CE; line-height:1.5; margin-top:8px; }
.lj-news input { width:100%; height:44px; border-radius:22px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); padding:0 18px; color:#fff; font-size:14px; margin-top:16px; }
.lj-news input::placeholder { color:#8AA0A6; }
.lj-news button { width:100%; height:44px; border-radius:22px; background: var(--lj-green); color:#fff; border:0; font-weight:700; font-size:14.5px; margin-top:10px; cursor:pointer; }
.lj-news button:hover { background: var(--lj-green-dark); }
.lj-news small { font-size:12px; color:#7E939B; margin-top:10px; display:block; }

/* --- Category header ------------------------------------------------------ */
.lj-cat-hero { background:#fff; border-bottom:1px solid var(--lj-border); }
.lj-breadcrumb { font-size:13px; color: var(--lj-faint); }
.lj-breadcrumb a { color: var(--lj-faint); }
.lj-breadcrumb a:hover { color: var(--lj-green-dark); }
.lj-breadcrumb .s { color:#C3D2CC; margin:0 6px; }
.lj-cat-title { font:800 48px/1 'Bricolage Grotesque',sans-serif; letter-spacing:-1px; color: var(--lj-ink); }
.lj-pill { display:inline-flex; align-items:center; height:38px; padding:0 16px; border-radius:19px; border:1px solid var(--lj-border); font-weight:600; font-size:13.5px; color: var(--lj-muted); background:#fff; }
.lj-pill:hover { border-color: var(--lj-green); color: var(--lj-green-dark); }
.lj-pill.active { background: var(--lj-ink); color:#fff; border-color: var(--lj-ink); }

/* --- Pagination ----------------------------------------------------------- */
.lj-page { width:42px; height:42px; display:flex; align-items:center; justify-content:center; border-radius:21px; font-weight:600; color: var(--lj-ink); }
.lj-page:hover { background: var(--lj-green-bg); color: var(--lj-green-dark); }
.lj-page.active { background: var(--lj-green); color:#fff; }

/* --- Footer --------------------------------------------------------------- */
.lj-footer { background: var(--lj-ink-900); color:#B9C9CE; }
.lj-footer a { color:#B9C9CE; }
.lj-footer a:hover { color:#fff; }
.lj-foot-brand { font:800 26px 'Bricolage Grotesque',sans-serif; color:#fff; }
.lj-foot-brand span { color: var(--lj-green); }
.lj-foot-head { font:700 13px 'Archivo',sans-serif; letter-spacing:.14em; text-transform:uppercase; color:#7E939B; }
.lj-foot-social { width:40px; height:40px; border-radius:20px; border:1px solid rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; color:#fff; }
.lj-foot-social:hover { background:rgba(255,255,255,.08); color:#fff; }
.lj-foot-bar { border-top:1px solid rgba(255,255,255,.12); font-size:13px; }

/* --- Utility grid helpers ------------------------------------------------- */
.lj-grid { display:grid; gap:24px; }
.lj-line-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.lj-line-3 { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* --- Odzivnost -------------------------------------------------------------- */
@media (max-width: 1120px){
  .lj-nav-inner { overflow-x:auto; -ms-overflow-style:none; scrollbar-width:none; }
  .lj-nav-inner::-webkit-scrollbar { display:none; }
  .lj-nav-link { white-space:nowrap; }
}
@media (max-width: 860px){
  .lj-foot-grid { grid-template-columns:1fr !important; gap:28px !important; }
  .lj-cat-title { font-size:38px; }
}

/* --- Odzivne mreže (uporabi razrede, ne inline) ---------------------------- */
.lj-page-pad { padding-top:24px; padding-bottom:48px; }
.lj-cols-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.lj-cols-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.lj-cols-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.lj-hero-grid { display:grid; grid-template-columns:1.55fr 1fr; gap:40px; }
.lj-main-grid { display:grid; grid-template-columns:minmax(0,1fr) 20rem; gap:44px; }
.lj-feature-2 { display:grid; grid-template-columns:280px 1fr; }
.lj-hero-title { font:800 40px/1.08 'Bricolage Grotesque',sans-serif; letter-spacing:-.5px; color:var(--lj-ink); }

@media (max-width: 1080px){
  .lj-main-grid { grid-template-columns:1fr; }
  .lj-cols-4 { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 820px){
  .lj-hero-grid { grid-template-columns:1fr; gap:26px; }
  .lj-cols-3 { grid-template-columns:1fr 1fr; }
  .lj-hero-title { font-size:30px; }
}
@media (max-width: 560px){
  .lj-cols-4, .lj-cols-3, .lj-cols-2 { grid-template-columns:1fr; }
  .lj-feature-2 { grid-template-columns:1fr; }
  .lj-hero-title { font-size:26px; }
}