/* THE PHOTOS DOOR (/photos/, 2026-08-11).
   Loaded only by /photos/, so every rule in here is free to be about one
   screen.

   WHY THE PAGE EXISTS. Until today the two collections were a segmented
   .archive-switch inside the head band of each shelf: you could only discover
   the church archive by already being on the youth shelf, and the control
   read as a filter over one wall rather than as two different places. The owner's
   ruling (2026-08-10): two clearly separate doors. So the shelves keep their
   own pages untouched and this page stands in front of them.

   THE ONE BOLD THING is these two panels: full-bleed photographs, the newest
   cover from each collection, under the brand navy with a brass hairline
   round them. Everything else on the page — eyebrow, heading, lede — is the
   quiet chrome every other page wears. Nothing else here gets to shout.

   THE PHOTOGRAPH IS AN ENHANCEMENT, NEVER THE CARD. The panel is complete
   with no image at all: navy ground, brass edge, the collection's name and a
   line saying what is behind it. photos.js fills the picture and the album
   count in afterwards, and its geometry is reserved here — a door that grew
   when its cover landed would be the CLS this site spent 2026-08-11 removing
   from the walls themselves. */

.photo-doors {
  display: grid;
  gap: 16px;
  margin: 0;
}
@media (min-width: 760px) {
  .photo-doors { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}

.photo-door {
  /* Adapt LOCALLY: a long collection name makes this card ask its own width
     for a smaller display size rather than shrinking the whole site's type. */
  container-type: inline-size;
  position: relative;
  display: block;
  overflow: hidden;
  /* svh, not vh: on iOS the dynamic toolbar makes vh the TALLEST the viewport
     ever gets, so a 52vh panel is taller than the screen it is on while the
     bar is showing. Two doors have to fit on a phone together. */
  min-height: clamp(280px, 46svh, 420px);
  border-radius: var(--radius-slab);
  background: var(--ink);
  color: #fff;
  text-decoration: none;
  isolation: isolate;
  /* the single brass hairline — drawn as an inset ring so it rides the radius
     exactly and never fights the overflow clip on the photograph */
  box-shadow: inset 0 0 0 1px rgba(201, 154, 46, 0.38), var(--shadow-slab);
  transition:
    box-shadow var(--t-med) var(--ease),
    transform var(--t-fast) var(--ease);
}

/* the ground and the picture */
.photo-door-shot {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  /* the navy the panel reads as before any photograph arrives, and the colour
     a cover that never loads leaves behind */
  background:
    radial-gradient(120% 90% at 50% 0%, var(--ink-2) 0%, var(--ink) 62%);
}
.photo-door-shot img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  /* Held back so the type on top of it is type, not texture. The scrim below
     does the contrast work; this does the mood. */
  opacity: 0.62;
  /* was 600ms — over the 220ms purposeful-motion ceiling, and it read as the
     panel lagging the cursor rather than easing (2026-08-13) */
  transition: transform var(--t-overlay) var(--ease-glide), opacity var(--t-med) var(--ease);
}
/* The scrim. Measured, not eyeballed: at the panel's foot the composite over
   any photograph is at least as dark as rgba(13,21,38,.93) over mid-grey,
   which puts white body copy past 12:1 and the brass count line past 4.5:1. */
.photo-door-shot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(13, 21, 38, 0.20) 0%,
    rgba(13, 21, 38, 0.62) 46%,
    rgba(13, 21, 38, 0.93) 100%
  );
}

.photo-door-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  /* the panel is a flex column so the copy sits on the floor of it whatever
     the picture is doing */
  min-height: inherit;
  padding: clamp(18px, 4vw, 26px);
  padding-block-start: clamp(64px, 18svh, 150px);
}

.photo-door-kicker {
  margin: 0;
  color: var(--accent-glow);
  font: 700 11px/1 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.photo-door-name {
  margin: 0;
  /* fluid, with a rem in the preferred term so text-size zoom still moves it
     (WCAG F94) — the same form the rest of the sheet uses */
  font: 800 clamp(28px, 1.75rem - 28px + 8.2vi, 44px)/1.04 var(--font-display);
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: #fff;
}
@container (max-width: 20rem) {
  .photo-door-name { font-size: clamp(25px, 8vw, 32px); }
}

.photo-door-line {
  margin: 4px 0 0;
  max-width: 34ch;
  color: rgba(255, 255, 255, 0.86);
  /* body copy floor, 16px (was 14.5px) */
  font-size: 16px;
  line-height: 1.5;
  text-wrap: pretty;
}

/* The album count, written by photos.js and absent until it is known. It is
   the one number on this page and it has to be the collection's real one —
   /api/youth/albums and /api/youth/church-albums answer about two disjoint
   sets (the church list already has every youth album subtracted server-side),
   so the two figures never double-count a single album. */
.photo-door-n {
  margin: 0;
  color: var(--accent-glow);
  font: 700 11.5px/1 var(--font-mono);
  letter-spacing: 0.08em;
}
.photo-door-n:empty { display: none; }

/* NO BUTTON ON A PHOTOGRAPH (the owner's standing rule; corrected here 2026-08-23).
   This was an outlined, filled pill with a 44px floor sitting on top of the
   collection's cover photograph. It was never a button — it is a <span> inside
   the <a> that IS the whole panel — but at 390 it read as one, which raises
   the question the panel exists to avoid: do I tap the picture or the button?
   A pill on a photograph also has to carry its own contrast, which is why it
   was wearing a white fill over the scrim in the first place.
   What it needs to do is name the destination, so it is now the go LINE the
   rest of the site uses: hairline above it, mono, the accent arrow nudging.
   The tap target is unchanged, because it was always the panel. */
.photo-door-go {
  margin-top: 16px;
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  font: 700 12.5px/1 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.photo-door-go .arr {
  color: var(--accent-glow);
  transition: transform var(--t-fast) var(--ease);
}

/* Hover is a capability, not an assumption: on a phone these rules would
   stick after the tap and leave a permanently "hovered" door. */
@media (hover: hover) {
  .photo-door:hover {
    box-shadow: inset 0 0 0 1px rgba(236, 195, 92, 0.78), var(--shadow-accent-glow), var(--shadow-slab);
  }
  .photo-door:hover .photo-door-shot img { transform: scale(1.045); opacity: 0.72; }
  .photo-door:hover .photo-door-go { border-top-color: rgba(255, 255, 255, 0.5); }
  .photo-door:hover .photo-door-go .arr { transform: translateX(3px); }
}
.photo-door:active { transition-duration: var(--press-down); transform: scale(0.988); }
.photo-door:focus-visible {
  outline: 2px solid var(--accent-glow);
  outline-offset: 3px;
}

/* ── the rest of the section ──────────────────────────────────────────────
   Three destinations this page never named (see the note in photos/index.html).
   A flat divided list, the house's own accordion/list grammar: hairlines carry
   the structure, the name is in the display face, the line under it is body
   copy at the 16px floor, and the whole row is the target. Deliberately NOT a
   third and fourth panel — the two doors above are the one loud thing here. */
/* .section h2 in styles.css is (0,1,1) and would otherwise size this at 37px:
   the band class is here to outrank it, not for decoration. */
.media-wall-band .photo-more-head {
  margin: clamp(34px, 6vw, 52px) 0 0;
  font: 700 11px/1 var(--font-mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--steel);
}
.photo-more {
  margin-top: 12px;
  border-top: 1px solid var(--line);
}
.photo-more-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 14px;
  /* well past the 44px floor: this is a reading row, not a chip */
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
  touch-action: manipulation;
  transition: background var(--t-fast) var(--ease);
}
.photo-more-name {
  grid-column: 1;
  font: 700 clamp(19px, 1.1875rem - 19px + 1.6vi, 22px)/1.15 var(--font-display);
  letter-spacing: -0.01em;
}
.photo-more-line {
  /* full width, not the name's column: the arrow only needs its gutter on the
     first row, and a second line broken 50px early reads as a narrower page */
  grid-column: 1 / -1;
  margin-top: 4px;
  /* body floor — this is a sentence, not a meta label */
  font-size: 16px;
  line-height: 1.5;
  color: var(--steel);
  text-wrap: pretty;
}
.photo-more-row .arr {
  grid-column: 2;
  grid-row: 1;
  color: var(--gold-text);
  font-size: 18px;
  transition: transform var(--t-fast) var(--ease);
}
@media (hover: hover) {
  .photo-more-row:hover { background: rgba(var(--ink-rgb), 0.03); }
  .photo-more-row:hover .arr { transform: translateX(3px); }
}
.photo-more-row:active {
  transition-duration: var(--press-down);
  background: rgba(var(--ink-rgb), 0.05);
}
.photo-more-row:focus-visible { outline: 2px solid var(--gold-ring); outline-offset: -2px; }

@media (prefers-reduced-motion: reduce) {
  .photo-door,
  .photo-door-shot img,
  .photo-door-go,
  .photo-door-go .arr,
  .photo-more-row,
  .photo-more-row .arr { transition: none; }
  .photo-door:active { transform: none; }
  .photo-door:hover .photo-door-shot img { transform: none; }
  .photo-door:hover .photo-door-go .arr,
  .photo-more-row:hover .arr { transform: none; }
}