/* ============================================================
   HUIDVERJONGING / SKIN REJUVENATION
   Componenten die alleen op de huidverjongingspagina's voorkomen
   (hub, 25+/30+/40+/50+/60+ en de zeven indicatiepagina's).

   De hero zelf hergebruikt .treatment-hero uit treatment.css — die is
   qua opmaak identiek aan de .hero uit het ontwerp (donkere achtergrond,
   gouden radial, gouden eyebrow). Alleen de drie hero-onderdelen die
   nieuw zijn (stage-badge, byline, age-nav) staan hieronder.

   Tokens (--gold, --line, --deep, --ink-soft …) komen uit sensitif.css.
   Geen build-stap.
   ============================================================ */

/* --- SECTIE-RITME ------------------------------------------ */
/* Het ontwerp gebruikt 48px verticale sectiepadding; sensitif.css zet
   section{padding:80px 0} voor de rest van de site. Daarom een eigen
   klasse i.p.v. het globale element-selectorgedrag te wijzigen. */
.rejuv-section{padding:48px 0;}
.rejuv-section.pt-0{padding-top:0;}
.rejuv-section.pb-0{padding-bottom:0;}
.rejuv-section.bg-panel{background:var(--bg-panel);}

/* --- HERO-AANVULLINGEN ------------------------------------- */

/* Levensfase-label ("Protect", "Preserve", "Correct" …) boven de eyebrow. */
.treatment-hero .stage-badge{
  display:inline-block; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.25);
  color:var(--gold-bright); font-family:'IBM Plex Mono',monospace; font-size:11px;
  letter-spacing:0.06em; text-transform:uppercase; padding:5px 14px; border-radius:16px;
  margin-bottom:14px;
}

/* .byline staat sinds de About-herbouw (sept 2026) in treatment.css:
   /over-ons gebruikt dezelfde regel en laadt dit bestand niet. */

/* Leeftijdsnavigatie 25+ … 60+ onderaan de hero van de leeftijdspagina's. */
.treatment-hero .age-nav{margin-top:22px; display:flex; gap:8px; flex-wrap:wrap;}
.treatment-hero .age-nav a{
  font-family:'IBM Plex Mono',monospace; font-size:12.5px;
  border:1px solid rgba(255,255,255,0.25); color:rgba(246,247,245,0.8);
  padding:8px 16px; border-radius:20px; text-decoration:none;
}
.treatment-hero .age-nav a.current{background:var(--gold); border-color:var(--gold); color:#fff; font-weight:600;}
.treatment-hero .age-nav a:hover{border-color:var(--gold-bright);}

/* De consult-CTA staat hier als los <a> (html-blok) i.p.v. core/button, dus
   krijg 'm boven de radial-gradient van .cta-box::before. */
.cta-box > a{position:relative;}

/* --- TL;DR ------------------------------------------------- */
/* .tldr-box staat sinds de About-herbouw (sept 2026) in
   treatment.css: /over-ons gebruikt 'm ook, en die pagina laadt
   rejuvenation.css niet. Regels ongewijzigd verplaatst. */

/* --- NUANCE-CITAAT ----------------------------------------- */

.nuance-quote{
  background:var(--deep); color:#fff; border-radius:10px; padding:26px 30px;
  margin:8px 0 0; position:relative; overflow:hidden;
}
.nuance-quote::before{
  content:""; position:absolute; top:-30%; right:-5%; width:220px; height:220px;
  background:radial-gradient(circle, var(--gold) 0%, transparent 70%);
  opacity:0.2; border-radius:50%;
}
.nuance-quote p{
  font-size:15px; line-height:1.55; font-style:italic;
  color:rgba(246,247,245,0.92); position:relative; max-width:65ch;
}

/* --- BEHANDELKAARTEN --------------------------------------- */

/* .treat-card zelf staat sinds de About-herbouw (sept 2026) in
   treatment.css — /over-ons gebruikt dezelfde kaart voor de drie
   werkwijze-stappen. Alleen de tweekoloms-track is hier gebleven,
   want die is specifiek voor deze pagina's. */
.treat-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px;}

@media (max-width:700px){
  .treat-grid{grid-template-columns:1fr;}
}

/* --- HUB: INDICATIEKAARTEN, BEHANDELRIJ, NOTICE ------------- */
/* Alleen in gebruik op de hub (/huidverjonging, /en/skin-rejuvenation). */

.notice{
  background:var(--gold-soft); border:1px solid var(--gold); border-radius:6px;
  padding:16px 20px; font-size:13px; color:var(--ink); margin-bottom:28px;
}
.notice strong{color:var(--deep);}

.indication-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.indication-card{
  background:#fff; border:1px solid var(--line); border-radius:10px; padding:24px;
  text-decoration:none; display:block; position:relative; overflow:hidden; transition:.15s;
}
.indication-card:hover{border-color:var(--gold); box-shadow:0 8px 22px rgba(19,42,59,0.09); transform:translateY(-2px);}
.indication-card::before{
  content:""; position:absolute; top:0; left:0; width:100%; height:2px;
  background:linear-gradient(90deg, var(--gold), var(--gold-bright));
}
.indication-card .skinspan-route{
  font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:0.05em;
  text-transform:uppercase; color:var(--gold); background:var(--gold-soft);
  display:inline-block; padding:3px 10px; border-radius:12px; margin-bottom:12px;
}
.indication-card h4{font-size:16px; margin-bottom:8px; color:var(--ink);}
.indication-card p{font-size:13px; color:var(--ink-soft); margin-bottom:12px;}
.indication-card .go{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--gold);}

.treat-row{display:flex; flex-wrap:wrap; gap:10px;}
.treat-row a{
  font-family:'Inter',sans-serif; font-size:13px; color:var(--ink); text-decoration:none;
  background:#fff; border:1px solid var(--line); border-radius:20px; padding:9px 16px;
}
.treat-row a:hover{background:var(--gold-soft); border-color:var(--gold);}

@media (max-width:900px){
  .indication-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:600px){
  .indication-grid{grid-template-columns:1fr;}
}