/* Homepage: hero, tegelrij, eerstvolgende workshop, zwart interessevak. */

/* ---------- Hero ---------- */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 39fr) minmax(0, 61fr);
  min-height: min(calc(100svh - var(--kop-hoogte) - 210px), 760px);
  min-height: clamp(560px, calc(100svh - var(--kop-hoogte) - 210px), 760px);
}
.hero__tekst {
  display: flex; flex-direction: column; justify-content: center;
  padding: 64px clamp(24px, 4.2vw, 64px) 56px;
}
.hero__tekst { position: relative; z-index: 2; }
/* Kop loopt over de foto heen: elke regel op een eigen papieren strook. */
.hero h1 {
  --kop-schaal: 1;
  font-size: calc(clamp(57px, 6.9vw, 112px) * var(--kop-schaal));
  line-height: .9;
  margin: 26px 0 0;
}
/* Kop loopt over de foto: elke regel op een eigen papieren strook die meegroeit met de tekst. */
.hero h1 span {
  position: relative; display: block; width: max-content; min-width: .3em; height: 1.08em;
  background: var(--papier);
  padding: .02em .18em .16em 0;
  white-space: nowrap;
}
/* De tweede strook ligt over de eerste: zo knipt de eerste de bovenkant van de letters op regel 2 niet af. */
.hero h1 span:first-child { z-index: 1; margin-bottom: -.12em; }
.hero h1 span:nth-child(2) { z-index: 2; }
.hero__toepassing {
  margin: 18px 0 34px; max-width: 30em; min-height: 3em;
  font-family: var(--kop); font-weight: 200; font-size: 14px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--grijs); line-height: 1.5;
  transition: opacity .35s var(--traag);
}
.hero__toepassing.weg { opacity: 0; }
.hero__intro {
  max-width: 30em;
  color: #2a2a2a;
  font-size: 17px;
  margin-bottom: 34px;
}
.hero__beeld { position: relative; overflow: hidden; background: #e6e6e3; margin: 0; }
.hero__beeld img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 30%;
}
.hero__beeld figcaption {
  position: absolute; left: 0; bottom: 0;
  background: var(--papier);
  padding: 8px 14px 7px;
}

/* ---------- Tegelrij: drie blokken van 2:1, links tekst, rechts een vierkant beeld ---------- */
.tegels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--lijn);
}
.blok { display: grid; grid-template-columns: 1fr 1fr; aspect-ratio: 2 / 1; border-right: 1px solid var(--lijn); min-width: 0; }
.blok--vol { grid-template-columns: 1fr; }
.tegels > .blok:last-child { border-right: 0; }
.blok > * { min-width: 0; min-height: 0; }
.tegel {
  display: flex; flex-direction: column;
  padding: 26px clamp(18px, 2vw, 30px) 24px;
  border-right: 1px solid var(--lijn);
  text-decoration: none; color: inherit;
  transition: background-color .4s var(--traag);
}
.blok--vol .tegel { border-right: 0; }
.tegel a { color: inherit; text-decoration: none; }
.tegel:hover { background: var(--wit); }
.tegel h2 { font-size: clamp(20px, 1.6vw, 26px); line-height: 1.15;
  margin: 22px 0 8px;
}
.tegel p { font-family: var(--mono); font-size: 12px; color: var(--grijs); line-height: 1.5; }
.tegel .pijl { margin-top: auto; }
.tegels .kunst { position: relative; border-right: 0; }
/* Journal: nieuwste stuk onder de kop, foto vierkant ernaast. */
.tegel__nieuw { margin-top: auto; display: grid; gap: 4px; }
.tegel__titel { font-size: 15px; line-height: 1.2; }
.tegel__nieuw:hover .tegel__titel { text-decoration: underline; text-underline-offset: 3px; }
.tegel__intro { font-family: var(--mono); font-size: 11px; line-height: 1.45; color: #8a8a8a; }
.tegelbeeld { position: relative; display: block; overflow: hidden; background: var(--zwart); }
.tegelbeeld img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--traag); }
.tegelbeeld:hover img { transform: scale(1.04); }


/* ---------- Eerstvolgende workshop ---------- */
.sectie { border-bottom: 1px solid var(--lijn); }
.sectie__kop {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 22px var(--rand);
  border-bottom: 1px solid var(--lijn);
}
.workshoprij {
  display: grid;
  /* Metakolom minstens zo breed als de langste regel (Baggerbeest, Amsterdam), zodat niets over de lijn loopt. */
  grid-template-columns: minmax(220px, 26%) 1fr minmax(max-content, 20%) 88px;
  text-decoration: none;
  transition: background-color .4s var(--traag);
}
.workshoprij:hover { background: var(--wit); }
/* Homepage: de rij is een div met één link die de hele rij beslaat, behalve het generatieve vak.
   Zo krijgt dat vak zijn bediening (− + en pauze), die niet in een link mag staan. */
div.workshoprij { position: relative; }
.workshoprij__link { color: inherit; text-decoration: none; }
.workshoprij__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
div.workshoprij .kunst { z-index: 2; }
/* Geen lichte lijn tussen deze rij en het zwarte vak eronder (het generatieve vak is nooit zwart, zie data-vlak). */
.sectie--naar-donker { border-bottom: 0; }
.workshoprij > * { border-right: 1px solid var(--lijn); }
.workshoprij > :last-child { border-right: 0; }
.workshoprij .kunst { min-height: 230px; }
.workshoprij__tekst { padding: 28px clamp(20px, 2.4vw, 36px); }
.workshoprij h2 { font-family: var(--mono); font-weight: 200; text-transform: none; letter-spacing: -.02em; }
.workshoprij h3, .workshoprij h2 { font-size: clamp(22px, 2vw, 32px); line-height: 1.12;
  margin: 18px 0 12px;
}
.workshoprij__tekst p { color: #333333; max-width: 34em; font-size: 16px; }
.meta {
  margin: 0; padding: 28px 24px;
  display: grid; grid-template-columns: auto 1fr; gap: 9px 18px;
  align-content: start;
}
.meta dt { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--grijs); padding-top: 2px; }
.meta dd { margin: 0; font-size: 14px; white-space: nowrap; }
.workshoprij__pijl { display: grid; place-items: center; }

/* ---------- Zwart interessevak ---------- */
.donker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--zwart);
  color: var(--wit);
  min-height: 460px;
}
.donker__tekst {
  padding: clamp(40px, 5vw, 80px) var(--rand);
  display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
  border-right: 1px solid #3a3a3a;
}
.donker .label { color: #8a8a8a; }
.donker h2 { font-size: clamp(28px, 3vw, 46px);
  line-height: 1.08;
  margin: 22px 0 22px; max-width: 12em;
}
.donker p { color: #bdbdbd; max-width: 30em; }
.donker .kunst { border: 0; }
.donker__foto { margin: 0; position: relative; overflow: hidden; min-height: 280px; }
.donker__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Tablet en mobiel ---------- */
@media (max-width: 1080px) {
  .tegels { grid-template-columns: 1fr; }
  .blok { aspect-ratio: auto; min-height: 260px; border-right: 0; border-bottom: 1px solid var(--lijn); }
  .tegels > .blok:last-child { border-bottom: 0; }
  .blok--vol { min-height: 0; }
  .blok--vol .tegel { min-height: 180px; }
  .workshoprij { grid-template-columns: 1fr 1fr; }
  .workshoprij .kunst { grid-column: 1 / -1; border-right: 0; border-bottom: 1px solid var(--lijn); }
  .workshoprij__pijl { display: none; }
  .meta { border-right: 0; }
}
@media (max-width: 820px) {
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero__beeld { aspect-ratio: 4 / 3.4; order: -1; }
  .hero__tekst { padding: 36px var(--rand) 40px; }
  .hero h1 { font-size: calc(clamp(36px, 10vw, 54px) * var(--kop-schaal)); margin: 18px 0 0; }
  .blok { grid-template-columns: 1fr; min-height: 0; border-bottom: 0; }
  .tegels > .blok:last-child .tegel { border-bottom: 0; }
  .tegels .kunst, .tegelbeeld { display: none; }
  .tegel__nieuw { display: none; }
  .tegel__kop { display: contents; }
  .tegel { min-height: 0; border-right: 0; border-bottom: 1px solid var(--lijn); display: grid; grid-template-columns: 28px 1fr auto; align-items: baseline; gap: 4px 0; padding: 20px var(--rand); }
  .tegel h2 { margin: 0; font-size: 22px; }
  .tegel p { grid-column: 2 / -1; }
  .tegel .pijl { margin: 0; grid-column: 3; grid-row: 1; align-self: center; }
  .blok--vol .tegel { min-height: 0; }
  .workshoprij { grid-template-columns: 1fr; }
  .workshoprij > * { border-right: 0; }
  .workshoprij .kunst { min-height: 200px; }
  .workshoprij__tekst { padding: 24px var(--rand); border-bottom: 1px solid var(--lijn); }
  .meta { padding: 22px var(--rand) 28px; }
  .donker { grid-template-columns: 1fr; }
  .donker .kunst, .donker__foto { min-height: 280px; order: -1; }
  .donker__tekst { border-right: 0; }
}

/* Typcursor in de hero */
.typcursor {
  display: inline-block; width: .06em; height: .9em; margin-left: .04em;
  background: currentColor; vertical-align: -.08em;
  animation: typknipper 1s steps(1) infinite;
}
@keyframes typknipper { 50% { opacity: 0; } }

/* Eerstvolgende workshop op zwart */
.sectie--donker { background: var(--zwart); color: var(--op-zwart); border-bottom-color: #3a3a3a; }
.sectie--donker .sectie__kop, .sectie--donker .workshoprij > * { border-color: #3a3a3a; }
.sectie--donker .label, .sectie--donker .nummer, .sectie--donker .meta dt { color: #8a8a8a; }
.sectie--donker .workshoprij__tekst p { color: #cfcfcf; }
.sectie--donker .workshoprij:hover { background: #303030; }
.sectie--donker .plekken i { border-color: var(--op-zwart); }
.sectie--donker .plekken i.bezet { background: var(--op-zwart); }
.sectie--donker .kunst--zwart { border-right-color: #3a3a3a; }

/* Tegelrij op zwart */
.tegels--donker { background: var(--zwart); color: var(--op-zwart); border-bottom-color: #3a3a3a; }
.tegels--donker .tegel, .tegels--donker .blok { border-right-color: #3a3a3a; border-bottom-color: #3a3a3a; }
.tegels--donker .tegel:hover { background: #303030; }
.tegels--donker .tegel p, .tegels--donker .nummer { color: #8a8a8a; }
@media (max-width: 820px) { .tegels--donker .tegel { border-bottom-color: #3a3a3a; } }
/* Smalle desktop: de Journal-tegel krijgt de ondertitel niet meer kwijt naast het nieuwste stuk. */
@media (min-width: 1081px) and (max-width: 1440px) {
  .tegel h2 { margin-top: 16px; }
  .tegel__kop p { display: none; }
  .tegel__intro { display: none; }
}

/* Workshops: één blok in één kleur. Links de achtergrond van het beeld, tekst in de inktkleur; geen scheidslijn. */
.blok--kunst { background: var(--kunst-achter, var(--zwart)); }
.blok--kunst .tegel, .tegels--donker .blok--kunst .tegel { border-right: 0; color: var(--kunst-inkt, var(--op-zwart)); }
.blok--kunst .tegel h2, .blok--kunst .tegel .pijl, .blok--kunst .tegel p, .tegels--donker .blok--kunst .nummer { color: var(--kunst-inkt, var(--op-zwart)); }
.blok--kunst .tegel:hover, .tegels--donker .blok--kunst .tegel:hover { background: transparent; }
.blok--kunst .tegel:hover h2 { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
/* Over: licht vlak met donkere tekst. */
.blok--licht, .tegels--donker .blok--licht .tegel { background: var(--papier); color: var(--zwart); }
.tegels--donker .blok--licht .tegel h2, .tegels--donker .blok--licht .tegel .pijl { color: var(--zwart); }
.tegels--donker .blok--licht .tegel p, .tegels--donker .blok--licht .nummer { color: var(--grijs); }
.tegels--donker .blok--licht .tegel:hover { background: var(--wit); }

/* Binnenkomst vanuit de scan (/?van=scan). De scan eindigt met deze hero en toont de tegels al, dus die staan er meteen.
   Daarna komt de rest binnen. Alleen CSS: werkt ook als een script faalt. */
@view-transition { navigation: auto; }
@keyframes binnen { from { opacity: 0; transform: translateY(24px); } }
.van-scan main > section:not(.hero):not(.tegels), .van-scan .voet { animation: binnen .9s var(--traag) .4s both; }
@media (prefers-reduced-motion: reduce) { .van-scan main > section, .van-scan .voet { animation: none; } }