/* SALTA — gallery. Deliberately not a uniform grid: spans and aspect ratios
   differ, tiles drift at different speeds, and reveals alternate between a
   wipe and a sink so nothing animates identically. */

.gallery { background: var(--white); overflow: clip; }
.gallery__head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: clamp(2rem, 4vw, 3.2rem);
}

.gallery__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gap);
}
.g-tile {
  position: relative;
  translate: 0 var(--drift, 0px);
  will-change: translate;
}
.g-tile .frame { height: 100%; }
.g-tile figcaption {
  position: absolute;
  left: 1rem; bottom: .9rem;
  z-index: 3;
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--white);
  text-shadow: 0 2px 14px rgba(5, 43, 69, .8);
  opacity: 0;
  translate: 0 8px;
  transition: opacity var(--dur) var(--ease-out), translate var(--dur) var(--ease-out);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .g-tile:hover figcaption { opacity: 1; translate: 0 0; }
}

/* spans — the layout is hand-set, not auto-flowed */
.g-tile--a { grid-column: span 7; }
.g-tile--a .frame { aspect-ratio: 16 / 11; }
.g-tile--b { grid-column: span 5; align-self: end; }
.g-tile--b .frame { aspect-ratio: 4 / 5; }
.g-tile--c { grid-column: span 4; }
.g-tile--c .frame { aspect-ratio: 1; }
.g-tile--d { grid-column: span 8; }
.g-tile--d .frame { aspect-ratio: 16 / 9; }
.g-tile--e { grid-column: span 5; align-self: start; }
.g-tile--e .frame { aspect-ratio: 5 / 4; }
.g-tile--f { grid-column: span 7; }
.g-tile--f .frame { aspect-ratio: 16 / 10; }

/* --- horizontal sequence (desktop only) --------------------------------- */
.hgallery { background: var(--white); padding-block: 0; }
.hgallery__scroller { position: relative; height: 300svh; }
.hgallery__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  display: grid;
  /* One column the width of the stage: without it the column is sized by the
     max-content track and the heading centres itself over that instead of
     lining up with the page container. The track then overflows this column
     on purpose and is clipped by the stage. */
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  /* `safe` keeps the first row from being pushed past the top edge (and clipped)
     when a short viewport cannot fit heading + track. */
  align-content: safe center;
  gap: clamp(1rem, 2vh, 2rem);
  overflow: hidden;
}
.hgallery__head {
  width: min(100% - var(--gutter) * 2, var(--maxw));
  margin-inline: auto;
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 1rem;
}
.hgallery__track {
  display: flex;
  gap: var(--gap);
  padding-inline: var(--gutter);
  width: max-content;
  translate: var(--hx, 0px) 0;
  will-change: translate;
}
.hgallery__item {
  flex: none;
  /* The third term keeps the frame short enough that heading + track still fit
     a low window, so the stage never has to overflow in the first place. */
  width: min(62vw, 780px, 85svh);
}
.hgallery__item .frame { aspect-ratio: 3 / 2; }
.hgallery__item figcaption {
  margin-top: .8rem;
  display: flex;
  gap: .7rem;
  align-items: baseline;
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--muted);
}
.hgallery__item .num { color: var(--blue); }

@media (max-width: 1024px) {
  .g-tile--a, .g-tile--d, .g-tile--f { grid-column: span 12; }
  .g-tile--b, .g-tile--c, .g-tile--e { grid-column: span 6; }
  /* the horizontal sequence becomes plain vertical tiles */
  .hgallery__head .label { display: none; }   /* nothing scrolls sideways here */
  .hgallery__scroller { height: auto; }
  .hgallery__stage { position: relative; height: auto; padding-block: var(--sect-y); overflow: visible; }
  .hgallery__track {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: auto;
    translate: 0 0 !important;
    padding-inline: 0;
    width: min(100% - var(--gutter) * 2, var(--maxw));
    margin-inline: auto;
  }
  .hgallery__item { width: auto; }
}
@media (max-width: 620px) {
  .gallery__grid { gap: clamp(.8rem, 3vw, 1.2rem); }
  .g-tile { grid-column: span 12 !important; }
  .g-tile--b .frame, .g-tile--c .frame { aspect-ratio: 4 / 3; }
  .hgallery__track { grid-template-columns: 1fr; }
  .g-tile figcaption { opacity: 1; translate: 0 0; }
}