/**
 * Section: Gallery
 *
 * RE-PORTED IN PHASE 2. Nothing of the starter's stylesheet survives. That one
 * was a customer-photo grid from another project: a 4/3 tile with the caption
 * laid over the bottom of the photograph in a scrim gradient, plus a hover lift
 * on an element that is not a link.
 *
 * This is accreditations.html `.ac-scan-fig` / `.ac-scan`, which the inventory
 * names canonical: a portrait frame with the caption set below it in the
 * display face, and a dashed gold placeholder frame for anything the client has
 * not sent yet. The grid itself is `.grid-3` from components.css, which the
 * mock-up also uses (`class="grid-3 ac-scans"`) and which already steps 3 to 2
 * at 860 and to 1 at 620.
 *
 * `.grid-3` AT EVERY TILE COUNT, including two. The section used to send two
 * tiles into `.grid-2`, which reads as a considered composition and hides a
 * measurement nobody took: at 1440 a `.grid-3` track is 341px and a `.grid-2`
 * track is 524px, so two certificate scans came out 1.54 times the size of the
 * three on the page next door. The mock-up has one tile scale. One and two
 * tiles now fill one and two of three tracks, which is what a single tile
 * always did.
 *
 * NO `.gallery-grid` HOOK. The mock-up's `.ac-scans` carries
 * `margin-top: var(--s-6)` to clear the note above it inside one band; here the
 * grid is either the first thing in its own band, where the band padding does
 * that job, or it follows `.head`, which base.css already ends with
 * `margin-bottom: var(--s-6)`. The same step, from a rule that already exists,
 * so the class was a hook with nothing behind it.
 *
 * ONE TILE RATIO FOR BOTH STATES, and it is a decision rather than an
 * oversight. The entry names two sources, `.ac-scan` for the placeholder and
 * the starter's grid for the filled tiles, and those two disagree: 3/4 against
 * 4/3. A grid that changes shape as each scan arrives is ragged for as long as
 * the client is sending them in, which on this project is the whole of the
 * first year. The canonical page wins, so both states are 3/4, which is also
 * the right shape for the documents this section actually holds.
 *
 * CONTRAST, measured numerically and as composited, on this section's one fixed
 * band, --mist #f7f4ee. The frame's own ground is --gold-tint-10 stripes over
 * that band, which composites to #f1e9da:
 *
 *   --ink       #14231f  caption, on --mist                 14.83:1
 *   --ink       #14231f  caption, worst case on a stripe    13.50:1
 *   --gold-deep #7e622e  the frame's mark, on a stripe       4.74:1
 *   --ink-faint #5f6b66  the hint line, on --mist            5.06:1
 *   --ink-faint #5f6b66  the hint line, worst case on a stripe 4.60:1
 *   --gold      #c99a47  the dashed keyline, on a stripe      2.12:1
 *
 * The hint is normal-size text at --text-xs, so its threshold is 4.5:1 and its
 * worst case clears it. It is the mock-up's own colour (`.ac-scan .hint`).
 *
 * The mark and the keyline are decoration: the badge inside the frame is what
 * announces the gap, in text, and `.ph-badge` pins its own ground and measures
 * 5.17:1 there whatever it is sitting on. So neither is a graphical object
 * required to understand the content and WCAG 1.4.11 does not bind them, and
 * the mark clears 3:1 twice over anyway. The badge is NOT re-coloured from
 * here: a figure measured against a bare token is not a measurement of that
 * component, and this band is a light one, so it takes the badge's base form.
 *
 * Tokens only. No literal colours, no literal font sizes.
 */

/* ---------------------------------------------------------------------------
 * The grid.
 *
 * `.grid-3` and `.grid-2` do the columns and the gap. What they cannot do is
 * this: a `1fr` track is `minmax(auto, 1fr)` and that `auto` floor is the
 * min-content width of the GRID ITEM, so one unbroken string in one caption
 * widens its track and pushes the whole page past the viewport. It has to be
 * fixed on the item, and the text has to be allowed to break, which is why
 * `anywhere` and not `break-word`: only `anywhere` changes the min-content size
 * the track is measured from.
 * ------------------------------------------------------------------------ */
.gallery-tile {
  min-width: 0;
}

.gallery-tile .gallery-caption,
.gallery-tile .gallery-frame {
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------------
 * The filled tile.
 *
 * The single crop. gallery.php asks for a bounding `large` rather than one of
 * the theme's hard-cropped sizes precisely so that this is the only crop the
 * image gets.
 * ------------------------------------------------------------------------ */
.gallery-image {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center;
  border-radius: var(--r-md);
}

/* ---------------------------------------------------------------------------
 * The placeholder frame, for a tile whose image has not arrived. Today that is
 * every tile on the site, so this is the section's normal state and not its
 * error state.
 *
 * The stripe geometry is the mock-up's, and it is pattern geometry rather than
 * a design value: there is no token for the pitch of a hatch, and `.ph-badge`
 * in components.css carries the same construct with the same kind of literal.
 * The colours are both tokens.
 * ------------------------------------------------------------------------ */
.gallery-frame {
  aspect-ratio: 3 / 4;
  border: 1.5px dashed var(--gold);
  border-radius: var(--r-md);
  background: repeating-linear-gradient(45deg, var(--gold-tint-10), var(--gold-tint-10) 9px, transparent 9px, transparent 20px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  padding: var(--s-4);
  text-align: center;
  color: var(--gold-deep);
}

/* Keeps a long caption, which is also the badge's subject, inside the frame
   rather than through its side. Paired with the inherited `anywhere` above. */
.gallery-frame > * {
  max-width: 100%;
}

/* The mark. Sized in em so it tracks the type rather than being pinned to a
   pixel count, which lands it at the mock-up's 34px at the default step. It is
   aria-hidden decoration; the badge beside it carries the meaning. */
.gallery-frame .icon {
  width: 2em;
  height: 2em;
}

/* The hint line under the badge, `.ac-scan .hint` in the mock-up. It says what
   KIND of thing the dashed frame stands in for; the badge above it says which
   one is missing. Not `.hint`: components.css scopes that name to `.field
   .hint` inside a form, and a second owner for one class name is the collision
   this theme keeps paying for. */
.gallery-hint {
  font-size: var(--text-xs);
  color: var(--ink-faint);
}

/* ---------------------------------------------------------------------------
 * The caption, under the frame in both states.
 * ------------------------------------------------------------------------ */
.gallery-caption {
  margin-top: var(--s-2);
  text-align: center;
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--ink);
}

/* ---------------------------------------------------------------------------
 * Breakpoints. Canonical set: 1024 / 860 / 620 / 560.
 *
 * 620 is where components.css takes the grid to a single column. A portrait
 * frame at the full width of the viewport is a very tall thing to scroll past,
 * so the mock-up turns it on its side at exactly that step.
 * ------------------------------------------------------------------------ */
@media (max-width: 620px) {
  .gallery-image,
  .gallery-frame {
    aspect-ratio: 4 / 3;
  }
}