/* ============================================================================
   BIODEKOR — BLOG (dodatak na style.css)
   ----------------------------------------------------------------------------
   Koristi iste tokene iz :root u style.css (--ink, --moss, --accent, --canvas...).
   Ucitava se SAMO na blog stranicama, posle style.css.
   ========================================================================== */

/* ---------------- LISTA CLANAKA ---------------- */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 24px}
.post-card{
  display:flex;flex-direction:column;text-decoration:none;color:inherit;
  background:var(--paper);border:1px solid var(--line-soft);border-radius:3px;overflow:hidden;
  transition:border-color .35s var(--ease-2),transform .45s var(--ease-2);
}
.post-card:hover{border-color:var(--line);transform:translateY(-3px)}
.post-card .cover{aspect-ratio:16/10;background:#2a3320 center/cover;position:relative}
.post-card .cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,14,7,0) 55%,rgba(10,14,7,.45))}
.post-card .cat{
  position:absolute;left:14px;top:14px;z-index:2;background:rgba(10,14,7,.78);color:var(--accent);
  font-family:"Manrope",sans-serif;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  padding:6px 10px;border-radius:2px;
}
.post-card .txt{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.post-card h3{font-size:clamp(20px,1.7vw,25px);font-weight:500;line-height:1.16;letter-spacing:-.015em}
.post-card p{color:#4b5440;font-size:14.5px;line-height:1.62;margin-top:11px;flex:1}
.post-card .pmeta{
  margin-top:18px;padding-top:14px;border-top:1px solid var(--line-soft);
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  font-family:"Manrope",sans-serif;font-size:11.5px;color:var(--moss);
}
.post-card .pmeta .go{color:var(--accent-deep);font-weight:600}
.post-card.hide{display:none}

/* istaknuti (prvi) clanak */
.post-card.feat{grid-column:span 3;flex-direction:row}
.post-card.feat .cover{flex:0 0 52%;aspect-ratio:auto}
.post-card.feat .txt{padding:40px 44px}
.post-card.feat h3{font-size:clamp(27px,3vw,42px)}
.post-card.feat p{font-size:16px;margin-top:16px}

/* ---------------- ZAGLAVLJE CLANKA ---------------- */
.art-head{padding:150px 0 0;background:var(--canvas)}
.art-head .crumb{margin-bottom:26px}
.art-head h1{font-size:clamp(34px,5vw,64px);font-weight:500;max-width:19ch;line-height:1.02}
.art-head .standfirst{
  font-size:clamp(17px,1.5vw,20px);color:#4b5440;max-width:62ch;margin-top:22px;line-height:1.6;
}
.art-meta{
  display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;margin-top:30px;padding-top:20px;
  border-top:1px solid var(--line);font-family:"Manrope",sans-serif;font-size:12.5px;color:var(--moss);
}
.art-cover{margin-top:40px;aspect-ratio:21/9;background:#2a3320 center/cover;border-radius:3px}

/* ---------------- TELO CLANKA ---------------- */
.art-body{padding:56px 0 20px}
.art-layout{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:64px;align-items:start}
.prose{max-width:68ch;font-size:17.5px;line-height:1.78;color:#242a1d}
.prose>p{margin-bottom:22px}
.prose h2{
  font-size:clamp(26px,3vw,38px);font-weight:500;line-height:1.12;margin:52px 0 16px;
  padding-top:26px;border-top:1px solid var(--line);
}
.prose h2:first-child{margin-top:0;padding-top:0;border-top:0}
.prose h3{font-size:clamp(20px,2vw,26px);font-weight:600;font-family:"Manrope",sans-serif;letter-spacing:-.01em;margin:32px 0 10px;line-height:1.3}
.prose ul,.prose ol{margin:0 0 24px 20px}
.prose li{margin-bottom:9px;padding-left:4px}
.prose li::marker{color:var(--accent-deep)}
.prose a{color:var(--moss);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:rgba(62,84,48,.4)}
.prose a:hover{color:var(--accent-deep);text-decoration-color:var(--accent-deep)}
.prose strong{font-weight:700;color:var(--ink)}
.prose figure{margin:34px 0}
.prose figure img,.prose .ph{width:100%;border-radius:3px;display:block}
.prose .ph{aspect-ratio:16/9;background:#2a3320 center/cover}
.prose figcaption{font-size:13px;color:var(--moss);margin-top:10px;font-family:"Manrope",sans-serif}

/* uvodni sazetak — ono sto citalac (i Google) prvo pokupi */
.keybox{
  background:var(--paper);border-left:3px solid var(--accent-deep);border-radius:0 3px 3px 0;
  padding:26px 28px;margin:0 0 34px;
}
.keybox h2{font-family:"Manrope",sans-serif;font-size:12px!important;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--moss);margin:0 0 14px!important;padding:0!important;border:0!important}
.keybox ul{margin:0 0 0 18px}
.keybox li{font-size:15.5px;line-height:1.6;margin-bottom:8px;color:#333c28}
.keybox li:last-child{margin-bottom:0}

/* izdvojena napomena iz prakse */
.note{
  background:#1a2212;color:#e7ead9;border-radius:3px;padding:26px 28px;margin:34px 0;
  font-size:16px;line-height:1.65;
}
.note b{color:var(--accent);display:block;font-family:"Manrope",sans-serif;font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;margin-bottom:10px;font-weight:600}

/* tabele — nosilac konkretnih podataka */
.prose table{width:100%;border-collapse:collapse;margin:28px 0;font-size:15px}
.prose caption{text-align:left;font-family:"Manrope",sans-serif;font-size:12.5px;color:var(--moss);padding-bottom:10px}
.prose th{
  text-align:left;font-family:"Manrope",sans-serif;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--moss);font-weight:600;padding:0 14px 10px 0;border-bottom:1px solid var(--line);
}
.prose td{padding:12px 14px 12px 0;border-bottom:1px solid var(--line-soft);vertical-align:top}
.prose tr:last-child td{border-bottom:1px solid var(--line)}

/* sezonska traka: kada se posao radi */
.season{margin:30px 0 34px}
.season .lbl{font-family:"Manrope",sans-serif;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--moss);margin-bottom:12px}
.season .mo{display:grid;grid-template-columns:repeat(12,1fr);gap:4px}
.season .mo span{
  text-align:center;font-family:"Manrope",sans-serif;font-size:10.5px;padding:9px 0;border-radius:2px;
  background:rgba(17,21,13,.05);color:#7c8471;
}
.season .mo span.on{background:var(--accent);color:var(--night);font-weight:600}
.season .mo span.mid{background:rgba(166,199,106,.42);color:#3a4a24}

/* ---------------- SIDEBAR ---------------- */
.aside{position:sticky;top:110px;display:flex;flex-direction:column;gap:26px}
.toc{border-top:1px solid var(--line);padding-top:18px}
.toc h4,.aside-cta h4{font-family:"Manrope",sans-serif;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--moss);margin-bottom:14px;font-weight:600}
.toc a{display:block;font-size:14px;color:#4b5440;text-decoration:none;padding:7px 0;border-bottom:1px solid var(--line-soft);line-height:1.4}
.toc a:hover{color:var(--accent-deep)}
.aside-cta{background:#1a2212;color:#e7ead9;border-radius:3px;padding:26px 24px}
.aside-cta h4{color:var(--accent)}
.aside-cta p{font-size:14.5px;line-height:1.6;color:rgba(231,234,217,.82);margin-bottom:18px}
.aside-cta .btn{width:100%;justify-content:center}

/* ---------------- KRAJ CLANKA ---------------- */
.art-foot{border-top:1px solid var(--line);margin-top:56px;padding-top:34px;max-width:68ch}
.art-foot .who{display:flex;gap:18px;align-items:flex-start}
.art-foot .who img{width:56px;height:56px;border-radius:50%;object-fit:contain;background:var(--paper);padding:6px;flex:0 0 auto}
.art-foot .who p{font-size:14.5px;color:#4b5440;line-height:1.62}
.art-foot .who b{display:block;font-size:15.5px;color:var(--ink);margin-bottom:4px;font-family:"Manrope",sans-serif}
.tagrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.tagrow a{
  font-family:"Manrope",sans-serif;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  border:1px solid var(--line);color:var(--moss);padding:7px 13px;border-radius:2px;text-decoration:none;
}
.tagrow a:hover{border-color:var(--moss)}

/* ---------------- RESPONSIVE ---------------- */
@media (max-width:1040px){
  .art-layout{grid-template-columns:1fr;gap:0}
  .aside{position:static;flex-direction:row;flex-wrap:wrap;margin-top:44px}
  .toc{flex:1 1 320px}
  .aside-cta{flex:1 1 320px}
  .post-grid{grid-template-columns:repeat(2,1fr)}
  .post-card.feat{grid-column:span 2}
}
@media (max-width:760px){
  .post-grid{grid-template-columns:1fr}
  .post-card.feat{grid-column:span 1;flex-direction:column}
  .post-card.feat .cover{flex:none;aspect-ratio:16/10}
  .post-card.feat .txt{padding:24px 22px 26px}
  .art-head{padding-top:118px}
  .art-cover{aspect-ratio:3/2}
  .prose{font-size:16.5px}
  .season .mo{grid-template-columns:repeat(6,1fr)}
  .aside{flex-direction:column}
}