/* === Sportformulieren landingspagina ============================
   Palet: blauw (#3d5068) + zacht-blauw (#7a96ad) + warm-beige
   (#c8b99a) uit het bestaande Sportformulieren-logo. Rood
   (#e94560) alleen als accent voor de "Live"-status. Wit als
   achtergrond, lichtgrijs voor kaart-randen. Geen JS, één
   breakpoint op 720px.
   ================================================================ */

* { box-sizing: border-box; }

:root {
  --kleur-tekst: #1a2530;
  --kleur-tekst-zacht: #5d6b7a;
  --kleur-blauw: #3d5068;
  --kleur-blauw-zacht: #7a96ad;
  --kleur-beige: #c8b99a;
  --kleur-rood-accent: #e94560;
  --kleur-bg: #f5f7fa;
  --kleur-kaart: #ffffff;
  --kleur-rand: #dde3ec;
  --schaduw-kaart: 0 2px 12px rgba(61, 80, 104, 0.08);
  --schaduw-kaart-hover: 0 6px 20px rgba(61, 80, 104, 0.16);
  --radius: 10px;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Segoe UI', Roboto, Arial, sans-serif;
  background: var(--kleur-bg);
  color: var(--kleur-tekst);
  line-height: 1.5;
}

/* === Header ===================================================== */
.portaal-header {
  background: var(--kleur-kaart);
  border-bottom: 1px solid var(--kleur-rand);
  padding: 1.5rem 1.5rem 1rem;
}

.logo-wrap {
  max-width: 1100px;
  margin: 0 auto;
}

.logo-wrap img {
  display: block;
  width: 100%;
  max-width: 540px;
  height: auto;
}

/* === Main + hero =============================================== */
.portaal-main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 3rem;
}

.hero {
  text-align: center;
  margin: 0 0 2.5rem;
}

.hero h1 {
  margin: 0 0 0.6rem;
  font-size: 2rem;
  font-weight: 600;
  color: var(--kleur-blauw);
  letter-spacing: -0.5px;
}

.hero .lead {
  margin: 0 auto;
  max-width: 640px;
  font-size: 1.05rem;
  color: var(--kleur-tekst-zacht);
}

/* === Tegels-grid ================================================ */
.tegels {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  max-width: 900px;
  margin: 0 auto;
}

@media (min-width: 720px) {
  .tegels {
    grid-template-columns: 1fr 1fr;
  }
  .hero h1 {
    font-size: 2.4rem;
  }
}

.tegel {
  display: block;
  position: relative;
  padding: 1.5rem 1.5rem 1.75rem;
  background: var(--kleur-kaart);
  border: 1px solid var(--kleur-rand);
  border-radius: var(--radius);
  box-shadow: var(--schaduw-kaart);
  color: var(--kleur-tekst);
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  min-height: 180px;
}

.tegel--live:hover,
.tegel--live:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--schaduw-kaart-hover);
  border-color: var(--kleur-blauw-zacht);
  outline: none;
}

.tegel--live:focus-visible {
  outline: 2px solid var(--kleur-blauw);
  outline-offset: 3px;
}

.tegel--soon {
  background: #fafbfc;
  cursor: default;
  color: var(--kleur-tekst-zacht);
}

.tegel-status {
  display: inline-block;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 0.8rem;
}

.tegel-status--live {
  background: var(--kleur-rood-accent);
  color: white;
}

.tegel-status--soon {
  background: var(--kleur-beige);
  color: #564b35;
}

.tegel-titel {
  margin: 0 0 0.5rem;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--kleur-blauw);
}

.tegel--soon .tegel-titel {
  color: var(--kleur-blauw-zacht);
}

.tegel-uitleg {
  margin: 0 0 1rem;
  font-size: 0.95rem;
  color: var(--kleur-tekst-zacht);
}

.tegel-pijl {
  position: absolute;
  right: 1.5rem;
  bottom: 1.25rem;
  font-size: 1.3rem;
  color: var(--kleur-blauw);
  transition: transform 0.15s ease;
}

.tegel--live:hover .tegel-pijl {
  transform: translateX(4px);
}

.tegel-pijl--soon {
  color: var(--kleur-blauw-zacht);
}

/* === Footer ===================================================== */
.portaal-footer {
  background: var(--kleur-blauw);
  color: rgba(255, 255, 255, 0.85);
  text-align: center;
  padding: 1.25rem 1.5rem;
  font-size: 0.85rem;
}

.portaal-footer p {
  margin: 0;
  max-width: 1100px;
  margin: 0 auto;
}

.portaal-footer strong {
  color: white;
  font-weight: 600;
}

/* === Kleine mobiele aanpassingen ================================ */
@media (max-width: 480px) {
  .portaal-header {
    padding: 1rem 1rem 0.75rem;
  }
  .portaal-main {
    padding: 1.5rem 1rem 2rem;
  }
  .hero h1 {
    font-size: 1.6rem;
  }
  .hero .lead {
    font-size: 0.95rem;
  }
  .tegel {
    padding: 1.25rem 1.25rem 1.5rem;
    min-height: 0;
  }
  .tegel-pijl {
    right: 1.25rem;
    bottom: 1rem;
  }
}