/* =========================================================================
   ONE GENERIC HORIZONTAL GALLERY (render/stage-gallery.ts; IA lane, 2026-10-08).
   The head, arrows and scrolling list are the lesson shelf's own (.stg-shelf,
   stage-page.css); this file only adds the cards and how a drawing fills them.
   House tokens only. Prefix stg-gal.
   ========================================================================= */

.stg-gal .stg-gal__list { gap: var(--s4); padding-bottom: var(--s4); }
.stg-gal--wide .stg-gal__list > li, .stg-gal--concept .stg-gal__list > li { flex-basis: clamp(18rem, 36vw, 30rem); }
.stg-gal--tall .stg-gal__list > li { flex-basis: clamp(15.5rem, 22vw, 18.5rem); }
.stg-gal__list:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }

.stg-gal__card { display: flex; flex-direction: column; height: 100%; color: var(--ink); text-decoration: none; background: var(--paper-deep); border: 1px solid var(--rule); transition: border-color .16s ease; }
a.stg-gal__card:hover { border-color: var(--rule-firm); }
a.stg-gal__card:hover .stg-gal__t { color: var(--brand); }
a.stg-gal__card:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* the picture: one proportion per gallery */
.stg-gal__media { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9; background: var(--plate); border-bottom: 1px solid var(--rule); container-type: inline-size; }
.stg-gal--tall .stg-gal__media { aspect-ratio: 3 / 4; }
.stg-gal--concept .stg-gal__media { aspect-ratio: 4 / 3; background: var(--paper); border-bottom-style: dashed; }
.stg-gal__media > img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* a drawing at its natural width, scaled to the card (tan(atan2()) turns two lengths into a ratio) */
.stg-gal__wire { position: absolute; inset: 0; display: block; overflow: hidden; background: #fff; }
.stg-gal__wire-in { display: block; width: var(--gw, 760px); transform-origin: 0 0; transform: scale(tan(atan2(100cqi, var(--gw, 760px)))); }
.stg-gal__wire .wf-browser { max-width: none; box-shadow: none; border: 0; }
.stg-gal__wire .wf-tag, .stg-gal__wire .wf-dep, .stg-gal__wire .wf-url, .stg-gal__wire .wf-mnote, .stg-gal__wire .wf-rule, .stg-gal__wire .wf-pbar { display: none; }
.stg-gal__wire .wf-mod[data-state="ask"] { background: none; box-shadow: none; }

/* the words */
.stg-gal__body { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s4) var(--s4) var(--s5); }
.stg-gal__t { font: 650 var(--t-md)/1.15 var(--display); letter-spacing: -.015em; }
.stg-gal__b { font: var(--t-sm)/1.45 var(--ui); color: var(--ink-2); }
.stg-gal__q { display: block; margin-bottom: var(--s1); color: var(--ink); font-weight: 600; }
.stg-gal__m { margin-top: auto; padding-top: var(--s2); font: var(--t-xs)/var(--lh-meta) var(--mono); color: var(--ink-3); }
.stg-gal__m b { font-weight: 400; color: var(--ink); }
.stg-gal__line { display: block; margin-bottom: var(--s1); color: var(--ink-2); }

/* status: what exists, said plainly, never a badge colour alone */
.stg-gal__st { align-self: flex-start; display: inline-flex; align-items: center; gap: var(--s2); font: var(--t-xs)/1.3 var(--mono); color: var(--ink-2); }
.stg-gal__st::before { content: ""; flex: none; width: .6rem; height: .6rem; border: 1px solid currentColor; }
.stg-gal__st--built { color: var(--ink); }
.stg-gal__st--built::before { background: currentColor; }
.stg-gal__st--reasoned::before { background: linear-gradient(135deg, currentColor 50%, transparent 50%); }
.stg-gal__st--proposed { color: var(--ink-3); }
.stg-gal__st--proposed::before { border-style: dashed; }

@media (prefers-reduced-motion: reduce) { .stg-gal__card { transition: none; } }
@media (max-width: 40rem) {
  .stg-gal--wide .stg-gal__list > li, .stg-gal--concept .stg-gal__list > li { flex-basis: 86%; }
  .stg-gal--tall .stg-gal__list > li { flex-basis: 74%; }
}