/* prestige sports - refresh laag
   Laadt NA style.css en alleen op de pagina's die al omgezet zijn.
   Bevat geen aanpassingen aan bestaande klassen die elders gebruikt worden,
   behalve waar expliciet gescoped met .pg-v2. */

/* ─────────────────────────────────────────────
   1. OPGERUIMD
   ───────────────────────────────────────────── */

/* Los gouden streepje boven de CTA-kop weg */
.pg-v2 .cta-inner::before { display:none; }

/* Gouden streep bovenop de dealsstrip weg */
.pg-v2 .deals-strip { border-top:1px solid var(--c-brd); }

/* De CTA-label hield twee losse streepjes links en rechts. Weg. */
.pg-v2 .cta-label::before,
.pg-v2 .cta-label::after { display:none; }


/* ─────────────────────────────────────────────
   2. DIENSTEN - fotokaarten
   ───────────────────────────────────────────── */

.svc-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(12px,1.5vw,20px);
}

.svc-card {
  position:relative;
  display:block;
  aspect-ratio:4/5;
  overflow:hidden;
  background:var(--c-s3);
  border:1px solid transparent;
  transition:border-color .4s var(--ease);
  cursor:pointer;
  color:inherit;
}
.svc-card:hover,
.svc-card:focus-visible { border-color:rgba(255,255,255,.10); }
.svc-card:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }

html.light .svc-card:hover,
html.light .svc-card:focus-visible { border-color:rgba(10,9,5,.14); }

.svc-card img {
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  filter:grayscale(30%) brightness(.82);
  transform:scale(1.01);
  transition:transform .7s var(--ease), filter .5s var(--ease);
}
.svc-card:hover img,
.svc-card:focus-visible img {
  transform:scale(1.06);
  filter:grayscale(0%) brightness(.92);
}

/* Verloop onderin zodat de tekst leesbaar blijft */
.svc-card::after {
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(
    to top,
    rgba(6,6,6,.94) 0%,
    rgba(6,6,6,.82) 26%,
    rgba(6,6,6,.30) 55%,
    rgba(6,6,6,.05) 78%,
    transparent 100%
  );
  transition:opacity .45s var(--ease);
  pointer-events:none;
}

.svc-body {
  position:absolute; left:0; right:0; bottom:0;
  z-index:2;
  padding:clamp(20px,2.4vw,30px);
}

.svc-title {
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(19px,2.1vw,27px);
  font-weight:900; font-style:italic;
  text-transform:uppercase;
  letter-spacing:-.3px; line-height:1.02;
  color:#fff;
}

/* Tekst en link zitten samen in een blok dat openschuift.
   grid-template-rows animeert netjes zonder vaste hoogte te gokken. */
.svc-reveal {
  display:grid;
  grid-template-rows:0fr;
  opacity:0;
  transition:grid-template-rows .45s var(--ease), opacity .35s var(--ease);
}
.svc-reveal > div { overflow:hidden; }

.svc-card:hover .svc-reveal,
.svc-card:focus-visible .svc-reveal,
.svc-card:focus-within .svc-reveal {
  grid-template-rows:1fr;
  opacity:1;
}

.svc-text {
  font-size:clamp(12px,1.05vw,13.5px);
  font-weight:300; line-height:1.7;
  color:rgba(255,255,255,.78);
  padding-top:12px;
}

.svc-more {
  display:inline-flex; align-items:center; gap:8px;
  margin-top:14px;
  font-size:10px; font-weight:800; letter-spacing:2px;
  text-transform:uppercase; color:var(--gold);
}
.svc-more i { transition:transform .3s var(--ease); }
.svc-card:hover .svc-more i { transform:translateX(4px); }

@media (max-width:1000px) {
  .svc-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px) {
  .svc-grid { grid-template-columns:1fr; }
  .svc-card { aspect-ratio:3/2; }
  /* Op mobiel bestaat hover niet. Alles open en gecentreerd. */
  .svc-reveal { grid-template-rows:1fr; opacity:1; }
  .svc-body { text-align:center; padding:clamp(18px,5vw,26px); }
  .svc-more { justify-content:center; }
}
@media (hover:none) {
  .svc-reveal { grid-template-rows:1fr; opacity:1; }
}


/* ─────────────────────────────────────────────
   3. AANPAK - doorlopende lijn
   ───────────────────────────────────────────── */

.flow { position:relative; }

/* Het spoor waar de lijn overheen loopt */
.flow-rail {
  position:absolute;
  top:5px; left:0; right:0;
  height:1px;
  background:var(--c-t4);
}
.flow-line {
  position:absolute;
  top:0; left:0;
  height:100%; width:100%;
  background:var(--gold);
  transform:scaleX(0);
  transform-origin:left center;
}

.flow-steps {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,3vw,48px);
}

.flow-step { position:relative; padding-top:34px; }

.flow-dot {
  position:absolute;
  top:0; left:0;
  width:11px; height:11px;
  border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 0 5px var(--c-s1);
}

.flow-title {
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(20px,2.2vw,28px);
  font-weight:900; font-style:italic;
  text-transform:uppercase;
  color:var(--c-t1);
  margin-bottom:10px;
  line-height:1.02;
}
.flow-text {
  color:var(--c-t2);
  font-size:14px;
  line-height:1.75;
  max-width:38ch;
}

@media (max-width:800px) {
  /* Lijn kantelt mee: verticaal langs de linkerkant */
  .flow-rail { top:6px; bottom:6px; left:5px; right:auto; width:1px; height:auto; }
  .flow-line { transform:scaleY(0); transform-origin:top center; }
  .flow-steps { grid-template-columns:1fr; gap:34px; }
  .flow-step { padding-top:0; padding-left:34px; }
  .flow-dot { top:6px; }
  .flow-text { max-width:none; }
}
@media (max-width:640px) {
  /* Mobiel: alles gecentreerd, lijn eronder als los accent */
  .flow-rail { display:none; }
  .flow-steps { text-align:center; }
  .flow-step { padding-left:0; padding-top:26px; }
  .flow-dot { left:50%; top:0; transform:translateX(-50%); }
  .flow-text { margin-left:auto; margin-right:auto; }
}


/* Verticale variant: voor processen met meer dan drie stappen.
   Zelfde taal als de horizontale lijn, alleen gekanteld. */
/* Zonder maximum staat de tekst links in een heel breed vlak en blijft
   rechts een leeg gat over. Gecentreerd leest rustiger. */
.flow-v {
  position:relative;
  padding-left:38px;
  max-width:720px;
  margin-left:auto; margin-right:auto;
}
.flow-v .flow-rail {
  top:6px; bottom:6px; left:5px; right:auto;
  width:1px; height:auto;
}
.flow-v .flow-line { transform:scaleY(0); transform-origin:top center; }
.flow-v .flow-steps { display:block; }
.flow-v .flow-step {
  padding:0 0 clamp(26px,3vw,40px) 0;
  margin-left:-38px; padding-left:38px;
}
.flow-v .flow-step:last-child { padding-bottom:0; }
.flow-v .flow-dot { top:6px; left:0; }
.flow-v .flow-text { max-width:none; }

@media (max-width:640px) {
  .flow-v { padding-left:0; }
  .flow-v .flow-rail { display:none; }
  /* Ook het raster op de dienstpagina's, want daar zijn de stappen
     directe kinderen en zit er geen .flow-steps tussen. */
  .flow-v .flow-steps,
  .svc-steps-grid.flow-v { text-align:center; }
  .flow-v .flow-step { margin-left:0; padding-left:0; padding-top:24px; }
  .flow-v .flow-dot { left:50%; top:0; transform:translateX(-50%); }
  .flow-v .flow-text { margin-left:auto; margin-right:auto; }
}


/* ─────────────────────────────────────────────
   4. KOPPEN
   ───────────────────────────────────────────── */

/* Sectiekop zonder kicker heeft iets meer lucht eronder nodig */
.pg-v2 .sec-head-plain { margin-bottom:clamp(32px,5vw,56px); }
.pg-v2 .sec-head-plain .sec-title { margin:0; }

/* SplitText maskert per regel. Zonder JS blijft alles gewoon staan. */
.split-line { display:block; }


/* ─────────────────────────────────────────────
   5. DIENSTPAGINA - inhoudsblok
   ───────────────────────────────────────────── */

.case-strip {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--c-brd);
  border:1px solid var(--c-brd);
}
.case-cell {
  background:var(--c-s2);
  padding:clamp(24px,3vw,36px);
}
.case-player {
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(20px,2.2vw,26px);
  font-weight:900; font-style:italic;
  text-transform:uppercase;
  color:var(--c-t1);
  line-height:1.05;
}
.case-move {
  margin-top:8px;
  font-size:13px;
  color:var(--c-t2);
  line-height:1.65;
}
.case-move strong { color:var(--gold); font-weight:600; }

@media (max-width:800px) {
  .case-strip { grid-template-columns:1fr; }
}
@media (max-width:640px) {
  .case-cell { text-align:center; }
}


/* ─────────────────────────────────────────────
   6. MOBIEL - alles gecentreerd
   ───────────────────────────────────────────── */

@media (max-width:640px) {
  .pg-v2 .section-inner,
  .pg-v2 .sec-head-plain,
  .pg-v2 .about-split > div,
  .pg-v2 .section-head { text-align:center; }

  .pg-v2 .section-head { justify-content:center; }
  .pg-v2 .rule { margin-left:auto; margin-right:auto; }
  .pg-v2 .hero-actions,
  .pg-v2 .cta-btns { justify-content:center; }
  .pg-v2 .about-text p { text-align:center; }
}


/* ─────────────────────────────────────────────
   7. MOTION
   ───────────────────────────────────────────── */

/* Lenis vraagt om deze twee regels. Zonder de tweede blijven
   de horizontale sliders in de weg zitten. */
html.lenis, html.lenis body { height:auto; }
.lenis.lenis-smooth { scroll-behavior:auto !important; }
.lenis.lenis-stopped { overflow:hidden; }

@media (prefers-reduced-motion:reduce) {
  .svc-card img,
  .svc-reveal,
  .svc-more i { transition:none; }
  .flow-line { transform:none !important; }
}

/* Het stappenraster op de dienstpagina's gebruikt dezelfde lijn als de
   homepage. De stappen zijn daar directe kinderen van het raster in
   plaats van van een .flow-steps, vandaar de losse display-regel.
   Het oude raster had een eigen vlak en rand; die horen niet bij de
   lijn, anders staat er een grijze bak omheen. */
.svc-steps-grid.flow-v {
  display:block;
  background:none;
  border:none;
  gap:0;
}

/* ─────────────────────────────────────────────
   8. FOTO ACHTER DE STAPPEN
   ─────────────────────────────────────────────
   Een sectie met de stappenlijn krijgt een foto die bij het onderwerp
   past, met een donkere laag eroverheen zodat de tekst leesbaar blijft.
   De foto komt uit een variabele op de sectie zelf, zodat elke pagina
   zijn eigen beeld kan hebben zonder extra regels hier. */

.stap-foto { position:relative; overflow:hidden; }

.stap-foto > .stap-foto-laag {
  position:absolute; inset:0; z-index:0; pointer-events:none;
}
.stap-foto > .stap-foto-laag::before {
  content:'';
  position:absolute; inset:0;
  background-image:var(--stap-bg);
  background-size:cover;
  background-position:center;
  filter:grayscale(30%);
  opacity:.55;
}
/* Twee lagen: van boven en onder donkerder, zodat de kop en de laatste
   stap niet in het beeld verdrinken. */
.stap-foto > .stap-foto-laag::after {
  content:'';
  position:absolute; inset:0;
  background:
    linear-gradient(to bottom,
      rgba(8,8,8,.9) 0%, rgba(8,8,8,.56) 22%,
      rgba(8,8,8,.52) 78%, rgba(8,8,8,.9) 100%),
    linear-gradient(to right,
      rgba(8,8,8,.4) 0%, rgba(8,8,8,.12) 50%, rgba(8,8,8,.4) 100%);
}

/* De inhoud moet boven de foto blijven. */
.stap-foto > .section-inner,
.stap-foto > .svc-steps-inner { position:relative; z-index:1; }

/* Het diagonale lijnenpatroon botst met een foto. */
.stap-foto.section-gold-lines::before { display:none; }

html.light .stap-foto > .stap-foto-laag::after {
  background:
    linear-gradient(to bottom,
      rgba(248,247,242,.95) 0%, rgba(248,247,242,.78) 22%,
      rgba(248,247,242,.74) 78%, rgba(248,247,242,.95) 100%),
    linear-gradient(to right,
      rgba(248,247,242,.6) 0%, rgba(248,247,242,.3) 50%, rgba(248,247,242,.6) 100%);
}

@media (prefers-reduced-motion:reduce) {
  .stap-foto > .stap-foto-laag::before { filter:grayscale(30%); }
}

/* ─────────────────────────────────────────────
   9. KNOPPENRIJEN
   ─────────────────────────────────────────────
   Op de telefoon staan de knoppen onder elkaar. Links uitgelijnd en
   elk een eigen breedte oogt rommelig, zeker met de schuine vorm van
   deze knoppen. Gecentreerd en even breed leest rustiger. */

@media (max-width:640px) {
  .btn-rij,
  .pg-v2 .hero-actions,
  .pg-v2 .cta-btns,
  .pg-v2 .svc-cta-btns {
    justify-content:center;
    align-items:center;
    flex-direction:column;
    gap:12px;
  }
  /* Even breed, zodat de randen onder elkaar uitkomen. */
  .btn-rij > .btn,
  .pg-v2 .hero-actions > .btn,
  .pg-v2 .cta-btns > .btn {
    width:100%;
    max-width:320px;
    justify-content:center;
  }
}

/* ─────────────────────────────────────────────
   10. HERO WEGWIJZER
   ─────────────────────────────────────────────
   Vier ingangen onder de slogan. De hero had losse knoppen zonder
   uitleg, waardoor je moest raden waar je terechtkwam. Nu staat bij
   elke ingang wat je er vindt. */

.hero-wegwijzer {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  width:100%;
  max-width:820px;
  margin:clamp(28px,4vw,44px) auto 0;
}

.hw {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
  padding:18px 18px 16px;
  background:rgba(12,12,12,.62);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(6px);
  transition:background .28s var(--ease), border-color .28s var(--ease),
             transform .28s var(--ease);
}
.hw:hover,
.hw:focus-visible {
  background:rgba(12,12,12,.86);
  border-color:rgba(196,165,90,.55);
  transform:translateY(-3px);
}
.hw:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }

.hw-ico {
  font-size:15px; color:var(--gold);
  margin-bottom:8px;
}
.hw-t {
  font-family:'Barlow Condensed',sans-serif;
  font-weight:900; font-style:italic; text-transform:uppercase;
  font-size:clamp(15px,1.3vw,18px); line-height:1.05;
  color:#fff; letter-spacing:.2px;
}
.hw-s {
  font-size:11.5px; font-weight:400; line-height:1.4;
  color:rgba(255,255,255,.6);
}

/* De laatste is de eigenlijke actie, die mag opvallen. */
.hw-hoofd { background:rgba(196,165,90,.94); border-color:transparent; }
.hw-hoofd .hw-ico { color:#0a0905; }
.hw-hoofd .hw-t   { color:#0a0905; }
.hw-hoofd .hw-s   { color:rgba(10,9,5,.72); }
.hw-hoofd:hover,
.hw-hoofd:focus-visible { background:var(--gold-lt); border-color:transparent; }

@media (max-width:900px) {
  .hero-wegwijzer { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:520px) {
  .hero-wegwijzer { grid-template-columns:1fr; gap:8px; max-width:340px; }
  .hw {
    flex-direction:row; align-items:center; gap:12px;
    padding:14px 16px; text-align:left;
  }
  .hw-ico { margin-bottom:0; width:20px; flex:none; text-align:center; }
  .hw-t { font-size:15px; }
  /* Op een kleine telefoon is de ondertitel ruis naast de titel. */
  .hw-s { display:none; }
}

/* De hero moet alles kwijt kunnen zonder dat de wegwijzer wegvalt. */
.home-hero { min-height:100svh; }
.home-hero .hero-content {
  padding-top:calc(var(--nav-h) + 46px);
  padding-bottom:clamp(70px,10vh,110px);
}
@media (max-width:520px) {
  .home-hero .hero-content { padding-bottom:clamp(84px,14vh,120px); }
}

/* Externe link in het menu: laten zien dat je de site verlaat. */
.nav-extern { display:flex; align-items:center; gap:10px; }
.nav-extern-teken { font-size:11px; color:var(--gold); opacity:.75; }

/* ─────────────────────────────────────────────
   11. TOPBALK
   ─────────────────────────────────────────────
   Berichten uit het beheer. Groot nieuws krijgt een omgekeerde opmaak
   zodat het opvalt tussen de gewone regels door. */

.ticker-link { color:inherit; text-decoration:none; }
.ticker-link:hover .ticker-item { text-decoration:underline; text-underline-offset:3px; }

.ticker-groot {
  background:#0a0905;
  color:var(--gold-lt);
  padding:0 24px;
  height:100%;
  align-items:center;
}
.ticker-groot i { color:var(--gold-lt); opacity:1; }

.ticker-label {
  font-size:9px; font-weight:900; letter-spacing:2px;
  text-transform:uppercase;
  background:var(--gold);
  color:#0a0905;
  padding:3px 7px;
  margin-right:2px;
}

html.light .ticker-groot { background:#0a0905; color:var(--gold-lt); }

/* ─────────────────────────────────────────────
   12. MENU
   ─────────────────────────────────────────────
   Het paneel was 400px breed met letters tot 40px. Daardoor braken
   "Nieuws & Done Deals" en "Transfers & Momenten" over twee regels en
   schreeuwden alle tien de items even hard.

   Nu: breder op desktop, de tekst past op één regel, en de vijf
   secundaire ingangen staan kleiner in een eigen groep. Zo zie je in
   één oogopslag waar de site over gaat en blijft de rest bereikbaar. */

.nav-panel { width:min(520px,92vw); }

.nav-panel-link {
  font-size:clamp(24px,3.4vw,32px);
  line-height:1.02;
  padding-top:clamp(12px,1.7vw,15px);
  padding-bottom:clamp(12px,1.7vw,15px);
}

/* De tweede groep: kleiner, rustiger, met lucht erboven. */
.nav-groep-tweede {
  display:flex; flex-direction:column;
  margin-top:14px;
  padding-top:6px;
  border-top:1px solid var(--c-brd);
}
.nav-klein {
  font-size:clamp(17px,2vw,21px);
  color:var(--c-t2);
  padding-top:clamp(9px,1.2vw,12px);
  padding-bottom:clamp(9px,1.2vw,12px);
}
.nav-klein:hover { color:var(--c-t1); }

/* Diensten heeft een uitklap, dat mag je zien zonder te raden. */
.nav-panel-link[data-sub] .link-arrow { transition:transform .25s var(--ease); }
.nav-panel-link[data-sub].open .link-arrow { transform:rotate(90deg); }

@media (max-width:520px) {
  .nav-panel { width:min(400px,88vw); }
  .nav-panel-link { font-size:26px; }
  .nav-klein { font-size:17px; }
}


/* ─────────────────────────────────────────────
   13. BERICHTPAGINA
   ─────────────────────────────────────────────
   Drie kolommen: links een inhoudsopgave die meeloopt met waar je bent,
   in het midden de tekst op leesbreedte, rechts delen plus een
   uitnodiging.

   Waarom: de tekst liep eerst over de volle breedte, wat op een groot
   scherm regels van 140 tekens geeft. En zodra er koppen in een bericht
   staan wil je kunnen springen zonder te scrollen. */

.lees {
  display:grid;
  grid-template-columns:250px minmax(0,720px) 260px;
  gap:clamp(28px,4vw,64px);
  justify-content:center;
  max-width:1440px;
  margin:0 auto;
  /* De kop staat vast bovenaan, dus de eerste regel moet daaronder
     beginnen. Zonder dit valt het categorielabel achter de balk. */
  padding:calc(var(--nav-h) + clamp(44px,6vw,84px)) var(--pad-x) clamp(48px,7vw,88px);
}
body.has-ticker .lees { padding-top:calc(var(--nav-h) + 36px + clamp(40px,5vw,72px)); }

/* ── Linkerkolom ── */
.lees-kleef {
  position:sticky;
  top:calc(var(--nav-h) + 28px);
  display:flex; flex-direction:column; gap:22px;
}

.lees-terug {
  display:inline-flex; align-items:center; gap:9px;
  font-size:12px; font-weight:700; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--c-t2);
  transition:color .2s var(--ease);
}
.lees-terug:hover { color:var(--gold); }

.lees-toc-kop {
  font-size:11px; font-weight:800; letter-spacing:2px;
  text-transform:uppercase; color:var(--c-t3);
  padding-bottom:10px; margin-bottom:4px;
  border-bottom:1px solid var(--c-brd);
}
.lees-toc ol { list-style:none; margin:0; padding:0; }
.lees-toc a {
  display:block;
  padding:8px 0 8px 14px;
  border-left:2px solid var(--c-brd);
  font-size:13.5px; line-height:1.45;
  color:var(--c-t2);
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.lees-toc a:hover { color:var(--c-t1); border-color:var(--c-t4); }
.lees-toc a.nu { color:var(--gold); border-color:var(--gold); font-weight:600; }
.lees-toc a.diep { padding-left:26px; font-size:12.5px; }

/* Kaartje met de feiten, in plaats van de losse balk die er stond. */
.lees-feiten {
  border:1px solid var(--c-brd);
  background:var(--c-s2);
  padding:16px 18px;
}
.lees-feit { padding:9px 0; border-bottom:1px solid var(--c-brd); }
.lees-feit:first-child { padding-top:0; }
.lees-feit:last-child { border-bottom:0; padding-bottom:0; }
.lees-feit-lbl {
  display:block; font-size:10px; font-weight:800; letter-spacing:1.6px;
  text-transform:uppercase; color:var(--c-t3); margin-bottom:3px;
}
.lees-feit-val {
  display:block;
  font-family:'Barlow Condensed',sans-serif;
  font-size:19px; font-weight:900; font-style:italic;
  text-transform:uppercase; color:var(--c-t1); line-height:1.05;
}
.lees-feit-merk {
  display:flex; align-items:center; gap:10px;
  font-size:11px; font-weight:700; letter-spacing:1.2px;
  text-transform:uppercase; color:var(--c-t3);
}
.lees-feit-merk img { width:22px; height:auto; flex:none; }

/* ── Middenkolom ── */
.lees-chips { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.lees-chip {
  display:inline-flex; align-items:center;
  padding:6px 13px;
  border:1px solid var(--c-brd2);
  font-size:10px; font-weight:800; letter-spacing:1.6px;
  text-transform:uppercase; color:var(--gold);
}

.lees-titel {
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(34px,4.6vw,58px);
  font-weight:900; font-style:italic; text-transform:uppercase;
  line-height:.97; letter-spacing:-.5px;
  margin-bottom:16px;
}

.lees-meta {
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px;
  padding-bottom:22px; margin-bottom:26px;
  border-bottom:1px solid var(--c-brd);
  font-size:12.5px; color:var(--c-t3);
}
.lees-meta i { color:var(--gold); margin-right:6px; font-size:11px; }

.lees-beeld { margin:0 0 30px; }
.lees-beeld img { width:100%; height:auto; display:block; }

/* De clubs van en naar. Alleen op een transferbericht. */
.lees-clubs {
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  margin:0 0 28px;
  padding:16px 18px;
  border:1px solid var(--c-brd);
  background:var(--c-s2);
}
.lees-club {
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(18px,2vw,24px);
  font-weight:900; font-style:italic; text-transform:uppercase;
  line-height:1;
}
.lees-club-van { color:var(--c-t3); }
.lees-club-naar { color:var(--gold); }
.lees-club-pijl { color:var(--gold); font-size:15px; }

.lees-lead {
  font-size:clamp(16px,1.5vw,19px);
  line-height:1.65; color:var(--c-t1); font-weight:400;
  margin-bottom:30px;
  /* Geen gouden streep ernaast. Groter en lichter zetten doet hetzelfde
     werk zonder dat er een decoratieve balk bij hoeft. */
  padding-bottom:26px;
  border-bottom:1px solid var(--c-brd);
}

.lees-tekst { font-size:15.5px; line-height:1.85; color:var(--c-t2); }
.lees-tekst > *:first-child { margin-top:0; }
.lees-tekst p { margin-bottom:20px; }
.lees-tekst h2 {
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(24px,2.6vw,32px);
  font-weight:900; font-style:italic; text-transform:uppercase;
  color:var(--c-t1); line-height:1.05;
  margin:38px 0 14px; scroll-margin-top:calc(var(--nav-h) + 30px);
}
.lees-tekst h3 {
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(19px,2vw,23px);
  font-weight:900; font-style:italic; text-transform:uppercase;
  color:var(--c-t1); margin:28px 0 10px;
  scroll-margin-top:calc(var(--nav-h) + 30px);
}
.lees-tekst a { color:var(--gold); text-decoration:underline; text-underline-offset:3px; }
.lees-tekst strong { color:var(--c-t1); font-weight:600; }
.lees-tekst img { width:100%; height:auto; margin:26px 0; }
.lees-tekst ul, .lees-tekst ol { margin:0 0 20px 0; padding-left:0; list-style:none; }
.lees-tekst li { position:relative; padding-left:26px; margin-bottom:9px; }
.lees-tekst ul li::before {
  content:'\f00c'; font-family:'Font Awesome 6 Free'; font-weight:900;
  position:absolute; left:0; top:1px; color:var(--gold); font-size:11px;
}
.lees-tekst ol { counter-reset:lnr; }
.lees-tekst ol li { counter-increment:lnr; }
.lees-tekst ol li::before {
  content:counter(lnr); position:absolute; left:0; top:0;
  color:var(--gold); font-weight:800; font-size:13px;
}

.lees-citaat {
  margin:34px 0;
  padding:26px 28px;
  background:var(--c-s2);
  border:1px solid var(--c-brd);
}
.lees-citaat p {
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(20px,2.2vw,26px);
  font-weight:900; font-style:italic;
  line-height:1.18; color:var(--c-t1); margin:0;
}
.lees-citaat cite {
  display:block; margin-top:12px; font-style:normal;
  font-size:11px; font-weight:800; letter-spacing:2px;
  text-transform:uppercase; color:var(--gold);
}

/* ── Rechterkolom ── */
.lees-deel-kop {
  font-size:11px; font-weight:800; letter-spacing:2px;
  text-transform:uppercase; color:var(--c-t3); margin-bottom:12px;
}
.lees-deel-rij { display:flex; gap:8px; flex-wrap:wrap; }
.lees-deel-btn {
  width:40px; height:40px;
  display:grid; place-items:center;
  border:1px solid var(--c-brd);
  color:var(--c-t2); font-size:14px;
  background:none; cursor:pointer;
  transition:border-color .2s var(--ease), color .2s var(--ease);
}
.lees-deel-btn:hover { border-color:var(--gold); color:var(--gold); }

.lees-promo {
  display:block;
  border:1px solid var(--c-brd);
  background:var(--c-s2);
  padding:22px 20px;
  transition:border-color .25s var(--ease);
}
.lees-promo:hover { border-color:var(--c-brd2); }
.lees-promo-t {
  font-family:'Barlow Condensed',sans-serif;
  font-size:23px; font-weight:900; font-style:italic;
  text-transform:uppercase; line-height:1.03; color:var(--c-t1);
  margin-bottom:8px;
}
.lees-promo-s { font-size:13px; line-height:1.6; color:var(--c-t2); margin-bottom:14px; }
.lees-promo-l {
  display:inline-flex; align-items:center; gap:8px;
  font-size:11px; font-weight:800; letter-spacing:1.6px;
  text-transform:uppercase; color:var(--gold);
}

/* ── Smallere schermen ── */
@media (max-width:1200px) {
  .lees { grid-template-columns:220px minmax(0,1fr); }
  .lees-rechts { grid-column:1 / -1; }
  .lees-rechts .lees-kleef {
    position:static; flex-direction:row; flex-wrap:wrap;
    align-items:center; gap:18px;
    padding-top:26px; border-top:1px solid var(--c-brd);
  }
  .lees-promo { flex:1; min-width:280px; }
}
@media (max-width:900px) {
  .lees { grid-template-columns:1fr; }
  /* De inhoudsopgave hoort dan boven de tekst, niet ernaast. */
  .lees-links .lees-kleef { position:static; }
}
@media (max-width:640px) {
  .lees { text-align:center; }
  .lees-chips, .lees-meta, .lees-clubs, .lees-deel-rij { justify-content:center; }
  .lees-lead { padding-left:0; }
  .lees-tekst, .lees-toc, .lees-feiten { text-align:left; }
}

/* Het reset-blok zet img en video op display:block, en dat wint van het
   hidden-attribuut. Zonder deze regel staat een verborgen afbeelding
   gewoon op de pagina. */
[hidden] { display:none !important; }

/* ─────────────────────────────────────────────
   14. BERICHTENOVERZICHT
   ─────────────────────────────────────────────
   Onder de grote kaarten een compacte lijst met alles. Zes berichten
   vullen drie kaarten en dan houdt de pagina op; zo vind je ook wat
   ouder is zonder dat er nep-inhoud bij hoeft. */

.archief { margin-top:clamp(40px,6vw,72px); }
.archief-lijst { border-top:1px solid var(--c-brd); }

.archief-rij {
  display:flex; align-items:center; gap:16px;
  padding:14px 4px;
  border-bottom:1px solid var(--c-brd);
  transition:background .2s var(--ease), padding-left .2s var(--ease);
}
.archief-rij:hover { background:var(--c-s2); padding-left:12px; }

.archief-foto {
  width:64px; height:44px; flex:none;
  object-fit:cover; background:var(--c-s3);
}
.archief-main { flex:1; min-width:0; }
.archief-titel {
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(16px,1.7vw,20px);
  font-weight:900; font-style:italic; text-transform:uppercase;
  line-height:1.08; color:var(--c-t1);
}
.archief-meta {
  margin-top:3px; font-size:11.5px; color:var(--c-t3);
  display:flex; gap:6px; align-items:center; flex-wrap:wrap;
}
.archief-cat { color:var(--gold); font-weight:700; letter-spacing:1px; text-transform:uppercase; }
.archief-pijl { color:var(--c-t3); font-size:12px; flex:none; }
.archief-rij:hover .archief-pijl { color:var(--gold); }

@media (max-width:640px) {
  .archief-rij { padding:12px 0; gap:12px; }
  .archief-rij:hover { padding-left:0; }
  .archief-foto { width:52px; height:40px; }
  .archief-main { text-align:left; }
}

/* Bericht zonder foto: het logo op de achtergrond in plaats van een
   gebroken plaatje. */
.archief-foto-leeg { object-fit:contain; padding:8px; background:var(--c-s3); opacity:.5; }


/* ─────────────────────────────────────────────
   15. NIEUWSKAARTEN OP DE HOMEPAGE
   ───────────────────────────────────────────── */

/* Meer lucht onderaan, de sectie plakte tegen het volgende blok. */
.pg-v2 .news-slider-section {
  padding-bottom:clamp(40px,5vw,64px);
  background:var(--c-s1);
}

/* Kaarten naast elkaar in plaats van over elkaar heen. Overlappen
   maakte van drie berichten één donkere strook. */
.pg-v2 .news-slide {
  margin-right:14px;
  width:min(calc(33.33vw - 10px), 460px);
  clip-path:polygon(4% 0%, 100% 0%, 96% 100%, 0% 100%);
  background:var(--c-s2);
}
.pg-v2 .news-slide:hover { transform:translateY(-6px); }

/* De foto mocht lichter. Op .65 helderheid werd elke foto een grijze
   vlek en zag je niet meer wat erop stond. */
.pg-v2 .news-slide img { filter:brightness(.82); }
.pg-v2 .news-slide:hover img { filter:brightness(.95); }

/* Het verloop deed alsof het een vlak was. Nu is het er echt een. */
.pg-v2 .news-slide-overlay {
  background:linear-gradient(to top,
    rgba(8,8,8,.55) 0%, rgba(8,8,8,.15) 45%, transparent 75%);
}

.pg-v2 .news-slide-body {
  left:0; right:0; bottom:0;
  padding:0;
  background:linear-gradient(to top,
    rgba(13,13,13,.985) 0%, rgba(13,13,13,.96) 62%, rgba(13,13,13,0) 100%);
}

/* Binnenmarge volgt de schuine rand, anders valt tekst er net buiten. */
.pg-v2 .news-slide-body::before {
  content:'';
  display:block;
  height:2px;
  margin:0 8% 16px;
  background:var(--gold);
}
.pg-v2 .news-slide-cat,
.pg-v2 .news-slide-title,
.pg-v2 .news-slide-meta,
.pg-v2 .news-slide-lees { margin-left:8%; margin-right:8%; }

.pg-v2 .news-slide-title {
  display:block;
  margin-bottom:8px;
}

.pg-v2 .news-slide-meta {
  display:block;
  font-size:11.5px; color:var(--c-t3);
  margin-bottom:12px;
}
.pg-v2 .news-slide-meta i { color:var(--gold); margin-right:6px; font-size:10px; }

.pg-v2 .news-slide-lees {
  display:inline-flex; align-items:center; gap:8px;
  padding-bottom:clamp(18px,2.2vw,28px);
  font-size:10px; font-weight:800; letter-spacing:1.8px;
  text-transform:uppercase; color:var(--gold);
}
.pg-v2 .news-slide-lees i { transition:transform .3s var(--ease); }
.pg-v2 .news-slide:hover .news-slide-lees i { transform:translateX(4px); }

/* Op een tablet passen er twee naast elkaar. */
@media (max-width:1000px) {
  .pg-v2 .news-slide { width:min(calc(50vw - 16px), 420px); }
}

/* Op de telefoon één kaart per keer, met een randje van de volgende in
   beeld zodat zichtbaar is dat er meer is. */
@media (max-width:640px) {
  .pg-v2 .news-slider-track { padding:0 16px; scroll-snap-type:x mandatory; }
  .pg-v2 .news-slide {
    width:82vw;
    height:auto;
    aspect-ratio:3/4;
    margin-right:12px;
    scroll-snap-align:center;
    /* Recht op de telefoon. Een schuine rand kost daar breedte die je
       niet hebt en de kaarten staan toch al los van elkaar. */
    clip-path:none;
    border:1px solid var(--c-brd);
  }
  .pg-v2 .news-slide-body::before { margin:0 20px 14px; }
  .pg-v2 .news-slide-cat,
  .pg-v2 .news-slide-title,
  .pg-v2 .news-slide-meta,
  .pg-v2 .news-slide-lees { margin-left:20px; margin-right:20px; }
  .pg-v2 .news-slide-title { font-size:clamp(19px,5.4vw,24px); }

  /* De pijltjes werken niet met de vinger, daar veeg je gewoon. */
  .pg-v2 .news-slider-section .slider-arrows { display:none; }
  .pg-v2 .news-slider-header { justify-content:center; text-align:center; }
}


/* ─────────────────────────────────────────────
   16. NIEUWSCARROUSEL
   ─────────────────────────────────────────────
   Het bericht dat aan de beurt is staat groot en scherp in het midden,
   de buren kleiner en vervaagd. Het verschuiven doet js/nieuws-carrousel.js;
   hier staat alleen hoe het eruitziet.

   De rij scrolt niet meer maar wordt verschoven. Bij scrollen kun je een
   kaart niet groter maken dan zijn vak zonder dat hij wordt afgesneden,
   en juist dat uitsteken maakt duidelijk welke aan de beurt is. */

.pg-v2 .news-slider-track.carrousel {
  position:relative;
  display:block;
  overflow:visible;
  height:clamp(430px,48vw,600px);
  padding:0;
  /* Ruimte opzij zodat de buren niet tegen de schermrand plakken. */
  margin:0 auto clamp(8px,1.5vw,20px);
  max-width:1600px;
}

.pg-v2 .carrousel .news-slide {
  position:absolute;
  top:0;
  left:50%;
  margin:0;
  width:min(38vw, 470px);
  height:100%;
  transform-origin:center center;
  transition:transform .62s cubic-bezier(.4,0,.2,1),
             opacity   .5s  cubic-bezier(.4,0,.2,1),
             filter    .5s  cubic-bezier(.4,0,.2,1);
  will-change:transform, opacity;
}

/* De actieve mag over de buren heen vallen en licht op. */
.pg-v2 .carrousel .news-slide.is-actief {
  box-shadow:0 28px 70px rgba(0,0,0,.72);
}
.pg-v2 .carrousel .news-slide.is-actief img { filter:brightness(.92); }

/* De buren blijven leesbaar als vorm, maar vragen geen aandacht. */
.pg-v2 .carrousel .news-slide:not(.is-actief) img { filter:brightness(.5); }
.pg-v2 .carrousel .news-slide:not(.is-actief) .news-slide-lees { opacity:0; }

/* Hover mag de kaart niet nog eens verplaatsen, dat vecht met de
   berekende stand uit het script. */
.pg-v2 .carrousel .news-slide:hover { transform:inherit; }
.pg-v2 .carrousel .news-slide.is-actief:hover img { filter:brightness(1); }

/* Bolletjes zijn overbodig: je ziet links en rechts al wat er komt. */

@media (max-width:1000px) {
  .pg-v2 .carrousel .news-slide { width:min(52vw, 420px); }
}

@media (max-width:640px) {
  .pg-v2 .news-slider-track.carrousel {
    height:auto;
    aspect-ratio:3/4;
    max-height:76vh;
  }
  .pg-v2 .carrousel .news-slide {
    width:76vw;
    height:100%;
    clip-path:none;
    border:1px solid var(--c-brd);
  }
  /* Op de telefoon zijn de pijltjes weg en veeg je, maar de buren
     mogen wel zichtbaar blijven zodat je weet dat er meer is. */
  .pg-v2 .news-slider-section .slider-arrows { display:none; }
}


/* ─────────────────────────────────────────────
   17. CLUBLOGO'S IN HET NETWERK
   ─────────────────────────────────────────────
   De vakken bevatten nu een echt clublogo met de naam eronder.

   De logo's staan standaard in grijstinten en krijgen kleur zodra je
   erover gaat. Twaalf felgekleurde wapens naast elkaar op een zwarte
   pagina vechten anders met elkaar en met de rest van de site. In
   grijstinten leest het als één rij, en het logo waar je op staat
   springt eruit. */

.pg-v2 .network-item {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:22px 14px 18px;
  min-height:146px;
  text-align:center;
}

.pg-v2 .network-logo {
  width:auto;
  height:62px;
  max-width:92px;
  object-fit:contain;
  /* In kleur, want je moet een clubwapen kunnen herkennen. Een klein
     beetje verzadiging eraf zodat twaalf wapens naast elkaar niet gaan
     schreeuwen op een zwarte pagina. */
  filter:saturate(.88);
  opacity:.94;
  transition:filter .35s var(--ease), opacity .35s var(--ease),
             transform .35s var(--ease);
}

.pg-v2 .network-item:hover .network-logo,
.pg-v2 .network-item:focus-visible .network-logo {
  filter:none;
  opacity:1;
  transform:scale(1.08);
}

.pg-v2 .network-naam {
  font-size:10.5px;
  font-weight:700;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:var(--c-t3);
  line-height:1.3;
  transition:color .3s var(--ease);
}
.pg-v2 .network-item:hover .network-naam { color:var(--c-t1); }

/* In lichte modus zijn de wapens al donker genoeg, dan hoeft het
   ophelderen niet. */
html.light .pg-v2 .network-logo { filter:none; opacity:1; }

@media (max-width:640px) {
  .pg-v2 .network-item { min-height:108px; padding:16px 8px 14px; gap:9px; }
  .pg-v2 .network-logo { height:46px; max-width:66px; }
  .pg-v2 .network-naam { font-size:9.5px; letter-spacing:1px; }
}

/* Clubwapen op de clubpagina. Zonder logo blijft het vak met initialen
   en clubkleur staan, dat verandert niet. */
.club-initials-badge.heeft-logo {
  background:transparent !important;
  box-shadow:none;
  /* De rand hoorde bij het vak met initialen. Om een clubwapen heen
     lijkt het een lijst en dat is niet de bedoeling. */
  border:0;
  border-radius:0;
  width:clamp(88px,11vw,132px);
  height:clamp(88px,11vw,132px);
}
.club-initials-badge.heeft-logo img {
  width:100%; height:100%;
  object-fit:contain;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.6));
}

/* ─────────────────────────────────────────────
   18. HERO OP DE TELEFOON
   ─────────────────────────────────────────────
   De marges in de hero waren clamp-waarden die meeschalen met de
   schermbreedte. Op een telefoon vallen die allemaal terug op hun
   minimum, waardoor embleem, titel, tekst en knoppen tegen elkaar aan
   kwamen te staan. Hier staan ze in vaste pixels. */

@media (max-width:640px) {
  /* Kleiner, zodat "To Your Sports" op één regel past. Op 72px brak hij
     en werd de titel drie regels van samen 184 pixels hoog. */
  .pg-v2 .home-hero .hero-title {
    font-size:clamp(40px,13vw,66px);
    line-height:.92;
    margin-bottom:24px;
  }

  .pg-v2 .home-hero .hero-emblem { margin-bottom:22px; }

  .pg-v2 .home-hero .hero-sub {
    margin-bottom:38px;
    font-size:14px;
    line-height:1.75;
    max-width:34ch;
    margin-left:auto; margin-right:auto;
  }

  /* Acht pixels tussen de kaarten leest als één blok. */
  .pg-v2 .hero-wegwijzer { gap:12px; margin-top:0; }
  .pg-v2 .hw { padding:16px 18px; gap:14px; }
  .pg-v2 .hw-t { font-size:15.5px; }

  /* De scrollhint kwam tegen de laatste kaart aan. */
  .pg-v2 .home-hero .scroll-cue { bottom:22px; }
  .pg-v2 .home-hero .hero-content { padding-bottom:104px; }
}

/* ─────────────────────────────────────────────
   19. HERO LAGER OP DE TELEFOON
   ─────────────────────────────────────────────
   De scroll-hint is weg, dus onderin komt ruimte vrij. Die gaat naar
   boven zodat embleem en titel niet meer tegen de kop aan plakken. */

@media (max-width:640px) {
  .pg-v2 .home-hero .hero-content {
    padding-top:calc(var(--nav-h) + 118px);
    padding-bottom:56px;
  }
  .pg-v2 .home-hero .hero-emblem { margin-bottom:26px; }
}

/* Op een lage telefoon in liggende stand past die extra ruimte niet. */
@media (max-width:640px) and (max-height:700px) {
  .pg-v2 .home-hero .hero-content { padding-top:calc(var(--nav-h) + 48px); }
}

/* ─────────────────────────────────────────────
   20. HEROTITEL: RUIMTE TUSSEN DE LETTERS
   ─────────────────────────────────────────────
   Stond op -3px, waardoor de letters aan elkaar plakten. En omdat de
   titel cursief is helt de laatste letter naar rechts; met een negatieve
   letterafstand viel die net buiten het vlak.

   De marge rechts vangt die uitloop op, ook als het masker van de
   animatie nog dicht staat. */

.pg-v2 .home-hero .hero-title {
  letter-spacing:-1px;
  /* Aan beide kanten evenveel. Alleen rechts zetten schuift de
     gecentreerde tekst zichtbaar naar links. */
  padding-left:.14em;
  padding-right:.14em;
}

@media (max-width:640px) {
  .pg-v2 .home-hero .hero-title {
    letter-spacing:-.2px;
    padding-left:.18em;
    padding-right:.18em;
  }
}

/* Foutmelding onder het contactformulier. Die was er niet, want het
   formulier deed altijd alsof het gelukt was. */
.form-fout {
  margin-top:14px;
  padding:12px 14px;
  border:1px solid rgba(224,85,85,.45);
  background:rgba(224,85,85,.08);
  color:#ff9a9a;
  font-size:13.5px;
  line-height:1.55;
}