/* =========================================================================
   RESOURCE GALLERY (render/resource-gallery.ts; shared stage component, 2026-10-08).
   Groups by the question a tool helps with: the group's name and reason on the
   left, the resources on the right, each with a 16:9 picture, its name as the
   link, who makes it, what it is and why it matters at this stage.
   House tokens only. The one fixed colour is the white plate a provider's
   mark sits on, which the mark's licence asks for (unmodified artwork).
   ========================================================================= */
.rg { margin: 0 0 var(--s8); }
.rg__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s5); margin-bottom: var(--s5); }
.rg__head .lc-h2 { margin: 0; }
.rg__head p { flex: 1 1 22rem; margin: 0; max-width: 52ch; font: var(--t-sm)/var(--lh-body) var(--ui); color: var(--ink-2); }
/* folded on a stage page (stage pages v2 de-dupe): one ruled row, the heading as its label */
.rg--fold { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.rg__fold > summary.rg__head { min-height: 2.75rem; margin: 0; padding: var(--s4) 0; cursor: pointer; list-style: none; }
.rg__fold > summary::-webkit-details-marker { display: none; }
.rg__fold > summary::after { content: "+"; content: "+" / ""; margin-left: auto; font: var(--t-md)/1 var(--mono); color: var(--ink-3); }
.rg__fold[open] > summary::after { content: "\2212"; content: "\2212" / ""; }
.rg__fold > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.rg__fold > summary .lc-h2 { font-size: var(--t-md); }
.rg__fold > p { margin: 0 0 var(--s5); max-width: 52ch; font: var(--t-sm)/var(--lh-body) var(--ui); color: var(--ink-2); }

.rg-group { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: var(--s5) var(--s7); padding: var(--s6) 0; border-top: 1px solid var(--rule); }
.rg-group__head h3 { margin: 0 0 var(--s2); font: 700 var(--t-md)/1.15 var(--display); letter-spacing: -.015em; color: var(--ink); }
.rg-group__q { margin: 0 0 var(--s3); font: var(--t-xs)/var(--lh-meta) var(--mono); color: var(--brand); }
.rg-group__line { margin: 0; font: var(--t-sm)/var(--lh-body) var(--ui); color: var(--ink-2); }

.rg-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s5); }
.rg-list--many { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--s6) var(--s5); }
.rg-list--many .rg-item { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
.rg-item { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); gap: var(--s4); align-items: start; }
.rg-list:not(.rg-list--many) .rg-item { grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); max-width: 46rem; }

.rg-item__vis { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--paper-3); border: 1px solid var(--rule); }
.rg-item__vis img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rg-item__vis--mark { position: relative; background: #FFFFFF; }
/* the whole mark, never cropped: inset on its white panel and scaled to fit */
.rg-item__vis--mark img { position: absolute; inset: 14% 16%; width: 68%; height: 72%; object-fit: contain; }
.rg-item__vis--type { display: flex; flex-direction: column; justify-content: flex-end; gap: var(--s1); padding: var(--s3); box-sizing: border-box; }
.rg-item__vis--type b { font: 700 var(--t-base)/1.1 var(--display); color: var(--ink); overflow-wrap: anywhere; }
.rg-item__vis--type i { font: normal var(--t-xs)/1.3 var(--mono); color: var(--ink-2); } /* on --paper-3: night ink-3 is 4.37:1 there */

.rg-item__text { min-width: 0; }
.rg-item__text > p { margin: var(--s2) 0 0; }
.rg-item__text > p:first-child { margin-top: 0; }
.rg-item__text > .rg-item__by { margin-top: var(--s1); }
.rg-item__name { font: 650 var(--t-base)/1.25 var(--ui); overflow-wrap: break-word; hyphens: auto; }
.rg-item__name a { min-width: 0; color: var(--ink); text-decoration-color: var(--rule-firm); text-underline-offset: .2em; }
.rg-item__name a::after { content: " ↗"; color: var(--ink-3); font-weight: 400; }
.rg-item__name a:hover { color: var(--brand); text-decoration-color: currentColor; }
.rg-item__name a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.rg-item__by { font: var(--t-xs)/var(--lh-meta) var(--mono); color: var(--ink-3); overflow-wrap: anywhere; }
.rg-item__what { font: var(--t-sm)/var(--lh-body) var(--ui); color: var(--ink-2); }
.rg-item__why { font: var(--t-sm)/var(--lh-body) var(--ui); color: var(--ink); }
.rg-item__why b { font-weight: 650; }
.rg-item__learn { font: var(--t-sm)/var(--lh-body) var(--ui); color: var(--ink-2); }
.rg-item__learn a { color: var(--ink); }

.rg__more { margin: 0 0 var(--s5); }
.rg__more a { display: inline-flex; align-items: center; gap: var(--s2); min-height: 2.75rem; font: 650 var(--t-base)/1.2 var(--ui); color: var(--ink); text-underline-offset: .25em; }
.rg__more a span { color: var(--brand); }
.rg__foot { margin: 0; padding-top: var(--s4); border-top: 1px solid var(--rule); max-width: 70ch; font: var(--t-xs)/var(--lh-meta) var(--ui); color: var(--ink-3); }
.rg__foot a { color: var(--ink-2); white-space: nowrap; }

@media (max-width: 64rem) {
  .rg-group { grid-template-columns: 1fr; gap: var(--s4); }
  .rg-group__head { max-width: 46rem; }
}
@media (max-width: 30rem) {
  .rg-list--many { grid-template-columns: 1fr; }
  .rg-item, .rg-list .rg-item, .rg-list--many .rg-item { grid-template-columns: minmax(0, 7rem) minmax(0, 1fr); gap: var(--s3); }
}
/* phones: the picture sits above the words, so a long name and its Save button never run past the column */
@media (max-width: 24rem) {
  .rg-item, .rg-list .rg-item, .rg-list--many .rg-item { grid-template-columns: minmax(0, 1fr); }
  .rg-item__vis { max-width: 16rem; }
}