/* ============================================================
   page-blog.css — Blog hub / arhiva
   Signature: topli magazin (masthead + rule lines + bubbles)
   Reuse: .hero .hero-bg .step .step-img .step-body .eyebrow .lead .btn
   Sve boje kroz var(--...). Klase prefiks: .blog-
   ============================================================ */

/* ---------- MASTHEAD ---------- */
.blog-hero{padding-bottom:clamp(48px,7vw,84px);text-align:center}
.blog-masthead{max-width:760px;margin-inline:auto;position:relative;z-index:1}
.blog-masthead h1{font-size:clamp(2.3rem,6vw,4.4rem);margin:.9rem auto 1.15rem}
.blog-masthead h1 em{font-style:italic;color:var(--aqua);position:relative;white-space:nowrap}
.blog-masthead h1 em::after{content:"";position:absolute;left:0;right:0;bottom:.08em;height:.09em;
  background:color-mix(in srgb,var(--aqua) 45%,transparent);border-radius:2px}
.blog-masthead .eyebrow{justify-content:center}
.blog-masthead .lead{margin-inline:auto}

/* issue / magazine label */
.blog-issue{display:flex;align-items:center;justify-content:center;gap:1rem;
  font-family:'Fraunces',serif;font-style:italic;font-size:.92rem;color:var(--muted);
  letter-spacing:.02em;margin-bottom:.4rem}
.blog-rule{height:1px;width:clamp(28px,10vw,84px);
  background:linear-gradient(90deg,transparent,var(--aqua),transparent);display:inline-block;opacity:.8}

.blog-hero-actions{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center;margin-top:1.9rem}

/* signature floating bubbles */
.blog-bubbles{position:absolute;inset:0;z-index:0;pointer-events:none}
.blog-bubbles span{position:absolute;bottom:-40px;border-radius:50%;opacity:0;
  background:radial-gradient(circle at 32% 30%,rgba(255,255,255,.9),color-mix(in srgb,var(--aqua-bright) 55%,transparent) 60%,transparent);
  animation:blogRise linear infinite}
.blog-bubbles span:nth-child(1){left:12%;width:26px;height:26px;animation-duration:13s;animation-delay:0s}
.blog-bubbles span:nth-child(2){left:78%;width:40px;height:40px;animation-duration:17s;animation-delay:3s}
.blog-bubbles span:nth-child(3){left:52%;width:18px;height:18px;animation-duration:11s;animation-delay:6s}
@keyframes blogRise{0%{transform:translateY(0) scale(.7);opacity:0}12%{opacity:.7}100%{transform:translateY(-72vh) scale(1.15);opacity:0}}

/* ---------- LAYOUT ---------- */
.blog-wrap-sec{padding-top:clamp(40px,6vw,72px)}
.blog-layout{display:grid;grid-template-columns:1fr 320px;gap:clamp(2rem,4vw,3.4rem);align-items:start}
.blog-main{min-width:0}

/* ---------- GRID KARTICA ---------- */
.blog-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem}
.blog-card{transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.blog-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.blog-card-media{display:block;position:relative}
.blog-card-media img{width:100%;height:100%;object-fit:cover}
.blog-card-cat{position:absolute;top:.8rem;left:.8rem;z-index:2;
  background:color-mix(in srgb,var(--card) 88%,transparent);backdrop-filter:blur(6px);
  color:var(--aqua);font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:.32rem .72rem;border-radius:var(--r-pill);box-shadow:var(--shadow-sm)}
.blog-card-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;
  font-size:.78rem;font-weight:600;letter-spacing:.02em;color:var(--muted);margin-bottom:.55rem}
.blog-card-meta time{color:var(--aqua)}
.blog-card-title{font-size:var(--fs-h3);margin-bottom:.5rem;line-height:1.16}
.blog-card-title a{color:var(--fg);transition:color .2s var(--ease)}
.blog-card:hover .blog-card-title a{color:var(--aqua)}
.blog-card .step-body p{font-size:.94rem;color:var(--muted);margin-bottom:1rem}
.blog-card-more{display:inline-flex;align-items:center;gap:.4rem;margin-top:auto;
  font-weight:600;font-size:.88rem;color:var(--aqua)}
.blog-card-more svg{transition:transform .25s var(--ease)}
.blog-card:hover .blog-card-more svg{transform:translateX(4px)}

/* ---------- PAGINACIJA ---------- */
.blog-pagination{margin-top:2.8rem}
.blog-pagination .nav-links{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;align-items:center}
.blog-pagination .page-numbers{display:inline-grid;place-items:center;min-width:2.7rem;height:2.7rem;padding:0 .7rem;
  border-radius:var(--r-pill);border:1.5px solid var(--line);background:var(--card);color:var(--fg);
  font-weight:600;font-size:.94rem;transition:border-color .2s,color .2s,background .2s,transform .2s}
.blog-pagination a.page-numbers:hover{border-color:var(--aqua);color:var(--aqua);transform:translateY(-2px)}
.blog-pagination .page-numbers.current{background:var(--teal);color:#fff;border-color:transparent}
:root[data-theme="dark"] .blog-pagination .page-numbers.current{color:#06222a}
@media (prefers-color-scheme:dark){.blog-pagination .page-numbers.current{color:#06222a}}
:root[data-theme="light"] .blog-pagination .page-numbers.current{color:#fff}
.blog-pagination .page-numbers.dots{border-color:transparent;background:transparent}

/* ---------- EMPTY ---------- */
.blog-empty{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(2.2rem,5vw,3.6rem);text-align:center;box-shadow:var(--shadow-sm)}
.blog-empty h2{font-size:var(--fs-h2);margin-bottom:.9rem}
.blog-empty .lead{margin:0 auto 1.6rem}

/* ---------- SIDEBAR ---------- */
.blog-side{display:flex;flex-direction:column;gap:1.3rem;position:sticky;top:96px}
.blog-cta{position:relative;overflow:hidden;border-radius:var(--r-lg);padding:1.8rem 1.6rem;
  background:linear-gradient(155deg,#20392f,#2e4a41 55%,#3d6153);color:#eef4ec;box-shadow:var(--shadow)}
.blog-cta-star{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  background:var(--gold);color:#2a2205;font-size:1.35rem;margin-bottom:1rem;
  box-shadow:0 6px 16px -6px color-mix(in srgb,var(--gold) 70%,transparent)}
.blog-cta h2{color:#fff;font-size:1.4rem;line-height:1.12;margin-bottom:.7rem}
.blog-cta p{color:#cfe3d7;font-size:.92rem;margin-bottom:1.3rem}
.blog-cta .btn-primary{width:100%;justify-content:center;background:var(--gold);color:#1a1405}
.blog-cta .btn-primary:hover{background:var(--aqua-bright);color:#06222a}
.blog-cta-tel{display:block;text-align:center;margin-top:.8rem;font-weight:700;font-size:.95rem;color:#eef4ec;opacity:.9}
.blog-cta-tel:hover{opacity:1}

.blog-widget{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:1.5rem 1.5rem;box-shadow:var(--shadow-sm)}
.blog-widget-title{font-size:1.15rem;margin-bottom:1rem}
.blog-cats{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.15rem}
.blog-cats a{display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  padding:.62rem .2rem;border-bottom:1px solid var(--line);color:var(--fg);
  font-size:.95rem;font-weight:500;transition:color .2s,padding-left .2s}
.blog-cats li:last-child a{border-bottom:0}
.blog-cats a:hover{color:var(--aqua);padding-left:.4rem}
.blog-cats b{font-family:'Manrope';font-weight:700;font-size:.78rem;color:var(--aqua);
  background:color-mix(in srgb,var(--aqua) 13%,transparent);border-radius:var(--r-pill);
  padding:.12rem .6rem;font-variant-numeric:tabular-nums}
.blog-tip{background:linear-gradient(135deg,color-mix(in srgb,var(--mist) 60%,var(--card)),var(--card));
  border-color:color-mix(in srgb,var(--aqua) 22%,var(--line))}
.blog-tip p{margin-top:.7rem;font-family:'Fraunces',serif;font-style:italic;font-size:1.02rem;color:var(--fg);line-height:1.5}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1000px){
  .blog-layout{grid-template-columns:1fr 280px;gap:2rem}
}
@media (max-width:900px){
  .blog-layout{grid-template-columns:1fr}
  .blog-side{position:static;flex-direction:row;flex-wrap:wrap}
  .blog-side>*{flex:1 1 260px}
}
@media (max-width:640px){
  .blog-grid{grid-template-columns:1fr}
  .blog-side{flex-direction:column}
}

@media (prefers-reduced-motion:reduce){
  .blog-bubbles{display:none}
  .blog-card,.blog-card-more svg,.blog-cats a{transition:none}
}