/* ============================================================
   Benefiti — page-benefiti.css
   Image-forward naizmenične trake: prava fotografija u .media-blob
   + drawn-line ikonica (stroke-dashoffset) + blago tinted pozadine.
   Reuse tokena/komponenti iz app.css; sve nove klase prefiksovane .ben-
   ============================================================ */

/* ---- HERO fine-tune ---- */
.ben-hero h1{max-width:15ch}
.ben-hero-chips{margin-top:.4rem}
.ben-hero-media{max-width:440px}
.ben-hero-blob{aspect-ratio:4/5;border-radius:46% 54% 48% 52%/54% 46% 54% 46%}
.ben-hero-tag{position:absolute;right:-6px;bottom:9%;z-index:5;display:flex;align-items:center;gap:.7rem;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-pill);
  padding:.55rem 1.1rem .55rem .7rem;box-shadow:var(--shadow-sm)}
.ben-hero-tag b{font-family:'Fraunces';font-weight:600;font-size:1.9rem;line-height:1;color:var(--aqua)}
.ben-hero-tag span{font-size:.82rem;font-weight:600;color:var(--muted);max-width:9ch;line-height:1.15}

/* ---- BENEFIT TRAKE ---- */
/* kompaktan, prirodan vertikalni ritam — blizu front-page sekcija, bez 100vh */
.ben-band{position:relative;overflow:hidden;padding-block:clamp(46px,6vw,82px)}
/* naizmenično, VRLO blago tinted — signature; bez velikih bledih elipsi */
.ben-band--mist{background:color-mix(in srgb,var(--mist) 40%,var(--bg))}
.ben-band--blush{background:color-mix(in srgb,var(--blush) 32%,var(--bg))}

.ben-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.8rem,4.5vw,4rem);align-items:center}
/* default: slika levo, tekst desno */
.ben-media{grid-column:1;grid-row:1}
.ben-copy{grid-column:2;grid-row:1}
/* --rev: slika desno, tekst levo */
.ben-band--rev .ben-media{grid-column:2}
.ben-band--rev .ben-copy{grid-column:1}

/* ---- MEDIA (fotografija napred) ---- */
.ben-media{position:relative;z-index:0;width:100%;max-width:520px;justify-self:center}
/* suptilna glow/mrlja IZA slike — mali intenzitet */
.ben-media::before{content:"";position:absolute;z-index:0;inset:8% -7% -10% -7%;border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--aqua) 30%,transparent),transparent 78%);
  filter:blur(34px);opacity:.42;pointer-events:none}
.ben-band--blush .ben-media::before{
  background:radial-gradient(closest-side,color-mix(in srgb,var(--blush) 46%,transparent),transparent 78%)}

.media-blob.ben-photo{position:relative;z-index:1;aspect-ratio:4/3;border-radius:var(--r-lg);box-shadow:var(--shadow)}
.media-blob.ben-photo img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.media-blob.ben-photo:hover img{transform:scale(1.045)}
/* nežan tonalni preliv za dubinu (kao hero-frame) */
.media-blob.ben-photo::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,transparent 58%,color-mix(in srgb,var(--teal) 26%,transparent));
  opacity:.55;mix-blend-mode:multiply}

/* broj benefita — sedi na uglu slike (van .media-blob da ga overflow ne seče) */
.ben-num{position:absolute;top:-.5rem;left:-.5rem;z-index:3;
  width:3rem;height:3rem;border-radius:50%;background:var(--card);color:var(--aqua);
  display:grid;place-items:center;box-shadow:var(--shadow-sm);border:1px solid var(--line);
  font-family:'Fraunces';font-weight:600;font-size:1.12rem;font-variant-numeric:tabular-nums}
.ben-band--rev .ben-num{left:auto;right:-.5rem}

/* ---- COPY ---- */
.ben-copy{max-width:var(--read)}
.ben-copy .eyebrow{margin:1rem 0 .5rem}
.ben-copy h2{font-size:var(--fs-h2);margin-bottom:.9rem}
.ben-copy p{color:var(--muted)}
.ben-facts{list-style:none;padding:0;margin:1.3rem 0 0;display:flex;flex-direction:column;gap:.55rem}
.ben-facts li{display:flex;gap:.6rem;align-items:flex-start;font-size:.94rem;font-weight:500;color:var(--fg)}
.ben-facts li svg{width:19px;height:19px;color:var(--aqua);flex:none;margin-top:.18rem}

/* ---- DRAWN-LINE IKONICA (crta se na reveal) ---- */
.ben-glyph{display:inline-grid;place-items:center;width:54px;height:54px;
  border-radius:16px;background:color-mix(in srgb,var(--aqua) 13%,transparent);color:var(--aqua)}
.ben-ico{width:30px;height:30px;overflow:visible}
.ben-ico path{stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset 1.1s var(--ease) .2s}
/* is-in dolazi na .ben-copy ([data-reveal]) → linija se iscrtava */
.ben-copy.is-in .ben-ico path{stroke-dashoffset:0}

/* ---- ZA KOJI UZRAST (timeline kartice) ---- */
.ben-age{list-style:none;margin:2.6rem 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.ben-age__step{position:relative;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:1.6rem 1.4rem 1.5rem;box-shadow:var(--shadow-sm)}
.ben-age__badge{display:inline-flex;align-items:center;justify-content:center;
  font-family:'Fraunces';font-weight:600;font-size:1.02rem;color:#fff;
  background:var(--aqua);border-radius:var(--r-pill);padding:.28rem 1rem;
  letter-spacing:.01em;box-shadow:0 6px 14px -8px color-mix(in srgb,var(--aqua) 70%,transparent)}
:root[data-theme="dark"] .ben-age__badge{color:#06222a}
@media (prefers-color-scheme:dark){.ben-age__badge{color:#06222a}}
:root[data-theme="light"] .ben-age__badge{color:#fff}
.ben-age__step h3{font-size:1.14rem;margin:.9rem 0 .4rem}
.ben-age__step p{font-size:.92rem;color:var(--muted)}
.ben-age__step:not(:last-child)::after{content:"";position:absolute;top:2.35rem;right:-.75rem;
  width:1.5rem;height:2px;background:color-mix(in srgb,var(--aqua) 40%,transparent);z-index:1}

/* ---- CTA ---- */
.ben-cta{max-width:34ch;margin-inline:auto;text-align:center}
.ben-cta .eyebrow{justify-content:center}
.ben-cta h2{font-size:var(--fs-h2);margin:.9rem auto 1rem;max-width:18ch}
.ben-cta p{color:#cfe3d7;max-width:46ch;margin-inline:auto}
.ben-cta__actions{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;margin-top:1.9rem}
.ben-cta__note{margin-top:1.5rem;font-size:.84rem;color:#a9c6ba}

/* ---- RESPONSIVE (mobile-first breakpoints 900/760/640) ---- */
@media (max-width:900px){
  .ben-grid{grid-template-columns:1fr;gap:1.6rem}
  /* jedna kolona, slika UVEK iznad teksta (media je prva u DOM-u) */
  .ben-media,.ben-copy,
  .ben-band--rev .ben-media,.ben-band--rev .ben-copy{grid-column:1;grid-row:auto}
  .ben-media{max-width:440px;margin-inline:auto}
  .ben-hero-media{order:-1;max-width:320px}
  .ben-age{grid-template-columns:repeat(2,1fr)}
  .ben-age__step:not(:last-child)::after{display:none}
}
@media (max-width:760px){
  .ben-band{padding-block:clamp(40px,9vw,64px)}
  .ben-media{max-width:400px}
  .ben-copy .eyebrow{margin-top:.4rem}
}
@media (max-width:640px){
  .ben-glyph{width:48px;height:48px}
  .ben-ico{width:27px;height:27px}
  .ben-num{width:2.7rem;height:2.7rem;font-size:1rem}
  .ben-age{grid-template-columns:1fr}
  .ben-hero-tag{right:0;padding:.5rem .9rem .5rem .6rem}
  .ben-hero-tag b{font-size:1.6rem}
}

/* ---- REDUCED MOTION ---- */
@media (prefers-reduced-motion:reduce){
  .ben-ico path{stroke-dashoffset:0;transition:none}
  .media-blob.ben-photo img{transition:none}
  .media-blob.ben-photo:hover img{transform:none}
}