/* =========================================================
   WEB ZA DAN — blog / savjeti (uz glavni style.css)
   ========================================================= */

.blog-wrap{padding-top:clamp(110px,14vh,150px);min-height:100vh}

/* breadcrumb */
.bcrumb{max-width:820px;margin:0 auto 26px;padding:0 var(--pad);font-family:var(--font-ui);font-size:13px;color:var(--steel);letter-spacing:.03em}
.bcrumb a{color:var(--bone-dim)}
.bcrumb a:hover{color:var(--molten)}
.bcrumb span{color:var(--molten);margin:0 8px}

/* ---------- INDEX HERO ---------- */
.blog-head{max-width:920px;margin:0 auto clamp(50px,7vw,80px);padding:0 var(--pad);text-align:center}
.blog-head .kick{font-family:var(--font-ui);font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--molten)}
.blog-head h1{font-family:var(--font-disp);font-weight:400;text-transform:uppercase;font-size:clamp(46px,9vw,120px);line-height:.9;margin:18px 0 22px}
.blog-head p{font-family:var(--font-ui);color:var(--bone-dim);font-size:clamp(16px,1.6vw,20px);max-width:54ch;margin:0 auto;line-height:1.55}

/* ---------- POST LIST ---------- */
.post-list{max-width:980px;margin:0 auto;padding:0 var(--pad) clamp(80px,10vw,130px);display:flex;flex-direction:column;gap:18px}
.post-card{
  display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:center;
  border:1px solid var(--line);border-radius:18px;padding:clamp(22px,3vw,34px);
  background:var(--ink-2);transition:border-color .4s,transform .5s var(--ease),background .4s;
}
.post-card:hover{border-color:var(--molten);transform:translateY(-4px);background:var(--ink-3)}
.post-card__no{font-family:var(--font-disp);font-size:clamp(34px,5vw,64px);color:var(--ink-3);-webkit-text-stroke:1px var(--line-strong);line-height:1}
.post-card:hover .post-card__no{color:var(--molten);-webkit-text-stroke:1px var(--molten)}
.post-card__body h2{font-family:var(--font-ui);font-weight:600;font-size:clamp(19px,2.4vw,26px);line-height:1.2;margin-bottom:8px}
.post-card__body p{color:var(--bone-dim);font-size:15px;line-height:1.5;max-width:60ch}
.post-card__meta{font-family:var(--font-ui);font-size:12px;color:var(--steel);margin-top:12px;display:flex;gap:14px;flex-wrap:wrap}
.post-card__arrow{font-size:26px;color:var(--molten);transition:transform .4s var(--ease)}
.post-card:hover .post-card__arrow{transform:translateX(6px)}
@media (max-width:680px){
  .post-card{grid-template-columns:1fr;gap:12px}
  .post-card__no{font-size:34px}
  .post-card__arrow{display:none}
}

/* ---------- ARTICLE ---------- */
.post-hero{max-width:820px;margin:0 auto clamp(34px,5vw,54px);padding:0 var(--pad)}
.post-hero .kick{font-family:var(--font-ui);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--molten)}
.post-hero h1{font-family:var(--font-disp);font-weight:400;text-transform:uppercase;font-size:clamp(34px,6.5vw,76px);line-height:.95;margin:16px 0 20px;letter-spacing:-.01em}
.post-hero__meta{font-family:var(--font-ui);font-size:13px;color:var(--steel);display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.post-hero__meta b{color:var(--bone-dim);font-weight:500}

.post{max-width:740px;margin:0 auto;padding:0 var(--pad) clamp(40px,6vw,70px)}
.post>p,.post>ul,.post>ol,.post>h2,.post>h3,.post>blockquote,.post>.lead{
  font-family:var(--font-body);
}
.post .lead{font-size:clamp(19px,2.2vw,23px);line-height:1.55;color:var(--bone);margin-bottom:30px;font-weight:500}
.post p{font-size:17.5px;line-height:1.75;color:var(--bone-dim);margin-bottom:22px}
.post h2{font-family:var(--font-ui);font-weight:600;color:var(--bone);font-size:clamp(24px,3.2vw,34px);line-height:1.15;margin:48px 0 16px;letter-spacing:-.01em}
.post h3{font-family:var(--font-ui);font-weight:600;color:var(--bone);font-size:20px;margin:32px 0 12px}
.post strong{color:var(--bone)}
.post a{color:var(--molten);border-bottom:1px solid rgba(255,77,18,.4)}
.post a:hover{border-color:var(--molten)}
.post ul,.post ol{margin:0 0 24px;padding-left:4px;list-style:none}
.post ul li,.post ol li{font-size:17.5px;line-height:1.7;color:var(--bone-dim);padding-left:30px;position:relative;margin-bottom:12px}
.post ul li::before{content:"→";position:absolute;left:0;color:var(--molten)}
.post ol{counter-reset:n}
.post ol li::before{counter-increment:n;content:counter(n);position:absolute;left:0;top:1px;color:var(--molten);font-family:var(--font-ui);font-weight:700;font-size:14px}
.post blockquote{
  margin:34px 0;padding:24px 28px;border-left:3px solid var(--molten);
  background:var(--ink-2);border-radius:0 14px 14px 0;
  font-family:var(--font-ui);font-size:clamp(19px,2.4vw,26px);line-height:1.35;color:var(--bone);
}
.post hr{border:none;border-top:1px solid var(--line);margin:44px 0}

/* key-takeaway / TL;DR box */
.post .tldr{background:var(--ink-2);border:1px solid var(--line);border-radius:16px;padding:24px 26px;margin:0 0 36px}
.post .tldr b{display:block;font-family:var(--font-ui);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--molten);margin-bottom:10px}
.post .tldr p{margin:0;font-size:16.5px;color:var(--bone)}

/* end CTA */
.post-cta{max-width:740px;margin:20px auto clamp(70px,9vw,110px);padding:0 var(--pad)}
.post-cta__box{
  background:linear-gradient(135deg,var(--ink-3),var(--ink-2));
  border:1px solid var(--line-strong);border-radius:20px;
  padding:clamp(30px,4vw,48px);text-align:center;position:relative;overflow:hidden;
}
.post-cta__box::after{content:"";position:absolute;inset:auto -30% -60% auto;width:60%;height:140%;background:radial-gradient(circle,rgba(255,77,18,.18),transparent 70%)}
.post-cta__box h3{position:relative;font-family:var(--font-disp);font-weight:400;text-transform:uppercase;font-size:clamp(26px,4vw,46px);line-height:.95;margin-bottom:14px}
.post-cta__box p{position:relative;color:var(--bone-dim);font-size:16px;margin-bottom:26px;max-width:46ch;margin-inline:auto}
.post-cta__btns{position:relative;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* related */
.related{max-width:980px;margin:0 auto;padding:0 var(--pad) clamp(80px,10vw,120px);border-top:1px solid var(--line)}
.related h4{font-family:var(--font-ui);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--steel);margin:46px 0 22px}
.related__grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:680px){ .related__grid{grid-template-columns:1fr} }
.related a{border:1px solid var(--line);border-radius:14px;padding:22px 24px;transition:border-color .3s,transform .4s var(--ease)}
.related a:hover{border-color:var(--molten);transform:translateY(-3px)}
.related a b{display:block;font-family:var(--font-ui);font-weight:600;font-size:17px;margin-bottom:6px;color:var(--bone)}
.related a span{font-family:var(--font-ui);font-size:13px;color:var(--steel)}