/* /voor-wie/: lijst van creatieve vakken met twee toepassingen per vak. */

.zoekveld { display: flex; flex-direction: column; gap: 18px; max-width: 30em; }
.zoekveld .nummer { color: var(--inkt); }
.zoekveld label { display: block; }
.zoekveld input {
  width: 100%; border: 0; border-bottom: 1px solid var(--inkt); background: transparent; border-radius: 0;
  font: inherit; font-size: clamp(20px, 1.8vw, 26px); letter-spacing: -.01em; padding: 8px 0 10px; color: var(--inkt);
}
.zoekveld input::placeholder { color: #6f6f6f; }
.zoekveld input:focus { outline: none; border-bottom-width: 2px; padding-bottom: 9px; }

/* Kolommen: nummer, vak, toepassing 1, toepassing 2, foto en pijl */
.vak summary, .vak__inhoud {
  display: grid; grid-template-columns: 64px minmax(180px, 22%) 1fr 1fr 176px; column-gap: clamp(16px, 2vw, 32px);
  padding-left: var(--rand); padding-right: var(--rand);
}
.vak { border-bottom: 1px solid var(--lijn); scroll-margin-top: calc(var(--kop-hoogte) + 8px); }
.vak summary { list-style: none; cursor: pointer; align-items: baseline; padding-top: 20px; padding-bottom: 20px; transition: background-color .35s var(--traag); }
.vak summary::-webkit-details-marker { display: none; }
.vak summary:hover { background: var(--wit); }
.vak__naam b { display: block; font-weight: 500; font-size: clamp(19px, 1.5vw, 22px); letter-spacing: -.01em; }
.vak__naam small { display: block; margin-top: 4px; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--grijs); }
.vak__titel { font-size: 15.5px; }
.vak__open { justify-self: end; align-self: center; display: flex; align-items: center; gap: 20px; }
/* Foto van het vak in de dichte rij (Jeroen, 19 okt); verdwijnt als de rij open is, dan staat de grote foto er. */
.vak__duim { width: 120px; aspect-ratio: 3 / 2; object-fit: cover; display: block; background: var(--zwart); transition: opacity .35s var(--traag); }
.vak[open] .vak__duim { opacity: 0; }
.vak__open .pijl { transform: rotate(90deg); transition: transform .35s var(--traag); }
.vak[open] .vak__open .pijl { transform: rotate(-90deg); }
.vak[open] summary { background: var(--wit); }

.vak__inhoud { padding-bottom: 28px; background: var(--wit); row-gap: 22px; }
.vak__inhoud > p { color: #333333; font-size: 15.5px; max-width: 30em; }
.vak__mobieltitel { display: none; }
.probeer {
  grid-column: 3 / 5; background: var(--zwart); color: var(--op-zwart);
  display: grid; grid-template-columns: 1fr auto; gap: 10px 24px; align-items: end;
  padding: 20px 22px;
}
/* Foto bij het vak: rechts, naast de proefvraag (Jeroen, 18 okt). Proefvraag schuift naar links. */
.vak__inhoud:has(.vak__beeld) .probeer { grid-column: 2 / 4; align-self: start; align-content: space-between; min-height: 100%; }
.vak__beeld { grid-column: 4; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.vak__beeld img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: var(--zwart); }
.vak__beeld figcaption { font-family: var(--mono); font-size: 11px; color: var(--grijs); }
.vak__beeld figcaption a { color: inherit; text-underline-offset: 2px; }
.probeer .label { grid-column: 1 / -1; color: #8a8a8a; }
.probeer__vraag { font-family: var(--mono); font-size: 13.5px; line-height: 1.6; max-width: 46em; }
.probeer__knop {
  border: 1px solid var(--op-zwart); background: transparent; color: var(--op-zwart); cursor: pointer;
  font-family: var(--mono); font-size: 12px; padding: 8px 12px; white-space: nowrap;
  transition: background-color .3s, color .3s;
}
.probeer__knop:hover { background: var(--op-zwart); color: var(--zwart); }

.leeg { padding: 40px var(--rand); border-bottom: 1px solid var(--lijn); color: var(--grijs); }
.leeg a { color: var(--inkt); text-underline-offset: 3px; }

.slot {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px clamp(24px, 5vw, 80px); align-items: end;
  padding: clamp(48px, 6vw, 96px) var(--rand);
}
.slot h2 { font-size: clamp(26px, 2.8vw, 42px); line-height: 1.08; max-width: 12em; }
.slot p { color: #333333; max-width: 30em; margin-top: 16px; }
.slot .knop--zwart { margin-top: 0; justify-self: start; align-self: end; }

@media (max-width: 1080px) {
  .vak summary, .vak__inhoud { grid-template-columns: 48px 1fr 1fr auto; }
  .vak__naam { grid-column: 2 / 4; }
  .vak summary .vak__titel:nth-of-type(1) { grid-column: 2; grid-row: 2; margin-top: 10px; }
  .vak summary .vak__titel:nth-of-type(2) { grid-column: 3; grid-row: 2; margin-top: 10px; }
  .vak__open { grid-column: 4; grid-row: 1; }
  .vak__inhoud > span { display: none; }
  .vak__inhoud > p:nth-of-type(1) { grid-column: 2; }
  .vak__inhoud > p:nth-of-type(2) { grid-column: 3; }
  .probeer, .vak__inhoud:has(.vak__beeld) .probeer, .vak__beeld { grid-column: 2 / 4; }
  .vak__beeld img { aspect-ratio: 16 / 9; }
}
@media (max-width: 820px) {
  .vak summary, .vak__inhoud { grid-template-columns: 1fr auto; column-gap: 12px; }
  .vak__open { gap: 12px; }
  .vak__duim { width: 72px; }
  .vak summary .nummer { display: none; }
  .vak__naam { grid-column: 1; grid-row: 1; }
  .vak summary .vak__titel { display: none; }
  .vak__open { grid-column: 2; }
  .vak__inhoud > p:nth-of-type(1), .vak__inhoud > p:nth-of-type(2), .probeer, .vak__inhoud:has(.vak__beeld) .probeer, .vak__beeld { grid-column: 1 / -1; }
  .vak__mobieltitel { display: block !important; font-weight: 500; color: var(--inkt); margin-bottom: 4px; }
  .probeer { grid-template-columns: 1fr; }
  .probeer__knop { justify-self: start; }
  .slot { grid-template-columns: 1fr; align-items: start; }
}

/* Niveau per toepassing: bij welke cursus het hoort (zie niveaus.js). */
.niveau {
  display: inline-block; margin-right: 10px; padding: 2px 6px; border: 1px solid currentColor;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; vertical-align: 2px;
}
.vak__inhoud > p .niveau { display: table; margin-bottom: 8px; color: var(--grijs); }
.vak__inhoud > p .niveau--E { color: var(--inkt); }
.probeer .label .niveau { margin: 0 0 0 10px; color: #8a8a8a; }
.probeer .label .niveau--E { color: var(--op-zwart); }