/* =========================================================
   ZAJEDNIČKI STIL ZA BLOG  —  Sara Living Studio
   Ovu datoteku koriste blog stranica i svi članci.
   Promijeniš boju/veličinu ovdje → mijenja se svugdje.
   ========================================================= */
:root{
  --cream:#FAF6EF; --paper:#FFFFFF;
  --sand-50:#FBF7F0; --sand-100:#F4EDE1; --sand-200:#E9DECB;
  --clay:#B9A587; --stone:#8B7458; --taupe:#6A5842;
  --espresso:#4C4032; --ink:#251F19;
  --terracotta:#B15E38; --terracotta-dark:#97492A; --terracotta-tint:#F1E2D8;
  --gold:#C3A05C; --olive:#6C6F52;
  --line:#E6DBC9;
  --font-display:"DM Serif Display", Georgia, "Times New Roman", serif;
  --font-body:"DM Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --wrap:1100px; --measure:720px;
  --radius:14px; --radius-sm:10px;
  --shadow-sm:0 1px 2px rgba(37,31,25,.06), 0 6px 20px rgba(37,31,25,.05);
  --shadow-md:0 14px 44px rgba(37,31,25,.12);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body); background:var(--cream); color:var(--taupe);
  line-height:1.7; font-size:17px; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px}
.measure{max-width:var(--measure); margin-left:auto; margin-right:auto}

/* ---------- Skip link + a11y ---------- */
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--cream);padding:10px 16px;border-radius:0 0 8px 0;z-index:200}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--terracotta);outline-offset:3px;border-radius:4px}

/* ---------- Header ---------- */
.site-head{position:sticky;top:0;z-index:50;background:rgba(250,246,239,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.site-head .bar{display:flex;align-items:center;justify-content:space-between;height:70px}
.brand{font-family:var(--font-display);font-size:22px;color:var(--ink);text-decoration:none;letter-spacing:.2px}
.brand span{color:var(--terracotta)}
.head-links{display:flex;align-items:center;gap:26px;font-size:15px;font-weight:500}
.head-links a{text-decoration:none;color:var(--taupe);transition:color .2s ease}
.head-links a:hover{color:var(--terracotta-dark)}
.head-cta{background:var(--ink);color:var(--cream)!important;padding:9px 18px;border-radius:9px}
.head-cta:hover{background:var(--terracotta-dark)}
@media(max-width:640px){.head-links a:not(.head-cta){display:none}}

/* ---------- Dimension-line divider (potpisni motiv) ---------- */
.rule{display:flex;align-items:center;gap:14px;color:var(--clay);margin:0 auto}
.rule::before,.rule::after{content:"";height:1px;background:var(--line);flex:1}
.rule span{font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);font-weight:600}

/* ---------- Article hero ---------- */
.post-hero{position:relative}
.post-hero .img{position:relative;height:52vh;min-height:360px;max-height:560px;overflow:hidden}
.post-hero .img img{width:100%;height:100%;object-fit:cover}
.post-hero .img::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(37,31,25,.78) 0%,rgba(37,31,25,.28) 45%,rgba(37,31,25,.06) 100%)}
.post-hero .cap{position:absolute;left:0;right:0;bottom:0;padding:38px 0}
.post-hero .meta{display:flex;flex-wrap:wrap;align-items:center;gap:14px;color:rgba(255,255,255,.82);font-size:13px;margin-bottom:14px}
.post-hero .meta .dot{width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.5)}
.post-hero h1{font-family:var(--font-display);color:#fff;font-weight:400;line-height:1.12;font-size:clamp(30px,5.4vw,52px);max-width:900px}
.post-hero h1 em{font-style:italic;color:var(--gold)}
.back-link{display:inline-flex;align-items:center;gap:8px;color:rgba(255,255,255,.9);text-decoration:none;font-size:14px;font-weight:500;margin-bottom:18px}
.back-link:hover{color:#fff}

/* ---------- Article body ---------- */
.post-body{padding:56px 0 40px}
.post-body p{color:var(--espresso);margin-bottom:20px}
.post-body .lead{font-size:20px;color:var(--taupe);margin-bottom:28px}
.post-body strong{color:var(--ink);font-weight:600}
.post-body h2{font-family:var(--font-display);font-weight:400;color:var(--ink);font-size:clamp(24px,3.6vw,32px);line-height:1.2;margin:44px 0 16px}
.post-body h3{font-family:var(--font-display);font-weight:400;color:var(--ink);font-size:22px;margin:12px 0 8px}
.post-body ul{margin:0 0 22px;padding-left:0;list-style:none}
.post-body ul li{position:relative;padding-left:26px;margin-bottom:10px;color:var(--espresso)}
.post-body ul li::before{content:"";position:absolute;left:4px;top:12px;width:8px;height:8px;border-radius:50%;background:var(--terracotta-tint);border:2px solid var(--terracotta)}

/* numbered step heading */
.step-h{display:flex;align-items:baseline;gap:14px;margin:44px 0 14px}
.step-h .n{font-family:var(--font-display);color:var(--terracotta);font-size:34px;line-height:1;flex-shrink:0}
.step-h h2{margin:0}

/* icon step (article 2) */
.pstep{display:flex;gap:18px;margin-bottom:26px}
.pstep .ic{flex-shrink:0;width:48px;height:48px;border-radius:50%;background:var(--terracotta-tint);display:grid;place-items:center;font-family:var(--font-display);color:var(--terracotta-dark);font-size:20px}

/* ---------- Cards / boxes ---------- */
.tip{background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--terracotta);border-radius:0 12px 12px 0;padding:20px 22px;margin:8px 0 26px}
.tip .t{font-weight:600;color:var(--ink);margin-bottom:6px;font-size:15px}
.tip p{font-size:15.5px;margin:0;color:var(--taupe)}
.note-key{background:var(--sand-100);border-radius:12px;padding:20px 22px;margin:8px 0 26px}
.note-key .t{font-weight:600;color:var(--ink);margin-bottom:6px}
.note-key p{margin:0;font-size:15.5px;color:var(--taupe)}

blockquote{border-left:4px solid var(--gold);background:var(--sand-50);border-radius:0 12px 12px 0;padding:20px 24px;margin:8px 0 28px;font-family:var(--font-display);font-size:20px;line-height:1.5;color:var(--espresso);font-style:italic}
blockquote cite{display:block;margin-top:10px;font-family:var(--font-body);font-style:normal;font-size:14px;color:var(--stone)}

/* ---------- Before / after ---------- */
.ba{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:24px 0 10px}
.ba figure{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:4/3;background:var(--sand-100)}
.ba figure img{width:100%;height:100%;object-fit:cover}
.ba .tag{position:absolute;top:10px;font-size:12px;font-weight:600;padding:4px 11px;border-radius:20px;color:#fff;backdrop-filter:blur(4px)}
.ba .tag.b{left:10px;background:rgba(37,31,25,.6)}
.ba .tag.a{right:10px;background:var(--terracotta)}
.cap-c{text-align:center;font-size:14px;color:var(--stone);font-style:italic;margin:0 0 28px}

/* single figure */
.fig{margin:24px 0 28px}
.fig img{width:100%;border-radius:12px;box-shadow:var(--shadow-sm)}
.fig figcaption{text-align:center;font-size:14px;color:var(--stone);font-style:italic;margin-top:12px}

/* gallery */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:22px 0 28px}
.gal a{border-radius:12px;overflow:hidden;aspect-ratio:3/4;display:block;background:var(--sand-100)}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.gal a:hover img{transform:scale(1.05)}
@media(max-width:560px){.gal{grid-template-columns:repeat(2,1fr)}}

/* ---------- Data table ---------- */
.tbl{background:var(--paper);border:1px solid var(--line);border-radius:14px;overflow:hidden;margin:20px 0 28px;box-shadow:var(--shadow-sm)}
.tbl .th{background:var(--ink);color:var(--cream);padding:12px 20px;font-size:14px;font-weight:600}
.tbl .row{display:grid;padding:12px 20px;border-top:1px solid var(--sand-100);font-size:15px;align-items:center;gap:10px}
.tbl .row:first-of-type{border-top:none}
.tbl .row .k{color:var(--ink);font-weight:600}
.tbl .row .v{color:var(--taupe)}
.tbl .row .c{color:var(--terracotta-dark);font-weight:600}
.tbl .row.total{background:var(--sand-50);border-top:2px solid var(--terracotta-tint)}
.tbl .row.total .k{color:var(--ink)}
.tbl .row.total .c{color:var(--terracotta-dark);font-size:16px}
.r2{grid-template-columns:1fr 1fr}
.r3{grid-template-columns:1.1fr .5fr 1.6fr}
.r3c{grid-template-columns:.8fr 1.4fr 1.2fr}
@media(max-width:560px){.r3,.r3c{grid-template-columns:1fr}.tbl .row .v.sub{padding-left:0;font-size:13.5px}}

/* checklist */
.check{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:22px 24px;margin:8px 0 28px;box-shadow:var(--shadow-sm)}
.check h3{font-family:var(--font-display);font-size:19px;color:var(--ink);margin-bottom:14px}
.check .items{display:grid;grid-template-columns:1fr 1fr;gap:10px 20px}
.check .items div{position:relative;padding-left:26px;font-size:15px;color:var(--espresso)}
.check .items div::before{content:"";position:absolute;left:0;top:3px;width:16px;height:16px;border:2px solid var(--terracotta);border-radius:4px}
@media(max-width:560px){.check .items{grid-template-columns:1fr}}

/* do / dont */
.dodont{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:20px 0 28px}
.dodont .col{border-radius:14px;padding:18px 20px;border:1px solid}
.dodont .do{background:#F2F5EE;border-color:#D8E3CC}
.dodont .dont{background:#F8ECE7;border-color:#EFD5CB}
.dodont .h{font-weight:600;font-size:14px;margin-bottom:10px;display:flex;align-items:center;gap:8px}
.dodont .do .h{color:#4B6238}
.dodont .dont .h{color:#9A4A32}
.dodont ul{list-style:none;padding:0;margin:0}
.dodont li{position:relative;padding-left:22px;font-size:14.5px;margin-bottom:8px;color:var(--espresso)}
.dodont .do li::before{content:"✓";position:absolute;left:0;color:#6B8A4E;font-weight:700}
.dodont .dont li::before{content:"✕";position:absolute;left:0;color:#C06A4E;font-weight:700}
.dodont li::before{top:0}
@media(max-width:560px){.dodont{grid-template-columns:1fr}}

/* result box (article 4) */
.result{background:var(--sand-50);border:1px solid var(--line);border-radius:16px;padding:30px 28px;margin:28px 0}
.result .stars{color:var(--terracotta);letter-spacing:3px;font-size:17px}
.result .score{font-weight:700;color:var(--ink);margin-left:8px}
.result h3{font-family:var(--font-display);font-size:24px;color:var(--ink);margin:12px 0 12px;font-weight:400}
.result .nums{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px}
.result .nums .c{text-align:center}
.result .nums .big{font-family:var(--font-display);font-size:24px;color:var(--terracotta-dark)}
.result .nums .lbl{font-size:12px;color:var(--stone);margin-top:4px}

/* ---------- CTA ---------- */
.cta{background:var(--ink);color:var(--cream);border-radius:18px;padding:40px 32px;text-align:center;margin:40px 0 8px}
.cta h3{font-family:var(--font-display);font-weight:400;font-size:clamp(24px,4vw,30px);margin-bottom:12px}
.cta p{color:rgba(250,246,239,.75);max-width:520px;margin:0 auto 24px}
.btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 26px;border-radius:10px;text-decoration:none;font-weight:500;font-size:15px;transition:all .2s ease}
.btn-solid{background:var(--cream);color:var(--ink)}
.btn-solid:hover{background:#fff;transform:translateY(-1px)}
.btn-ghost{border:1px solid rgba(250,246,239,.35);color:var(--cream)}
.btn-ghost:hover{background:rgba(250,246,239,.1)}
.btn-terra{background:var(--terracotta);color:#fff}
.btn-terra:hover{background:var(--terracotta-dark)}

/* ---------- Author + article nav ---------- */
.author{display:flex;align-items:center;gap:14px;margin:36px 0 0;padding-top:26px;border-top:1px solid var(--line)}
.author .av{width:48px;height:48px;border-radius:50%;background:var(--terracotta-tint);display:grid;place-items:center;font-family:var(--font-display);color:var(--terracotta-dark);font-size:20px}
.author .nm{color:var(--ink);font-weight:600;font-size:15px}
.author .ro{color:var(--stone);font-size:13px}
.post-nav{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.post-nav a{color:var(--terracotta-dark);text-decoration:none;font-size:14.5px;font-weight:500}
.post-nav a:hover{text-decoration:underline}
.more-links{display:flex;gap:20px;margin-top:14px}
.more-links a{color:var(--stone);text-decoration:none;font-size:14px}
.more-links a:hover{color:var(--taupe)}

/* ---------- Blog index cards ---------- */
.hero-blog{padding:84px 0 20px;text-align:center}
.hero-blog h1{font-family:var(--font-display);font-size:clamp(34px,6vw,52px);color:var(--ink);font-weight:400;line-height:1.1;margin-bottom:18px}
.hero-blog .lead{font-size:19px;max-width:620px;margin:0 auto;color:var(--stone)}
.posts{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;margin:52px 0 20px}
.card{background:var(--paper);border:1px solid var(--line);border-radius:16px;overflow:hidden;text-decoration:none;display:flex;flex-direction:column;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.card .thumb{aspect-ratio:16/10;overflow:hidden;background:var(--sand-100)}
.card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.card:hover .thumb img{transform:scale(1.04)}
.card .body{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1}
.card .date{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:8px}
.card h2{font-family:var(--font-display);font-size:22px;color:var(--ink);font-weight:400;line-height:1.25;margin-bottom:10px}
.card p{font-size:15px;color:var(--stone);margin:0 0 16px}
.card .read{margin-top:auto;color:var(--terracotta-dark);font-weight:600;font-size:14px}
@media(max-width:680px){.posts{grid-template-columns:1fr}}

/* ---------- Footer ---------- */
.site-foot{margin-top:72px;border-top:1px solid var(--line);padding:34px 0;text-align:center;font-size:14px;color:var(--stone)}
.site-foot a{color:var(--terracotta-dark);text-decoration:none}

/* ---------- Reveal animation ---------- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}*{scroll-behavior:auto!important}}

/* ---------- Lightbox ---------- */
.lb{position:fixed;inset:0;background:rgba(20,16,12,.92);display:none;align-items:center;justify-content:center;z-index:120}
.lb.open{display:flex}
.lb img{max-width:92vw;max-height:88vh;object-fit:contain;border-radius:8px}
.lb button{position:absolute;background:none;border:none;color:rgba(255,255,255,.85);cursor:pointer;padding:12px}
.lb .x{top:14px;right:16px;font-size:30px;line-height:1}
.lb .p{left:12px;font-size:40px}
.lb .n{right:12px;font-size:40px}
.lb button:hover{color:#fff}

/* ---------- Prije/poslije blok s galerijama (članak 4) ---------- */
.gal.two{grid-template-columns:repeat(2,1fr)}
.bax{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:22px 0 10px}
.bax .lbl{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;margin-bottom:10px}
.bax .lbl.b{color:var(--stone)}
.bax .lbl.a{color:var(--terracotta-dark)}
.bax .gal{margin:0}
@media(max-width:640px){.bax{grid-template-columns:1fr;gap:18px}}

/* ============================================================
   ZLATNI TONOVI + TEKSTURA (blog — dosljednost s naslovnicom)
   ============================================================ */
:root{
  --gold-metal:linear-gradient(135deg,#EBD190 0%,#D9B45F 22%,#C29A46 48%,#9C7735 74%,#7A5A28 100%);
  --gold-line:linear-gradient(90deg,rgba(195,160,92,0),#C3A05C 20%,#E7CE86 50%,#C3A05C 80%,rgba(195,160,92,0));
}
body::after{
  content:"";position:fixed;inset:0;z-index:70;pointer-events:none;
  opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23n)'/%3E%3C/svg%3E");
}
.card .date, .rule span{
  background:var(--gold-metal);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.rule::before,.rule::after{background:var(--gold-line);height:1.5px}
.post-hero .meta{color:rgba(255,255,255,.85)}