/* Generatie NU. Waarden 1:1 overgenomen uit generatie-nu.dc.html. */

/* ---------- Hero (afwijkingen t.o.v. de gedeelde .hero-page) ---------- */
.p-gn-hero { min-height: 74svh; padding: clamp(150px, 20vh, 240px) 0 0; }
.p-gn-hero .hero-page__overlay { background: linear-gradient(180deg, rgba(1,32,45,.9) 0%, rgba(2,52,74,.5) 38%, rgba(1,32,45,.95) 100%); }
.p-gn-hero .hero-page__in { padding-bottom: clamp(80px, 11vh, 140px); }
.p-gn-hero .hero-page__intro { margin: clamp(20px, 2.4vw, 28px) 0 0; max-width: 62ch; }
.p-gn-hero .hero-page__chips { gap: 12px; margin: clamp(24px, 3vw, 32px) 0 0; }
.p-gn-hero .chip-anchor { padding: 14px 24px; border: 0; font-weight: 800; transition: transform .25s ease; }
.p-gn-hero .chip-anchor:hover { transform: translateY(-3px); }
.p-gn-hero .chip-anchor, .p-gn-hero .chip-anchor.is-navy, .p-gn-hero .chip-anchor.is-creme, .p-gn-hero .chip-anchor.is-wit { background: #fff; color: var(--wm-navy); }
.p-gn-hero .chip-anchor.is-koraal { background: var(--wm-coral); color: #fff; }
.p-gn-hero .chip-anchor.is-zand { background: var(--wm-sand); color: var(--wm-navy); }
.p-gn-hero .chip-anchor.is-teal { background: var(--wm-teal); color: #fff; }

/* ---------- Intro: niet de kerk van morgen ---------- */
.p-gn-intro { background: var(--wm-cream); color: var(--wm-navy); padding: clamp(40px, 5vw, 74px) 0 clamp(50px, 6vw, 90px); }
.p-gn-intro__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: clamp(30px, 4vw, 64px); }
.p-gn-intro__title { margin: 0; font-size: clamp(30px, 4.2vw, 54px); line-height: 1.05; font-weight: 800; letter-spacing: -.025em; max-width: 22ch; text-wrap: balance; }
.p-gn-intro__text { margin: 22px 0 0; font-size: 18px; line-height: 1.75; color: var(--wm-text-intro); max-width: 58ch; text-wrap: pretty; }
.p-gn-intro__cards { display: flex; flex-direction: column; gap: 16px; justify-content: center; }
.p-gn-intro__card { border-radius: 24px; padding: 26px 28px; }
.p-gn-intro__card--wit { background: #fff; box-shadow: 0 14px 34px rgba(2,67,94,.12); }
.p-gn-intro__card--navy { background: var(--wm-navy); color: #fff; box-shadow: 0 14px 34px rgba(2,67,94,.24); }
.p-gn-intro__card-title { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.p-gn-intro__card-text { margin: 10px 0 0; font-size: 18px; line-height: 1.7; }
.p-gn-intro__card--wit .p-gn-intro__card-text { color: var(--wm-text-body); }
.p-gn-intro__card--navy .p-gn-intro__card-text { color: rgba(255,255,255,.92); }

/* ---------- Leeftijdsgroep-secties ---------- */
.p-gn-group { padding: clamp(50px, 6vw, 88px) 0; }
.p-gn-group--last { padding-bottom: 0; }
.p-gn-group__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: clamp(30px, 4vw, 64px); align-items: center; }
.p-gn-group__badge { display: inline-block; padding: 9px 18px; border-radius: 999px; font-size: 18px; font-weight: 800; }
.p-gn-group__title { margin: 18px 0 0; font-size: clamp(30px, 4.2vw, 56px); line-height: 1.05; font-weight: 800; letter-spacing: -.025em; }
.p-gn-group__text { margin: 18px 0 0; font-size: 18px; line-height: 1.75; max-width: 56ch; text-wrap: pretty; }
.p-gn-group__chips { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 0; font-size: 18px; font-weight: 700; }
.p-gn-group__chip { padding: 12px 20px; border-radius: 999px; }
.p-gn-group__media { position: relative; border-radius: 30px; overflow: hidden; aspect-ratio: 4 / 3; }
.p-gn-group__media--links { order: 2; }
.p-gn-group__img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--wm-ease); }
.p-gn-group__img:hover { transform: scale(1.05); }
.p-gn-group__wave { margin-top: clamp(44px, 6vw, 84px); }

/* Kleurschema's: gekleurde secties (witte tekst, witte tinten) */
.p-gn-group.is-koraal { background: var(--wm-coral); color: #fff; }
.p-gn-group.is-teal { background: var(--wm-teal); color: #fff; }
.p-gn-group.is-navy { background: var(--wm-navy); color: #fff; }
.p-gn-group.is-koraal .p-gn-group__badge,
.p-gn-group.is-teal .p-gn-group__badge,
.p-gn-group.is-navy .p-gn-group__badge { background: rgba(255,255,255,.22); }
.p-gn-group.is-koraal .p-gn-group__chip,
.p-gn-group.is-teal .p-gn-group__chip,
.p-gn-group.is-navy .p-gn-group__chip { background: rgba(255,255,255,.16); }
.p-gn-group.is-koraal .p-gn-group__media,
.p-gn-group.is-teal .p-gn-group__media,
.p-gn-group.is-navy .p-gn-group__media { box-shadow: 0 26px 60px rgba(1,32,45,.3); }

/* Kleurschema's: lichte secties (navy tekst, navy tinten) */
.p-gn-group.is-zand { background: var(--wm-sand); color: var(--wm-navy); }
.p-gn-group.is-creme { background: var(--wm-cream); color: var(--wm-navy); }
.p-gn-group.is-zand .p-gn-group__badge,
.p-gn-group.is-creme .p-gn-group__badge { background: var(--wm-navy); color: var(--wm-sand); }
.p-gn-group.is-zand .p-gn-group__text,
.p-gn-group.is-creme .p-gn-group__text { color: var(--wm-text-intro); }
.p-gn-group.is-zand .p-gn-group__chips { color: var(--wm-navy); }
.p-gn-group.is-zand .p-gn-group__chip { background: rgba(2,67,94,.12); }
.p-gn-group.is-creme .p-gn-group__chip { background: rgba(2,67,94,.1); }
.p-gn-group.is-zand .p-gn-group__media { box-shadow: 0 26px 60px rgba(2,67,94,.26); }
.p-gn-group.is-creme .p-gn-group__media { box-shadow: 0 26px 60px rgba(2,67,94,.24); }

/* ---------- Slot: vragen over een van de groepen ---------- */
.p-gn-close { background: var(--wm-navy-dark); color: #fff; padding: clamp(20px, 3vw, 40px) 0 clamp(50px, 6vw, 84px); }
.p-gn-close__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(24px, 3vw, 44px); align-items: center; }
.p-gn-close__title { margin: 0; font-size: clamp(28px, 3.6vw, 46px); line-height: 1.07; font-weight: 800; letter-spacing: -.02em; max-width: 22ch; text-wrap: balance; }
.p-gn-close__text { margin: 16px 0 0; font-size: 18px; line-height: 1.7; color: rgba(255,255,255,.9); max-width: 54ch; }