/* =================================================================================================
   LFD Gallery — an editorial spread at a fixed portrait geometry

   THE MEASUREMENTS THIS FILE ANSWERS (docs/gallery-geometry.md has the whole table):

     old Gallery page, 1440    list 748px of 1440, card 141.6 x 489.6   ratio 0.29
     Manon portfolio list      card 346.7 x 346.7 inside a 1130 box     ratio 1.00
     approved homepage rail    card 209.6 x 489.6 in a 1088 band        ratio 0.43

   The old page was the homepage rail dropped into a page column: a 141px photograph with a third
   of the screen empty around it. Manon's own default is square, which crops a standing figure.

   SO: aspect-ratio on the frame, not a fixed height, and the full page gutter rather than a
   boxed container. Four 2:3 cards at 1440 measure 310.5 x 465.8 with the 38px gap - 48% wider
   than the approved rail's 209.6 x 489.6 card and 4.9% shorter, with the shape held at every
   width instead of drifting.

   --lfd-gallery-ratio and --lfd-gallery-columns are set inline by the component from the block's
   attributes, so an owner changes the geometry in the editor and not here.
   ================================================================================================= */

.lfd-gallery-grid {
  /*
   * FALLBACKS ONLY. The component sets all five of these inline, from the block's attributes -
   * and it has to, because an inline custom property beats a stylesheet rule in every media
   * query. Stepping --lfd-gallery-columns down in an @media block below would be a rule that
   * never applies; the media queries switch which VARIABLE is read instead.
   */
  --lfd-gallery-ratio: 2 / 3;
  --lfd-gallery-columns: 4;
  --lfd-gallery-columns-md: 3;
  --lfd-gallery-columns-sm: 2;
  --lfd-gallery-columns-xs: 1;
  --lfd-gallery-gap: var(--lfd-space-gap, 1.5rem);

  position: relative;
  isolation: isolate;
  inline-size: 100%;
  max-inline-size: var(--lfd-measure, 97.5rem);
  margin-inline: auto;
  padding-inline: var(--lfd-gutter, 2.625rem);
  padding-block: var(--lfd-space-section, 4.5rem) var(--lfd-space-section-lg, 6rem);
  box-sizing: border-box;
  color: var(--lfd-color-ink, #111);
}

.lfd-gallery-grid * {
  box-sizing: border-box;
}

/*
 * NOT TWICE. `.lfd-section` - the wrapper lfd_blocks_section() puts round every block - already
 * declares `padding-block: var(--lfd-space-section)`, and the component declares it again so it
 * also works standing alone. Nested, that is 84px from the section and 84px from the component,
 * and on the Gallery page it measured as 176px of empty white between the black hero and the
 * first heading.
 *
 * Scoped to this component deliberately. The same doubling exists on `editorial` and `timeline`,
 * which is a real finding - but those are the approved About and Home surfaces, and changing
 * their vertical rhythm is a visual change to an approved design, not a bug fix to slip into a
 * Gallery milestone.
 */
.lfd-section > .lfd-gallery-grid {
  padding-block: 0;
}

/* --- the editorial panel ---------------------------------------------------------------------- */

.lfd-gallery-grid__head {
  max-inline-size: 46rem;
  margin-block-end: var(--lfd-space-xl, 3rem);
}

.lfd-gallery-grid__eyebrow {
  margin: 0 0 var(--lfd-space-sm, 0.75rem);
  font-family: var(--lfd-font-body);
  font-size: var(--lfd-size-label-sm, 0.75rem);
  font-weight: var(--lfd-weight-semibold, 600);
  letter-spacing: var(--lfd-tracking-label-lg, 0.18em);
  line-height: var(--lfd-leading-label, 1.2);
  text-transform: uppercase;
  color: var(--lfd-color-text-muted, rgba(0, 0, 0, 0.55));
}

.lfd-gallery-grid__title {
  margin: 0;
  font-family: var(--lfd-font-editorial);
  font-size: var(--lfd-size-display-lg, clamp(2.75rem, 5vw, 4.5rem));
  font-weight: var(--lfd-weight-regular, 400);
  line-height: var(--lfd-leading-display, 0.95);
  letter-spacing: var(--lfd-tracking-display, -0.01em);
  text-transform: uppercase;
}

.lfd-gallery-grid__intro {
  margin: var(--lfd-space-md, 1.25rem) 0 0;
  max-inline-size: var(--lfd-width-text, 68ch);
  font-family: var(--lfd-font-body);
  font-size: var(--lfd-size-body, 1rem);
  line-height: var(--lfd-leading-body, 1.65);
  color: var(--lfd-color-text-muted, rgba(0, 0, 0, 0.62));
}

/* --- the season navigation -------------------------------------------------------------------- */

.lfd-gallery-grid__nav {
  margin-block-end: var(--lfd-space-lg, 2rem);
  border-block-end: 1px solid var(--lfd-color-line, rgba(0, 0, 0, 0.12));
}

.lfd-gallery-grid__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lfd-space-md, 1.25rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lfd-gallery-grid__tab {
  margin: 0;
}

.lfd-gallery-grid__tab-link {
  display: inline-flex;
  align-items: center;
  /* SC 2.5.8 wants 24px of target. The block padding takes the link to 44px tall, which is the
     comfortable size rather than the minimum one. */
  min-block-size: 2.75rem;
  padding-block: var(--lfd-space-sm, 0.75rem);
  font-family: var(--lfd-font-body);
  font-size: var(--lfd-size-label-md, 0.8125rem);
  font-weight: var(--lfd-weight-semibold, 600);
  letter-spacing: var(--lfd-tracking-label, 0.12em);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--lfd-color-text-muted, rgba(0, 0, 0, 0.55));
  border-block-end: 2px solid transparent;
  transition: color var(--lfd-duration-fast, 0.18s) var(--lfd-ease-standard, ease);
}

.lfd-gallery-grid__tab-link:hover,
.lfd-gallery-grid__tab-link:focus-visible {
  color: var(--lfd-color-ink, #111);
}

.lfd-gallery-grid__tab-link.is-current {
  color: var(--lfd-color-ink, #111);
  border-block-end-color: var(--lfd-color-ink, #111);
}

/* --- the grid ---------------------------------------------------------------------------------- */

.lfd-gallery-grid__list {
  display: grid;
  grid-template-columns: repeat(var(--lfd-gallery-columns), minmax(0, 1fr));
  gap: var(--lfd-gallery-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lfd-gallery-grid__item {
  min-inline-size: 0;
}

.lfd-gallery-grid__figure {
  margin: 0;
}

.lfd-gallery-grid__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* THE GEOMETRY. The frame owns the shape; the image fills it by covering, never by stretching. */
.lfd-gallery-grid__frame {
  position: relative;
  inline-size: 100%;
  aspect-ratio: var(--lfd-gallery-ratio);
  overflow: hidden;
  background: var(--lfd-color-ink-deep, #0e0e0e);
}

.lfd-gallery-grid__frame img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  /*
   * object-fit: cover, never `fill`. A photograph that has been stretched to fit a box is a
   * different photograph, and nobody asked for a different photograph.
   *
   * object-position biases UP, not centre: where a source is taller than the frame, a centred
   * crop takes equal amounts off the top and the bottom, and on a standing figure the top is the
   * head. At 38% the window sits above centre without jamming the subject against the edge. On a
   * 2:3 source in a 2:3 frame - runway photography in the default geometry - there is nothing to
   * crop and this has no effect at all.
   */
  object-fit: cover;
  object-position: center 38%;
  transition: transform var(--lfd-duration-editorial, 0.65s) var(--lfd-ease-out, ease-out);
}

.lfd-gallery-grid__link:hover .lfd-gallery-grid__frame img,
.lfd-gallery-grid__link:focus-visible .lfd-gallery-grid__frame img {
  transform: scale(1.035);
}

/* A hairline inside the frame, the way the approved rail carries one. */
.lfd-gallery-grid__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.lfd-gallery-grid__caption {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-block-start: var(--lfd-space-sm, 0.75rem);
}

.lfd-gallery-grid__meta {
  font-family: var(--lfd-font-body);
  font-size: var(--lfd-size-label-sm, 0.75rem);
  font-weight: var(--lfd-weight-semibold, 600);
  letter-spacing: var(--lfd-tracking-label, 0.12em);
  line-height: var(--lfd-leading-label, 1.2);
  text-transform: uppercase;
  color: var(--lfd-color-text-muted, rgba(0, 0, 0, 0.55));
}

.lfd-gallery-grid__name {
  font-family: var(--lfd-font-editorial);
  font-size: var(--lfd-size-body-lg, 1.125rem);
  line-height: var(--lfd-leading-snug, 1.25);
  color: var(--lfd-color-ink, #111);
}

/* --- the count and the pages -------------------------------------------------------------------- */

.lfd-gallery-grid__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--lfd-space-md, 1.25rem);
  margin-block-start: var(--lfd-space-xl, 3rem);
  padding-block-start: var(--lfd-space-md, 1.25rem);
  border-block-start: 1px solid var(--lfd-color-line, rgba(0, 0, 0, 0.12));
}

.lfd-gallery-grid__count {
  margin: 0;
  font-family: var(--lfd-font-body);
  font-size: var(--lfd-size-label-sm, 0.75rem);
  font-weight: var(--lfd-weight-semibold, 600);
  letter-spacing: var(--lfd-tracking-label, 0.12em);
  text-transform: uppercase;
  color: var(--lfd-color-text-muted, rgba(0, 0, 0, 0.55));
}

.lfd-gallery-grid__pagination ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lfd-gallery-grid__pagination a,
.lfd-gallery-grid__pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 2.75rem;
  min-block-size: 2.75rem;
  padding-inline: 0.75rem;
  font-family: var(--lfd-font-body);
  font-size: var(--lfd-size-label-md, 0.8125rem);
  font-weight: var(--lfd-weight-semibold, 600);
  letter-spacing: var(--lfd-tracking-label, 0.12em);
  text-decoration: none;
  color: var(--lfd-color-ink, #111);
  border: 1px solid var(--lfd-color-line, rgba(0, 0, 0, 0.14));
}

.lfd-gallery-grid__pagination .current {
  color: var(--lfd-color-paper, #fff);
  background: var(--lfd-color-ink, #111);
  border-color: var(--lfd-color-ink, #111);
}

/* =================================================================================================
   Responsive: the canonical 1440 / 1180 / 834 / 390 / 320

   The column COUNT steps down; the aspect ratio does not. That is the whole point - the card is
   the same shape on a phone as on a desktop, and only its size changes.
   ================================================================================================= */

@media (max-width: 1180px) {
  /* Four 2:3 cards in the 1124px of content at 1180 would be 252.5px wide with the 38px gap.
     Three, measured at 349.3 x 524.0, read as a spread; four read as a contact sheet. A gallery
     already set to two or three stays where it is - the variable is min(chosen, 3), computed in
     PHP. */
  .lfd-gallery-grid__list {
    grid-template-columns: repeat(var(--lfd-gallery-columns-md), minmax(0, 1fr));
  }
}

@media (max-width: 834px) {

  .lfd-gallery-grid {
    --lfd-gallery-gap: var(--lfd-space-sm, 0.75rem);
  }

  .lfd-gallery-grid__list {
    grid-template-columns: repeat(var(--lfd-gallery-columns-sm), minmax(0, 1fr));
  }

  .lfd-gallery-grid__head {
    margin-block-end: var(--lfd-space-lg, 2rem);
  }
}

@media (max-width: 520px) {

  .lfd-gallery-grid {
    --lfd-gallery-gap: var(--lfd-space-md, 1.25rem);
  }

  /*
   * ONE COLUMN, NOT TWO. At 390 a two-column 2:3 card would be 167 x 250.5 - 358px of content
   * less this 24px gap, halved - against the 293.5px-wide card the approved rail shows on the
   * same phone. One column measures 358 x 537. A gallery whose photographs shrink as the screen
   * does is the defect this milestone is fixing, not a responsive step.
   */
  .lfd-gallery-grid__list {
    grid-template-columns: repeat(var(--lfd-gallery-columns-xs), minmax(0, 1fr));
  }

  .lfd-gallery-grid__foot {
    justify-content: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {

  .lfd-gallery-grid__frame img {
    transition: none;
  }

  .lfd-gallery-grid__link:hover .lfd-gallery-grid__frame img,
  .lfd-gallery-grid__link:focus-visible .lfd-gallery-grid__frame img {
    transform: none;
  }
}