/* ==========================================================================
   Praktisch en juridisch (eigendom: bouwer praktische pagina's)
   Gedeeld patroon voor /wedstrijdschemas, /reglementen, /bardienst, /kledij,
   /aangifteformulier-lichamelijke-ongevallen en /privacy-policy.
   Afgeleid uit de componenten van het fundament: witte kaart radius 16 (zoals
   .tekstpagina), rode cirkel met wit icoon (zoals de FAQ-knop), tagline in rood
   (zoals de datum op een nieuwsitem en "Praktisch" in het menu).
   ========================================================================== */

/* ---------- Kop met terugnavigatie ----------
   De teruglink (de link met pijl uit Figma, zoals "Alle nieuws" op een bericht)
   staat boven de titel. De kop schuift op met de hoogte van de link (20) en 24
   ruimte, zodat de titel op 200 blijft, zoals op de andere binnenpagina's.
   Onder 1024 hangt de pil op 16. */
.praktisch-kop { padding-top: 156px; }
.praktisch-terug { margin-bottom: 24px; }
@media (max-width: 1023px) { .praktisch-kop { padding-top: 100px; } }

/* ---------- Kolom en blokken ---------- */
.praktisch { max-width: 835px; margin-inline: auto; display: flex; flex-direction: column; gap: 64px; }
@media (max-width: 767px) { .praktisch { gap: 48px; } }

/* witte kaart, zelfde maat als .tekstpagina */
.praktisch-kaart { background: var(--wit); border-radius: var(--r-kaart); padding: 64px; }
@media (max-width: 1023px) { .praktisch-kaart { padding: 48px; } }
@media (max-width: 767px) { .praktisch-kaart { padding: 24px; } }

/* korte pagina: gecentreerde kaart (bardienst) */
.praktisch-kaart--kort { width: 100%; max-width: 560px; margin-inline: auto; text-align: center; }
.praktisch-kaart__zin { font: 500 24px/1.3 var(--font); color: var(--zwart); }
@media (max-width: 767px) { .praktisch-kaart__zin { font-size: 20px; } }
.praktisch-kaart--kort .praktisch-knoppen { justify-content: center; }

/* blok op de grijze grond: kop + tekst + lijst (reglementen) */
.praktisch-blok { display: flex; flex-direction: column; gap: 16px; }
.praktisch-blok__kop { font: 500 28px/1.2 var(--font); color: var(--zwart); }
.praktisch-blok__kop + * { margin-top: 8px; }
.praktisch-blok > .download-lijst { margin-top: 8px; }
@media (max-width: 767px) {
  .praktisch-blok__kop { font-size: 24px; }
  .praktisch-kaart--kort { padding-block: 40px; }
}

/* knoppenrij onder een tekst */
.praktisch-knoppen { display: flex; flex-wrap: wrap; gap: 12px; }
.lopende-tekst > .praktisch-knoppen, .praktisch-kaart > .praktisch-knoppen { margin-top: 32px; }
.praktisch-knoppen .icoon { width: 16px; height: 16px; }
/* .lopende-tekst kleurt elke link rood: een knop houdt zijn eigen kleuren */
.lopende-tekst a.knop { color: var(--wit); text-decoration: none; }
.lopende-tekst a.knop--secundair { color: var(--rood); }
.lopende-tekst a.knop--secundair:hover { color: var(--wit); }
@media (max-width: 767px) {
  .praktisch-knoppen .knop { min-height: 44px; }   /* tikdoel */
}

/* ---------- Downloadkaart ----------
   Hele rij is de link. Titel, bestandstype en grootte links, rode cirkel met
   pijl rechts. Op de grijze grond wit, in een witte kaart grijs. */
.download-lijst { display: flex; flex-direction: column; gap: 12px; }
.lopende-tekst .download-lijst { padding-left: 0; }
.lopende-tekst .download-lijst li + li { margin-top: 0; }
.download {
  display: flex; align-items: center; gap: 24px;
  min-height: 80px; padding: 16px 20px 16px 28px;
  background: var(--wit); border-radius: var(--r-kaart);
  color: var(--zwart); text-decoration: none;
  transition: background-color var(--duur) var(--ease);
}
.praktisch-kaart .download, .tekstpagina .download { background: var(--grond); }
.lopende-tekst a.download { color: var(--zwart); }
.download__tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.download__titel { font: 600 18px/1.3 var(--font); color: var(--zwart); transition: color var(--duur) var(--ease); }
.download__meta { font: 400 14px/1.5 var(--font); color: var(--tekst-zacht); }
.download__icoon {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 50%; background: var(--rood); color: var(--wit);
  transition: background-color var(--duur) var(--ease);
}
.download__icoon .icoon { width: 20px; height: 20px; transition: transform var(--duur) var(--ease); }
/* zolang het icoon "download" ontbreekt: de pijl naar rechts, naar beneden gedraaid */
.download__icoon .icoon--pijl-rechts { transform: rotate(90deg); }
.download:hover .download__titel { color: var(--rood); }
.download:hover .download__icoon { background: var(--rood-hover); }
.download:hover .download__icoon .icoon--pijl-rechts { transform: rotate(90deg) translateX(2px); }
.download:hover .download__icoon .icoon--download { transform: translateY(2px); }
@media (max-width: 767px) {
  .download { gap: 16px; min-height: 72px; padding: 14px 14px 14px 20px; }
  .download__titel { font-size: 16px; }
}

/* ---------- Genummerde stappen (echte <ol>) ---------- */
.stappen { counter-reset: stap; display: flex; flex-direction: column; gap: 32px; }
.lopende-tekst .stappen { padding-left: 0; }
.lopende-tekst > .stappen { margin-top: 32px; }
.lopende-tekst > .stappen + * { margin-top: 32px; }
.stappen > li { counter-increment: stap; position: relative; padding-left: 56px; }
.lopende-tekst .stappen > li + li { margin-top: 0; }
.stappen > li::before {
  content: counter(stap); position: absolute; left: 0; top: -4px;
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--rood); color: var(--wit); font: 500 16px/1 var(--font);
}
/* dunne lijn van cirkel naar cirkel */
.stappen > li:not(:last-child)::after {
  content: ''; position: absolute; left: 15.5px; top: 36px; bottom: -28px; width: 1px;
  background: var(--lijn-faq);
}
.stappen > li > * + * { margin-top: 12px; }
.stappen ul { padding-left: 20px; }
.stappen ul li + li { margin-top: 6px; }
.stappen .download { margin-top: 12px; }
@media (max-width: 767px) {
  .stappen { gap: 28px; }
  .stappen > li { padding-left: 48px; }
}