/* assets/css/pages/resources.css: the Resources Center's own layout (plan.md, "Resources"); every color, size and
   corner from design\system.css's tokens, every component from design\components.css. */

/* the header: the words and the chooser beside the framed footage, the glass page over its free side; below 1200 the
   footage follows the words, so the glass page never shrinks under its smallest words */
@media (min-width: 1200px) {
  .page-resources #top .page-top__title { font-size: min(var(--fs-display), calc(5.4vh + 1rem)); }
}
@media (max-width: 1199px) {
  .page-resources #top .page-top__row { grid-template-columns: minmax(0, 1fr); }
  .page-resources #top .pstage { max-width: 680px; }
}
/* the section's own stop serves the footage band of the phone's layout only */
.page-resources #top { position: relative; isolation: isolate; }
@media (min-width: 1024px) { .page-resources #top > .stop { display: none; } }
/* on a phone the footage opens the page as a band, as on every other page; the glass page follows the chooser on
   paper, so the first screen shows the owner at her desk, the headline and the three tools */
@media (max-width: 1023px) {
  .page-resources #top { padding-top: 0; }
  .page-resources #top .page-top__in { padding-top: calc(var(--band) + var(--space-3)); }
  .page-resources #top .page-top__copy { position: relative; z-index: 2; }
  .page-resources #top .page-top__stage, .page-resources #top .pstage { position: static; padding-top: 0; }
  .page-resources #top .pstage__media { position: absolute; z-index: 0; inset: 0 0 auto 0; width: 100%; height: var(--band); border-radius: 0; object-position: var(--obj-m); }
  .page-resources #top::after { content: ""; position: absolute; z-index: 1; inset: 0 0 auto 0; height: var(--band); background: linear-gradient(180deg, transparent 35%, var(--c-brand-dark)); pointer-events: none; }
  .page-resources #top .pstage__scene { margin-top: 72px; }
  .page-resources #top .rs-card { background: var(--c-paper); }
}

/* the three tools, one row each, their moments played as they come into view */
.tool-rows { display: grid; gap: clamp(3rem, 7vw, 6rem); margin-top: var(--space-6, 4rem); }
.tool-row h3 { font-size: var(--fs-h2); }