/* ============================================================
   HOOFDPAGINA — docs/ontwerp-hoofdpagina.md §2 en het canvas (Overzicht).
   Kleuren alleen via de variabelen in huisstijl.css.
   ============================================================ */

.hoofdpagina {
  gap: 3rem;
}

/* ---------- Opening ---------- */
.opening {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: stretch;
}

.opening__tekst {
  flex: 999 1 30rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.125rem;
}

.opening__tekst .knop .icoon {
  width: 1.125rem;
  height: 1.125rem;
}

.opening__kaart {
  flex: 1 1 18rem;
  gap: 1rem;
}

.kaartkop {
  font-family: var(--letter-tekst);
  font-size: 1rem;
  font-weight: 600;
}

.opening__lijst {
  margin: 0;
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  font-size: 0.9375rem;
}

.opening__module {
  font-size: 0.9375rem;
  font-weight: 600;
}

.opening__gegevens {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.375rem 1rem;
  font-size: 0.9375rem;
}

.opening__gegevens dt {
  color: var(--kleur-inkt-zacht);
}

.opening__gegevens dd {
  margin: 0;
  font-weight: 600;
}

.opening__grieks {
  padding-top: 1rem;
  border-top: 1px solid var(--kleur-lijn);
  color: var(--kleur-nacht);
}

.opening__grieks a {
  color: inherit;
}

/* ---------- Herhaling staat klaar ---------- */
.herhaalband {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding: 1.25rem 1.5rem;
  border-radius: var(--ronding-kaart);
  background: var(--kleur-bezig-vlak);
  color: var(--kleur-bezig-tekst);
}

.herhaalband__tekst {
  flex: 1 1 22rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.herhaalband__kop {
  font-family: var(--letter-tekst);
  font-size: 1.0625rem;
  color: var(--kleur-nacht);
}

/* ---------- Zo werkt elke module ---------- */
.zowerkt {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
}

/* Een gewone summary (list-item), zodat het driehoekje van de browser zichtbaar blijft: dat
   zegt dat je hier kunt openklappen. */
.zowerkt__kop {
  cursor: pointer;
  min-height: var(--doel-minimaal);
  padding: 0.25rem 0;
}

.zowerkt__kop::marker {
  color: var(--kleur-leiblauw);
  font-size: 1.5rem;
}

.zowerkt__kop h2 {
  display: inline;
}

.zowerkt__lijst {
  list-style: none;
  margin: 1.125rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr));
  gap: 0.75rem;
}

.zowerkt__stap {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem;
  background: var(--kleur-vlak);
  border: 1px solid var(--kleur-lijn);
  border-radius: 0.75rem;
}

.zowerkt__nr {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--kleur-oker-tekst);
}

.zowerkt__tekst {
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--kleur-inkt-zacht);
}

.zowerkt__noot {
  margin-top: 1rem;
  max-width: var(--breedte-lezen);
}

/* ---------- Modules ---------- */
.deel {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.deel__kop {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
}

.deel__nr {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kleur-oker-tekst);
}

.modulekaarten,
.spelkaarten {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr));
  gap: 0.875rem;
}

/* De hele kaart is klikbaar, maar alleen de titel is een link (§8): de link spant met ::after
   over de kaart. Een schermlezer hoort zo alleen de titel als linktekst. */
.modulekaart {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 9.5rem;
  padding: 1.125rem;
  background: var(--kleur-vlak);
  border: 1px solid var(--kleur-lijn);
  border-radius: 0.875rem;
}

.modulekaart:has(.modulekaart__link:hover) {
  border-color: var(--kleur-leiblauw);
}

.modulekaart--hier {
  border: 2px solid var(--kleur-leiblauw);
  padding: calc(1.125rem - 1px);
}

.modulekaart__nr {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--kleur-inkt-zacht);
}

.modulekaart__titel {
  font-size: 1.0625rem;
  line-height: 1.3;
}

.modulekaart__link {
  color: var(--kleur-nacht);
  text-decoration: none;
}

.modulekaart__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.modulekaart__link:focus-visible {
  outline: none;
}

.modulekaart:has(.modulekaart__link:focus-visible) {
  outline: 3px solid var(--kleur-focus);
  outline-offset: 2px;
}

.modulekaart__kern,
.modulekaart__leeslab {
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--kleur-inkt-zacht);
}

.modulekaart__voet {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.modulekaart__hier {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--kleur-leiblauw);
}

/* ---------- Spellen ---------- */
.spelkaart {
  gap: 0.5rem;
}

.spelkaart__titel {
  font-size: 1.1875rem;
}

.spelkaart__beste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
  font-size: 0.9375rem;
}

.spelkaart__tip {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--kleur-oker-tekst);
}

.spelkaart__tip .icoon {
  color: var(--kleur-oker);
}

.spelkaart__knop {
  align-self: flex-start;
  margin-top: auto;
}

/* Sterren: het beeld is aria-hidden; de tekst staat er altijd bij. */
.sterren {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.sterren__beeld {
  display: inline-flex;
  gap: 0.0625rem;
  font-size: 1.125rem;
  line-height: 1;
}

.ster {
  color: var(--kleur-rand-veld);
}

.ster--vol {
  color: var(--kleur-oker);
}

.sterren__tekst {
  font-size: 0.875rem;
  font-weight: 600;
}

.deel__stand {
  margin-top: -0.5rem;
}