/* REDZ: clubbrede contactpagina (/contact). Niet ontworpen; afgeleid uit het contactblok
   van de sportpagina (3.12) en de witte kaarten (radius 16) van het ontwerp. */

/* contactgegevens en formulier */
/* label boven een adres: zelfde stijl als de labels op /hockey (de datum van een nieuwsitem) */
.contact-label { margin-bottom: 4px; font: 500 12px/1.5 var(--font); text-transform: uppercase; letter-spacing: 0.05em; color: var(--rood); }
.contact__regel div > p + p { margin-top: 0; }
.contact__regel div > .contact-label + p { margin-top: 0; }
.contact-formulier__titel { font: 600 20px/1.2 var(--font); color: var(--zwart); margin-bottom: 32px; }

/* raster met kaarten: bestuur (10) en ploegen (12), zonder halve rijen */
.contact-raster { display: grid; gap: 24px; }
.contact-raster--bestuur { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.contact-raster--ploegen { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--goot); }
/* zelfde kaart als de teammanagers op /ploegen: padding 32, kop met rode lijn eronder, rode links zonder streep */
.contact-kaart { background: var(--wit); border-radius: var(--r-kaart); padding: 32px; min-width: 0; overflow-wrap: anywhere; }
.contact-kaart__ploeg { padding-bottom: 16px; border-bottom: 1px solid var(--lijn-faq); }
.contact-raster--bestuur .contact-kaart { padding-inline: 28px; }   /* vijf naast elkaar: "Bestuursmedewerker" past op een regel */
.contact-kaart__functie { font: 600 18px/1.25 var(--font); color: var(--zwart); overflow-wrap: normal; }
.contact-kaart__naam { margin-top: 12px; }
.contact-kaart__link { margin-top: 4px; font-size: 14px; }
.contact-kaart a, .contact-persoon a { color: var(--rood); text-decoration: none; font-variant-numeric: tabular-nums; }
.contact-kaart a:hover, .contact-persoon a:hover { color: var(--rood-hover); text-decoration: underline; text-underline-offset: 2px; }
.contact-kaart__ploeg { font: 600 24px/1.2 var(--font); color: var(--zwart); }
.contact-kaart__sub { font-size: 14px; color: var(--tekst-zacht); }
.contact-kaart__ploeg + .contact-kaart__sub { margin-top: 12px; }
.contact-kaart__personen { margin-top: 16px; display: flex; flex-direction: column; gap: 16px; }
.contact-persoon__naam { color: var(--zwart); font-weight: 500; }
.contact-persoon__rol { font-size: 14px; color: var(--tekst-zacht); }
.contact-persoon__tel { margin-top: 2px; }

@media (max-width: 1279px) {
  .contact-raster--bestuur { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  .contact-raster--ploegen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .contact-formulier__titel { margin-bottom: 24px; }
}
@media (max-width: 767px) {
  .contact-raster--bestuur, .contact-raster--ploegen { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .contact-kaart, .contact-raster--bestuur .contact-kaart { padding: 24px; }
  /* tikdoelen van 44 px op een telefoon */
  .contact-kaart__link a, .contact-persoon__tel a, .contact__regel a { display: inline-flex; align-items: center; min-height: 44px; }
  .contact-kaart__link, .contact-persoon__tel { margin-top: 0; }
}