/* Hallmark · shape: Contact sheet · genre: editorial · theme: custom (design.md) · job: browse · idea: "AWF's own photographs from its championships: every gallery a contact sheet that opens full screen." · vibe: "arena-dark, poster-loud, scoreboard-exact"
 * paper: oklch(98.5% 0.004 91.4) · accent: oklch(43.3% 0.178 29.2) · display: Barlow Condensed 800 · body: Inter · hero: poster, the newest gallery's cover across the container with its head set low on it; a gallery opens on its head and the sheet · nav: slab, a red bar on a yellow rule · footer: mast, the logo large over the offices · imagery: photographs, AWF's own · signature: the contact sheet, photos in justified rows at their own proportions that open into a full-screen viewer
 * axes: warm-paper/condensed-caps/red-yellow · posture: full palette · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: P, a photo index risks being a wall of thumbnails; the newest gallery leads as a poster, every photo keeps its own proportions, counts are set as scoreboard numerals and the viewer only ever moves up */

/* ---------- Page: the arena, where photographs read best ---------- */
.mg-page { padding-bottom: var(--section-gap-s); }

/* ---------- Index: /media/ ---------- */
.mg-wall { padding-top: var(--space-3xl); }
.mg-wall__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-md) var(--space-2xl); margin-bottom: var(--space-2xl); }
.mg-wall__title { font-size: var(--text-display); max-width: 12ch; }
.mg-wall__count { color: var(--color-on-arena-2); font-size: var(--text-lead); }
.mg-wall__empty { font-size: var(--text-lead); color: var(--color-on-arena-2); }

.mg-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2xl) var(--gap-columns); margin: 0; padding: 0; list-style: none; }
.mg-card { display: grid; gap: var(--space-xs); align-content: start; min-width: 0; }
.mg-card__link { display: grid; gap: var(--space-md); color: inherit; text-decoration: none; transition: opacity var(--dur-micro) var(--ease-out); }
.mg-card__link:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }
.mg-card__link:active { opacity: 0.8; }
.mg-card__photo { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--color-arena-2); color: var(--color-on-arena); }
.mg-card__photo img { width: 100%; height: 100%; object-fit: cover; }
/* Hover: a yellow frame comes up inside the photo while the photo leans in (site.css, Photographs). */
.mg-card__photo::after { content: ""; position: absolute; inset: 0; z-index: 2; border: 3px solid var(--color-yellow); opacity: 0; transition: opacity var(--dur-short) var(--ease-out); pointer-events: none; }
.mg-card__link:hover .mg-card__photo::after { opacity: 1; }
.mg-card__title { margin: 0; overflow-wrap: break-word; min-width: 0; }
.mg-card__link:hover .mg-card__title { text-decoration: underline; text-decoration-color: var(--color-yellow); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.mg-card__event { font-weight: 600; }
.mg-card__facts { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-md); color: var(--color-on-arena-2); font-size: var(--text-sm); }

/* The newest gallery leads as a poster: its cover across the container, the head set low on it. */
.mg-card--lead { grid-column: 1 / -1; margin-bottom: var(--space-xl); }
.mg-card--lead .mg-card__link { grid-template-areas: "lead"; gap: 0; }
.mg-card--lead .mg-card__photo, .mg-card--lead .mg-card__title { grid-area: lead; }
.mg-card--lead .mg-card__photo { aspect-ratio: 21 / 9; }
.mg-card--lead .mg-card__photo::before { content: ""; position: absolute; inset: 0; z-index: 1; color: var(--color-on-arena); background: linear-gradient(to top, color-mix(in oklab, var(--color-arena) 90%, transparent) 0%, color-mix(in oklab, var(--color-arena) 0%, transparent) 60%); }
.mg-card--lead .mg-card__title { position: relative; z-index: 3; align-self: end; max-width: 18ch; padding: var(--space-xl); color: var(--color-on-arena); font: 800 var(--text-section)/1.02 var(--font-display); text-transform: uppercase; letter-spacing: var(--tracking-display); }
.mg-card--lead .mg-card__event { margin-top: var(--space-sm); font-size: var(--text-lead); }

/* ---------- Gallery: head ---------- */
.mg-head { padding-block: var(--space-xl) var(--space-2xl); }
.mg-head__inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-xl) var(--gap-columns); align-items: end; }
.mg-head__back { grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; min-height: 44px; color: var(--color-on-arena-2); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; transition: opacity var(--dur-micro) var(--ease-out); }
.mg-head__back:hover { color: var(--color-on-arena); text-decoration-color: var(--color-yellow); text-decoration-thickness: 2px; }
.mg-head__back:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.mg-head__back:active { opacity: 0.8; }
.mg-head__title { font-size: var(--text-display); max-width: 16ch; }
.mg-head__event { margin-top: var(--space-md); font-size: var(--text-lead); font-weight: 600; }
.mg-head__hub { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; transition: opacity var(--dur-micro) var(--ease-out); }
.mg-head__hub:hover { text-decoration-color: var(--color-yellow); text-decoration-thickness: 2px; }
.mg-head__hub:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.mg-head__hub:active { opacity: 0.8; }
.mg-head__text > .mg-head__body { margin-top: var(--space-md); max-width: var(--measure); color: var(--color-on-arena-2); }

/* Facts as scoreboard cells: the label small, the value in the display face. */
.mg-facts { display: flex; flex-wrap: wrap; gap: var(--space-lg) var(--space-xl); margin: 0; }
.mg-facts__cell { display: grid; gap: var(--space-2xs); align-content: start; min-width: 0; padding-top: var(--space-sm); border-top: 1px solid var(--color-arena-3); }
.mg-facts dt { color: var(--color-on-arena-2); font-size: var(--text-sm); }
.mg-facts dd { margin: 0; font: 800 var(--text-xl)/1.05 var(--font-display); text-transform: uppercase; }
.mg-facts .mg-facts__num { font-size: var(--text-3xl); line-height: 1; font-variant-numeric: tabular-nums; color: var(--color-yellow); }

/* ---------- Gallery: the contact sheet, justified rows at each photo's own proportions ---------- */
.mg-sheet { padding-bottom: var(--space-2xl); }
.mg-grid { --row: 15rem; display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
/* The last row keeps its natural size instead of stretching across. */
.mg-grid::after { content: ""; flex-grow: 1000000; }
.mg-photo { flex-grow: calc(var(--ratio, 1.5) * 100); flex-basis: calc(var(--ratio, 1.5) * var(--row)); min-width: 0; background: var(--color-arena-2); color: var(--color-on-arena); }
.mg-photo__link { position: relative; display: block; overflow: clip; color: inherit; transition: opacity var(--dur-micro) var(--ease-out); }
.js .mg-photo__link { cursor: zoom-in; }
.mg-photo__img { width: 100%; height: auto; aspect-ratio: var(--ratio, 1.5); object-fit: cover; }
.mg-photo__link::after { content: ""; position: absolute; inset: 0; border: 3px solid var(--color-yellow); opacity: 0; transition: opacity var(--dur-short) var(--ease-out); pointer-events: none; }
.mg-photo__link:hover::after { opacity: 1; }
.mg-photo__link:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.mg-photo__link:active { opacity: 0.8; }

/* ---------- Gallery kept elsewhere: one folder per nation ---------- */
.mg-nations { padding-bottom: var(--space-2xl); }
.mg-nations__cover { position: relative; margin: 0 0 var(--space-2xl); aspect-ratio: 21 / 9; overflow: hidden; background: var(--color-arena-2); color: var(--color-on-arena); }
.mg-nations__cover img { width: 100%; height: 100%; object-fit: cover; }
.mg-nations__line { max-width: 52ch; margin-bottom: var(--space-xl); font-size: var(--text-lead); line-height: 1.5; }
.mg-folders { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); column-gap: var(--gap-columns); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--color-arena-3); }
.mg-folder { min-width: 0; border-bottom: 1px solid var(--color-arena-3); }
.mg-folder__link { display: flex; align-items: center; gap: var(--space-md); min-height: 72px; padding-block: var(--space-sm); color: inherit; text-decoration: none; transition: opacity var(--dur-micro) var(--ease-out); }
.mg-folder__link .flag { width: 48px; height: 48px; outline-color: color-mix(in oklab, var(--color-on-arena) 40%, transparent); }
.mg-folder__text { display: grid; gap: var(--space-3xs); min-width: 0; }
.mg-folder__noc { font: 800 var(--text-2xl)/1 var(--font-display); }
.mg-folder__name { font-size: var(--text-sm); color: var(--color-on-arena-2); }
.mg-folder__link:hover .mg-folder__noc { color: var(--color-yellow); }
.mg-folder__link:hover .mg-folder__name { color: var(--color-on-arena); text-decoration: underline; text-underline-offset: 0.2em; }
.mg-folder__link:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.mg-folder__link:active { opacity: 0.8; }

/* ---------- Gallery: the way back and the neighbouring galleries ---------- */
.mg-more { padding-block: var(--space-xl) 0; }
.mg-more__inner { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg) var(--gap-columns); align-items: start; padding-top: var(--space-lg); border-top: 1px solid var(--color-arena-3); }
.mg-more__link, .mg-more__back { display: grid; gap: var(--space-2xs); align-content: start; min-height: 44px; color: inherit; text-decoration: none; transition: opacity var(--dur-micro) var(--ease-out); }
.mg-more__back { align-content: center; font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.25em; }
.mg-more__label { color: var(--color-on-arena-2); font-size: var(--text-sm); }
.mg-more__title { font-weight: 600; }
.mg-more__link--newer { grid-column: 2; }
.mg-more__link--older { grid-column: 3; text-align: right; }
.mg-more__back:hover { text-decoration-color: var(--color-yellow); }
.mg-more__link:hover .mg-more__title { text-decoration: underline; text-decoration-color: var(--color-yellow); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.mg-more__link:focus-visible, .mg-more__back:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.mg-more__link:active, .mg-more__back:active { opacity: 0.8; }

/* ---------- Photo viewer (media.js): a full-screen dialog on the arena ---------- */
html.mg-dialog-open { overflow: clip; }
.mg-dialog { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: var(--color-arena); color: var(--color-on-arena); --color-focus: var(--color-yellow); overflow: hidden; overscroll-behavior: contain; }
.mg-dialog::backdrop { background: var(--color-arena); color: var(--color-on-arena); }
.mg-dialog__frame { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; }
.mg-dialog__bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-lg); padding: var(--space-sm) var(--gutter); }
/* The counter is a label ("Photo 3 of 15"), set like the event hub viewer's: Inter 600, tabular figures. */
.mg-dialog__count { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mg-dialog__title { overflow: hidden; color: var(--color-on-arena-2); font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
/* The stage keeps a strip under the photo for the loading bar. */
.mg-dialog__stage { display: grid; place-items: center; min-height: 0; padding: 0 calc(var(--gutter) + var(--space-3xl)) var(--space-lg); touch-action: pan-y pinch-zoom; user-select: none; }
/* The photo's box is sized by media.js from the photo's own proportions before any file is in, so the sheet's
   copy shown at once and the larger file that replaces it fill the same box: nothing moves. */
.mg-dialog__photo { position: relative; max-width: 100%; max-height: 100%; }
.mg-dialog__img { display: block; width: 100%; height: 100%; object-fit: contain; background: var(--color-arena-2); color: var(--color-on-arena); }
/* While the larger file takes long: the loader's slim bar under the photo (4px, round ends, on a faint track),
   creeping as the page-change bar does and never claiming to be done until the file is in. */
.mg-dialog__load { position: absolute; top: calc(100% + var(--space-xs)); right: 0; left: 0; width: min(28vmin, 150px); height: 4px; margin-inline: auto; border-radius: 2px; overflow: hidden; background: color-mix(in oklab, var(--color-on-arena) 16%, transparent); opacity: 0; pointer-events: none; }
.mg-dialog__load-bar { position: absolute; inset: 0; border-radius: inherit; background: var(--color-on-arena); transform: translateX(-100%); }
.mg-dialog__foot { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-md); padding: var(--space-sm) var(--gutter) var(--space-md); }
.mg-dialog__caption { max-width: var(--measure); margin-inline: auto; color: var(--color-on-arena-2); text-align: center; }
.mg-dialog__btn { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: 1px solid currentColor; border-radius: 0; background: transparent; color: var(--color-on-arena); cursor: pointer; transition: transform var(--dur-micro) var(--ease-out); }
.mg-dialog__btn:hover { color: var(--color-yellow); }
.mg-dialog__btn:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.mg-dialog__btn:active { transform: translateY(1px); }
.mg-dialog__btn:disabled { border-style: dashed; color: var(--color-on-arena-2); cursor: not-allowed; }
/* On wide screens previous and next stand beside the photo, halfway down. */
@media (min-width: 60rem) {
  .mg-dialog__prev, .mg-dialog__next { position: absolute; top: 50%; margin-top: calc(var(--space-lg) * -1); }
  .mg-dialog__prev { left: var(--gutter); }
  .mg-dialog__next { right: var(--gutter); }
  .mg-dialog__foot { grid-template-columns: minmax(0, 1fr); min-height: var(--space-2xl); }
}

/* Motion: the viewer and each photo rise into place; nothing moves under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .mg-dialog { opacity: 0; transition: opacity var(--dur-short) var(--ease-out); }
  .mg-dialog.is-open { opacity: 1; }
  .mg-dialog::backdrop { opacity: 0; transition: opacity var(--dur-short) var(--ease-out); }
  .mg-dialog.is-open::backdrop { opacity: 1; }
  .mg-dialog .mg-dialog__stage { transform: translateY(24px); transition: transform var(--dur-long) var(--ease-out); }
  .mg-dialog.is-open .mg-dialog__stage { transform: none; }
  .mg-dialog__img { transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
  .mg-dialog__img.is-changing { opacity: 0; transform: translateY(12px); }
  /* The bar fades in, creeps to 90% over 3.2s, fast at first (the page-change bar's own pace), then completes
     and fades out once the file is in. */
  .mg-dialog__load { transition: opacity var(--dur-short) var(--ease-out); }
  .mg-dialog__load.is-on { opacity: 1; }
  .mg-dialog__load.is-on .mg-dialog__load-bar { transform: translateX(-10%); transition: transform 3.2s cubic-bezier(0.215, 0.61, 0.355, 1); }
  .mg-dialog__load.is-done { opacity: 0; transition: opacity var(--dur-short) var(--ease-out) var(--dur-short); }
  .mg-dialog__load.is-done .mg-dialog__load-bar { transform: none; transition: transform var(--dur-short) var(--ease-out); }
}
@media (prefers-reduced-motion: reduce) {
  .mg-dialog, .mg-dialog__stage, .mg-dialog__img, .mg-dialog__btn, .mg-card__link, .mg-card__photo::after, .mg-photo__link, .mg-photo__link::after, .mg-folder__link, .mg-head__back, .mg-head__hub, .mg-more__link, .mg-more__back { transition: none; }
  /* Still: the next photo simply replaces the last one when it can show; there is no loading bar. */
  .mg-dialog__img.is-changing { opacity: 0; }
}

/* ---------- Responsive ---------- */
@media (max-width: 60rem) {
  .mg-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mg-card--lead .mg-card__photo { aspect-ratio: 16 / 9; }
  .mg-head__inner { grid-template-columns: minmax(0, 1fr); }
  .mg-grid { --row: 11rem; }
  .mg-dialog__stage { padding-inline: var(--gutter); }
}
@media (max-width: 40rem) {
  .mg-wall { padding-top: var(--space-2xl); }
  .mg-cards { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .mg-card--lead { margin-bottom: 0; }
  .mg-card--lead .mg-card__link { grid-template-areas: none; gap: var(--space-md); }
  .mg-card--lead .mg-card__photo, .mg-card--lead .mg-card__title { grid-area: auto; }
  .mg-card--lead .mg-card__photo { aspect-ratio: 3 / 2; }
  .mg-card--lead .mg-card__photo::before { content: none; }
  .mg-card--lead .mg-card__title { padding: 0; font-size: var(--text-section); }
  .mg-grid { --row: 7rem; gap: var(--space-2xs); }
  .mg-facts { gap: var(--space-md) var(--space-lg); }
  .mg-more__inner { grid-template-columns: minmax(0, 1fr); }
  .mg-more__link--newer, .mg-more__link--older { grid-column: auto; text-align: left; }
  .mg-nations__cover { aspect-ratio: 3 / 2; }
}