/* ============================================================
   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;}
}

/* --- STRIEMEN: FASEKOPPEN ---------------------------------- */
/* De striemenpagina (/indications/striemen + EN/RU twins) splitst het
   behandeladvies in twee fasen, elk met een losse <h4> boven een
   .treat-grid. Het ontwerp gaf die koppen inline marges (14px onder,
   32px boven de tweede); de globale reset zet h4 op 0. */
.rejuv-section .phase-head{margin:32px 0 14px;}
.rejuv-section .section-head + .phase-head{margin-top:0;}

/* --- STRIEMEN: HERO-FOTO --------------------------------- */
/* Bewust NIET via tools/gen-hero-images.php: die sleutelt op page-id, en
   productie heeft andere page-IDs dan lokaal (RU injectables = 1585 lokaal,
   1600 live). Deze regel hangt aan de klasse striemen-hero die
   tools/import-striemen.php op de hero zet, dus hij werkt op elke omgeving
   zonder hero-images.css opnieuw te genereren. Zelfde gradient als de
   gegenereerde heroes.
   min-height: deze hero heeft geen knoppen en geen rating-badge, dus zonder
   minimum is hij ~310px (acne-littekens: 456) en toont cover maar een
   smalle strook van de foto. Flex centreert de tekst verticaal; .wrap krijgt
   width:100% omdat auto-marges hem in een flex-kolom anders krimpen. */
.treatment-hero.striemen-hero{
  background-image:linear-gradient(90deg,var(--deep) 33%,rgba(20,26,30,.5) 57%,rgba(20,26,30,.1) 100%),url("../images/indications/striemen.avif");
  background-size:cover; background-position:center right;
  min-height:460px; display:flex; flex-direction:column; justify-content:center;
}
.treatment-hero.striemen-hero .wrap{width:100%;}
@media (max-width:760px){
  .treatment-hero.striemen-hero{
    background-image:linear-gradient(180deg,rgba(20,26,30,.6),rgba(20,26,30,.88)),url("../images/indications/striemen.avif");
    background-position:center top;
  }
}