/* ============================================================
   SCHETSEN.CSS  –  contentblok "schetsen"
   Gestapelde schetsen in smalle kolommen + één grote staande foto
   ernaast, met een decoratieve pijl onder de laatste kolom.
   Opgebouwd door js/projectinhoud.js (blokTypes.schetsen).
   ============================================================ */

.block-schetsen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  /* kolommen even hoog: het vliegtuigje rechts wordt zo even hoog als de
     gestapelde schetsen (incl. de arrow en de ruimte ertussen) links. */
  align-items: stretch;
}

/* smalle kolom met gestapelde schetsen onder elkaar */
.schetsen-kolom {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* losse schets + de grote staande foto */
.schetsen-item,
.schetsen-groot {
  margin: 0;
  overflow: hidden;
  border-radius: 6px;
  cursor: url('../img/cursor-pointer.svg') 8 3, pointer;
}
/* alle schetsen even hoog: zelfde verhouding in even brede kolommen */
.schetsen-item {
  aspect-ratio: 381 / 157;
}
.schetsen-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

/* het grote vliegtuigje vult de volle kolomhoogte (= de hoogte van de
   schetsen + arrow links). Absolute positionering zorgt dat het de
   rijhoogte niet zelf bepaalt, maar zich eraan aanpast. */
.schetsen-groot {
  position: relative;
  min-height: 100%;
}
.schetsen-groot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}
.schetsen-item:hover img,
.schetsen-item:focus-visible img,
.schetsen-groot:hover img,
.schetsen-groot:focus-visible img {
  transform: scale(1.04);
}
.schetsen-item:focus-visible,
.schetsen-groot:focus-visible {
  outline: 3px solid var(--blauw);
  outline-offset: 2px;
}

/* decoratieve pijl onder de laatste kolom (richting het vliegtuigje) */
/* de arrow even hoog als een schets (zelfde verhouding), beeld gecentreerd */
.schetsen-pijl {
  width: 100%;
  aspect-ratio: 381 / 157;
  object-fit: contain;
  pointer-events: none;
}

/* ------------------------------------------------------------
   RESPONSIEF
   ------------------------------------------------------------ */
@media screen and (max-width: 992px) {
  .block-schetsen { grid-template-columns: 1fr 1fr; align-items: start; }
  /* het grote vliegtuigje onder de twee kolommen, over de volle breedte.
     Op eigen rij is er geen kolom om de hoogte aan te ontlenen, dus laten
     we het beeld weer zijn eigen verhouding aanhouden. */
  .schetsen-groot { grid-column: 1 / -1; position: static; min-height: 0; }
  .schetsen-groot img {
    position: static;
    width: 100%;
    height: auto;
    object-fit: contain;
  }
}

@media screen and (max-width: 600px) {
  .block-schetsen { grid-template-columns: 1fr; gap: 12px; }
  .schetsen-kolom { gap: 12px; }
  .schetsen-groot { grid-column: auto; }
}