/* ── La galería ────────────────────────────────────────────────────────────
   An accordion of photographs: one panel is open and the rest are held as
   strips. Built to the reference's settings — 460px tall, 10px between, 16px
   corners, the open panel taking 0.52 of the row, and every change on
   power3.out over 0.6s.

   Two of its options are deliberately off, as asked: no grayscale, so the
   collapsed panels keep their colour, and no tilt, so nothing is rotated in
   three dimensions. What is turned up instead is the parallax — the image
   inside each panel drifts as the panel resizes, so a strip is not simply a
   centre crop of the open photograph but a different part of it.

   Every panel is a real <button> carrying aria-pressed, so the gallery works
   from the keyboard and announces which one is open. Hover opens it on a
   pointer; focus and tap open it everywhere else.
   ────────────────────────────────────────────────────────────────────────── */

.gal { background: var(--ground); }

.gal__head {
  max-width: 44rem;
  margin: 0 auto clamp(2.5rem, 5vw, 4rem);
  text-align: center;
}
.gal__title { margin-bottom: clamp(0.85rem, 1.8vw, 1.15rem); }
.gal__lede  { margin-inline: auto; max-width: 40ch; }

/* ── The row ───────────────────────────────────────────────────────────── */

.gal__row {
  display: flex;
  gap: 10px;
  height: clamp(20rem, 46vh, 28.75rem);   /* 460px at the top end */
}

.gal__panel {
  position: relative;
  /* The share of the row each panel holds. js/galeria.js tweens this: the
     open one to 0.52 of the row, the rest sharing what is left. */
  flex: 0.12 1 0%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 16px;
  overflow: hidden;
  background: var(--ground-alt);
  cursor: pointer;
  /* The panels resize; nothing inside them should be re-laid-out for it. */
  contain: paint;
}

.gal__panel:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: -4px;
}

.gal__panel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 32%;
  /* Slack for the drift, so the image can move inside the panel without
     pulling an edge into view. js/galeria.js sets the scale from the
     parallax strength and slides it as the panel opens and shuts. */
  will-change: transform;
}

/* The legibility wash under the caption, and the dimming of a closed panel.
   One element doing both, so there is only ever one thing to fade. */
.gal__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top,
      rgba(20, 18, 14, 0.78) 0%,
      rgba(20, 18, 14, 0.30) 34%,
      rgba(20, 18, 14, 0) 62%),
    rgba(20, 18, 14, var(--dim, 0.34));
  pointer-events: none;
}

/* ── The caption ───────────────────────────────────────────────────────── */

.gal__cap {
  position: absolute;
  /* so the caption can shrink below its content rather than push out */
  min-width: 0;
  z-index: 2;
  left: clamp(1rem, 1.8vw, 1.5rem);
  right: clamp(1rem, 1.8vw, 1.5rem);
  bottom: clamp(1rem, 1.8vw, 1.5rem);
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-align: left;
}

.gal__bar {
  flex: none;
  width: 3px;
  height: 1.25rem;
  border-radius: 2px;
  background: var(--white);
  transform-origin: 50% 100%;
}

.gal__txt {
  font-family: var(--sans);
  font-size: var(--fs-ui);
  font-weight: 500;
  letter-spacing: var(--track-body);
  color: var(--white);
  /* Not nowrap. A caption longer than today's five ran 87px out through the
     side of its own panel; wrapping to two lines is the honest failure mode,
     and the bar beside it stays put because it is a flex sibling. */
  min-width: 0;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Below the row ─────────────────────────────────────────────────────────
   A row of five needs width. On a phone the accordion becomes what it
   actually is underneath — a set of photographs — and is swiped instead.
   ────────────────────────────────────────────────────────────────────────── */

@media (max-width: 47.99rem) {
  .gal__row {
    height: auto;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 0.25rem;
  }
  .gal__row::-webkit-scrollbar { display: none; }

  .gal__panel {
    flex: 0 0 min(72vw, 20rem) !important;
    height: clamp(22rem, 62vh, 30rem);
    scroll-snap-align: center;
  }
  .gal__panel img { transform: none !important; }
  .gal__panel::after { --dim: 0; }
  .gal__cap { opacity: 1 !important; }
  .gal__txt, .gal__bar { opacity: 1 !important; transform: none !important; }
}

/* No script, or less motion: every panel simply shows, captions and all. */
.no-js .gal__panel { flex: 1 1 0%; }
.no-js .gal__panel::after { --dim: 0.1; }

/* The row is brought up by js/galeria.js; with no script it is simply here. */
.no-js .gal__row { opacity: 1; transform: none; }

/* ── Mobile ────────────────────────────────────────────────────────────────
   The accordion is a pointer device — it is already inert below 48rem, where
   it degrades to five photographs in a column that say what the gallery above
   them already said. Hidden here, heading and all.

   The insurers' strip stays: it lives inside this section but it is not the
   gallery, and on a phone it is one of the few places the page answers "will
   you take my policy".
   ────────────────────────────────────────────────────────────────────────── */

@media (max-width: 47.99rem) {
  .gal__head,
  .gal__row { display: none; }

  /* With the gallery gone the strip is the whole section, so it no longer
     needs the space that separated it from the photographs. */
  .marq { margin-top: 0; }
}