/* =========================================================
   Galerij — het portfolio

   Metselwerk via CSS-kolommen. Elke foto houdt zijn eigen
   verhouding: bij detailing is de uitsnede het werk, en een
   raster dat alles naar 4:5 dwingt snijdt precies de spiegeling
   of de motorruimte eraf waar de foto om gemaakt is.

   Kolommen betekent wel: de leesvolgorde loopt per kolom naar
   beneden, niet per rij. Voor een galerij is dat geen bezwaar —
   er zit geen volgorde in — maar zet er dus nooit iets in waar
   de volgorde wél toe doet.
========================================================= */

.ls-galerij__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-2xl);
  flex-wrap: wrap;
  margin-bottom: clamp(36px, 4.5vw, 56px);
}

.ls-galerij__head .kicker {
  margin-bottom: var(--space-lg);
}

.ls-galerij__title {
  font-size: var(--fs-h2);
  max-width: 16ch;
  margin: 0;
}

.ls-galerij__title em {
  font-style: normal;
  color: var(--color-accent);
}

.ls-galerij__lead {
  max-width: 44ch;
  margin: 0;
  color: var(--color-muted);
}


/* =========================================================
   Het metselwerk
========================================================= */

.ls-galerij__grid {
  column-gap: var(--space-gap);
}

.ls-galerij__grid--2 { columns: 2; }
.ls-galerij__grid--3 { columns: 3; }
.ls-galerij__grid--4 { columns: 4; }

/* De kolomovergangen staan vast: welke foto's bij elkaar in een kolom
   horen is in PHP uitgerekend op de echte beeldverhoudingen (zie
   ag_galerij_verdeel). Laat je het aan de browser, dan hangt er één
   kolom honderden pixels onder de rest. */
.ls-galerij__item--breek {
  break-after: column;
  -webkit-column-break-after: always;
}

@media (max-width: 900px) {
  .ls-galerij__grid--3,
  .ls-galerij__grid--4 { columns: 2; }

  /* Twee kolommen: de grens ligt ergens anders in dezelfde rij. PHP
     rekent die apart uit en markeert hem met --breek-2. De overgangen
     van de bredere weergave moeten dan wél los, anders krijg je er
     drie of vier in een blok van twee. */
  .ls-galerij__grid--3 .ls-galerij__item--breek,
  .ls-galerij__grid--4 .ls-galerij__item--breek {
    break-after: auto;
    -webkit-column-break-after: auto;
  }

  .ls-galerij__item--breek-2 {
    break-after: column;
    -webkit-column-break-after: always;
  }
}

@media (max-width: 600px) {
  .ls-galerij__grid--2,
  .ls-galerij__grid--3,
  .ls-galerij__grid--4 { columns: 1; }

  /* Eén kolom: een harde kolomovergang zou hier een tweede kolom
     afdwingen en de hele stapel naast zichzelf zetten. */
  .ls-galerij__item--breek,
  .ls-galerij__item--breek-2 {
    break-after: auto;
    -webkit-column-break-after: auto;
  }
}


/* =========================================================
   Eén foto
========================================================= */

.ls-galerij__item {
  position: relative;
  display: block;
  margin: 0 0 var(--space-gap);

  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--color-surface-alt);

  /* Zonder dit knipt de browser een figuur doormidden over twee
     kolommen. Beide regels: de -webkit-variant is wat Safari leest. */
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}

.ls-galerij__item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform var(--dur-slow) var(--ease-out);
}

@media (hover: hover) {
  .ls-galerij__item:hover img {
    transform: scale(1.04);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ls-galerij__item img {
    transition: none;
  }

  .ls-galerij__item:hover img {
    transform: none;
  }
}


/* =========================================================
   Klikbare foto — opent de Instagram-post

   Altijd zichtbaar: een Instagram-knopje rechtsboven, zodat je vóór
   het hoveren al ziet dat de foto klikbaar is (op touch bestaat geen
   hover). Met muis klapt het knopje uit tot "Bekijk op Instagram ↗"
   en veegt er een glanslicht over de lak — het vak van Autogloss.
========================================================= */

.ls-galerij__link {
  display: block;
  color: inherit;
}

.ls-galerij__link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
  border-radius: var(--radius-card);
}

/* Glanslicht: een schuine lichtband die bij hover over de foto veegt. */
.ls-galerij__link::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 35%,
    rgba(255, 255, 255, .22) 48%,
    rgba(255, 255, 255, .06) 55%,
    transparent 65%
  );
  transform: translateX(-110%);
}

.ls-galerij__insta {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  z-index: 1;

  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-2xs);
  border-radius: var(--radius-full);

  background: rgba(22, 20, 15, .7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  line-height: 1;
  white-space: nowrap;
  color: var(--color-text);

  transition: background var(--dur-base) var(--ease-out),
              color      var(--dur-base) var(--ease-out),
              padding    var(--dur-base) var(--ease-out);
}

.ls-galerij__insta svg {
  width: 18px;
  height: 18px;
  flex: none;
}

.ls-galerij__insta .ls-galerij__insta-pijl {
  width: 14px;
  height: 14px;
}

/* Op touch alleen icoon + pijl; de tekst doet dan niet mee (ook niet
   in de gap). Met muis klapt hij uit, zie hieronder. */
.ls-galerij__insta-tekst {
  display: none;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-width var(--dur-base) var(--ease-out),
              opacity   var(--dur-base) var(--ease-out);
}

@media (hover: hover) {
  .ls-galerij__insta-pijl {
    display: none;
  }

  .ls-galerij__insta {
    gap: 0;
  }

  .ls-galerij__insta-tekst {
    display: inline-block;
  }

  .ls-galerij__item--link:hover .ls-galerij__insta,
  .ls-galerij__link:focus-visible .ls-galerij__insta {
    gap: var(--space-2xs);
    padding-inline: var(--space-sm) var(--space-md);
    background: var(--color-accent);
    color: var(--color-inverted);
  }

  .ls-galerij__item--link:hover .ls-galerij__insta-tekst,
  .ls-galerij__link:focus-visible .ls-galerij__insta-tekst {
    max-width: 12em;
    opacity: 1;
  }

  .ls-galerij__item--link:hover .ls-galerij__insta-pijl,
  .ls-galerij__link:focus-visible .ls-galerij__insta-pijl {
    display: block;
    animation: ls-galerij-pijl .5s var(--ease-out);
  }

  .ls-galerij__item--link:hover .ls-galerij__link::after {
    transform: translateX(110%);
    transition: transform .9s var(--ease-out);
  }
}

@keyframes ls-galerij-pijl {
  from { transform: translate(-4px, 4px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .ls-galerij__link::after {
    display: none;
  }

  .ls-galerij__insta-pijl {
    animation: none !important;
  }
}


/* =========================================================
   Bijschrift — pil linksonder

   Zelfde vorm als in de fotorij bij voor-en-na, zodat een foto
   met een bijschrift er overal op de site hetzelfde uitziet.
========================================================= */

.ls-galerij__caption {
  position: absolute;
  left: var(--space-md);
  bottom: var(--space-md);
  max-width: calc(100% - var(--space-md) * 2);

  padding: var(--space-2xs) var(--space-md);
  border-radius: var(--radius-full);

  background: rgba(22, 20, 15, .7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  line-height: 1.3;
  color: var(--color-text);
}


/* =========================================================
   Aansluitend op het blok erboven

   Staat de galerij direct onder de paginakop, dan hoort die
   ruimte bij de kop. Twee keer sectie-padding maakt er een gat
   van dat de twee blokken uit elkaar trekt.
========================================================= */

.ls-galerij--strak {
  padding-top: 0;
}


/* =========================================================
   Filmtegel — een film tussen de foto's

   Staand 9:16, zoals de films voor Instagram gemaakt zijn. De
   tegel toont alleen de poster met een filmlabel; er speelt niets
   vanzelf af. Klik = de hele film met geluid in de speler.
========================================================= */

.ls-galerij__film {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.ls-galerij__film:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
  border-radius: var(--radius-card);
}

/* Donker verloop bovenin, zodat het label op elk beeld
   leesbaar blijven — ook op een witte Mercedes onder de lampen. */
.ls-galerij__film::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 28%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(rgba(10, 10, 10, .55), transparent);
}

/* Glanslicht, als bij de foto's. */
.ls-galerij__film::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 35%,
    rgba(255, 255, 255, .22) 48%,
    rgba(255, 255, 255, .06) 55%,
    transparent 65%
  );
  transform: translateX(-110%);
}

.ls-galerij__play {
  position: absolute;
  top: var(--space-md);
  left: var(--space-md);
  z-index: 2;

  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-2xs) var(--space-md) var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-full);

  background: rgba(22, 20, 15, .7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  line-height: 1;
  white-space: nowrap;
  color: var(--color-text);

  transition: background var(--dur-base) var(--ease-out),
              color      var(--dur-base) var(--ease-out);
}

.ls-galerij__play svg {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--color-accent);
  transition: color var(--dur-base) var(--ease-out);
}

@media (hover: hover) {
  .ls-galerij__film:hover img {
    transform: scale(1.04);
  }

  .ls-galerij__film:hover .ls-galerij__play,
  .ls-galerij__film:focus-visible .ls-galerij__play {
    background: var(--color-accent);
    color: var(--color-inverted);
  }

  .ls-galerij__film:hover .ls-galerij__play svg,
  .ls-galerij__film:focus-visible .ls-galerij__play svg {
    color: currentColor;
  }

  .ls-galerij__film:hover::after {
    transform: translateX(110%);
    transition: transform .9s var(--ease-out);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ls-galerij__film::after {
    display: none;
  }

  .ls-galerij__film:hover img {
    transform: none;
  }
}