/* ==========================================================================
   SPI — pages.css
   Compositions specific to individual pages. Homepage only at present.
   ========================================================================== */

/* ==========================================================================
   HERO
   Asymmetric navy band. Copy occupies the shell column; the image slot runs
   to the right edge of the viewport. There is no decorative graphic — the
   previous orbit/contour treatment has been removed and the space is now a
   real editorial photograph slot (see IMPLEMENTATION_NOTES.md, slot H1).
   ========================================================================== */

.hero {
  background: var(--spi-ink);
  color: var(--on-ink-80);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1000px) {
  .hero {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    align-items: stretch;
  }
}

.hero__copy {
  padding-block: clamp(3.5rem, 2rem + 5vw, 6.5rem);
  padding-inline: var(--gutter);
  align-self: center;
}
@media (min-width: 1000px) {
  .hero__copy {
    padding-left: max(var(--gutter), calc((100vw - var(--shell)) / 2 + var(--gutter)));
    padding-right: clamp(3rem, 1rem + 4vw, 4.5rem);
  }
}

.hero__eyebrow {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--spi-gold);
  padding-top: var(--s-4);
  border-top: 2px solid var(--spi-gold);
  max-width: 3.25rem;
  margin-bottom: var(--s-6);
  white-space: nowrap;
}

.hero h1 {
  color: var(--spi-white);
  max-width: 15ch;
  margin-bottom: var(--s-6);
}
.hero__lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--on-ink-80);
  max-width: 48ch;
  margin: 0;
}

/* Tagline sits under a hairline as a line of record, not a headline. */
.hero__tagline {
  margin-top: var(--s-10);
  padding-top: var(--s-5);
  border-top: 1px solid var(--on-ink-line);
  font-family: var(--font-display);
  font-variation-settings: var(--fr-axes);
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--spi-gold);
  max-width: 26ch;
}

.hero__media { position: relative; min-height: 18rem; }
@media (min-width: 1000px) { .hero__media { min-height: 100%; } }
.hero__media .media,
.hero__media .media__placeholder { position: absolute; inset: 0; }
.hero__media .media { aspect-ratio: auto; }

/* ==========================================================================
   INSTITUTIONAL PERSPECTIVE
   ========================================================================== */

/* 16ch left the title using barely two-thirds of its 1.25fr grid column,
   leaving ~290px of dead space before the right-hand column even started
   (measured at 1440px: 432px of text in a 632px track, plus the 88px grid
   gap). Widened so the headline actually uses the column it's given. */
.statement h2 { max-width: 22ch; }
.statement .prose { font-size: var(--fs-body); }

/* A closing line set in the display face beneath the statement. Fills the
   left column, which otherwise runs several hundred pixels short of the
   prose column, and gives the section a bottom edge. */
.statement__coda {
  margin-top: var(--s-8);
  padding-top: var(--s-6);
  border-top: 1px solid var(--ink-line);
  font-family: var(--font-display);
  font-variation-settings: var(--fr-axes);
  font-size: var(--fs-h4);
  line-height: 1.5;
  color: var(--ink-70);
  max-width: 30ch;
}

/* ==========================================================================
   GLOBAL PERSPECTIVE
   Half navy panel, half photograph, meeting at the centre of the viewport.
   ========================================================================== */

.global {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) {
  .global { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
}

.global__panel {
  background: var(--spi-ink);
  color: var(--on-ink-80);
  padding-block: var(--band-y);
  padding-inline: var(--gutter);
}
@media (min-width: 900px) {
  .global__panel {
    padding-left: max(var(--gutter), calc((100vw - var(--shell)) / 2 + var(--gutter)));
    padding-right: clamp(2.5rem, 1rem + 4vw, 4.5rem);
  }
}
.global__panel h2 { color: var(--spi-white); max-width: 15ch; }
.global__panel .section-label { color: var(--spi-gold); }

/* Scoped to the prose wrapper, not to every <p> in the panel. A bare
   `.global__panel p` rule outranks `.section-label` on specificity and was
   stretching the section rule to the full column width. */
.global__body p { color: var(--on-ink-80); max-width: 46ch; }
.global__body { font-size: var(--fs-body); }

.global__media { position: relative; min-height: 20rem; }
.global__media .media,
.global__media .media__placeholder { position: absolute; inset: 0; }
.global__media .media { aspect-ratio: auto; }

/* ==========================================================================
   ENGAGE
   The one band where ivory is the dominant surface.
   ========================================================================== */

/* Same fix as .statement — was leaving a ~260px gap before the prose column. */
.engage h2 { max-width: 22ch; }
.engage .prose { color: var(--ink-70); }

/* ==========================================================================
   PEOPLE PREVIEW
   ========================================================================== */

/* Fixed at three photos always, so this stretched to fill the full shell
   width at 345x432px regardless of screen size (measured on real laptop
   viewports) — capping the column width and left-aligning instead of
   stretching brings each photo down to a more typical preview-thumbnail size. */
.people-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); }
@media (min-width: 760px) {
  .people-grid {
    grid-template-columns: repeat(3, minmax(0, 220px));
    justify-content: start;
    gap: var(--s-8);
  }
}

/* Full team roster (People index): every member at the same visual weight,
   sized closer to Infantis's team grid — four across on desktop, photo
   reads as a portrait thumbnail rather than a hero image. Title is the
   only thing that differentiates one person from another. */
.people-grid--flat { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-8) var(--s-6); }
@media (min-width: 640px) { .people-grid--flat { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Auto-fill instead of a fixed 4 columns: on a real laptop/desktop this adds
   columns as space allows, so each photo settles near ~150-180px instead of
   stretching to fill four fixed slots (that measured 251x314px — noticeably
   larger than a typical team-grid thumbnail — regardless of monitor size,
   since the fixed 4-column count never grew even on a 1920px display). */
@media (min-width: 980px) {
  .people-grid--flat {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--s-10) var(--s-8);
  }
}
.people-grid--flat .person__name { font-size: 1.0625rem; margin-top: var(--s-4); }
.people-grid--flat .person__role { font-size: var(--fs-caption); }

/* ==========================================================================
   PERSON DETAIL — the full profile layout used on individual /people/ pages.
   Distinct from .person (the small preview card) so each can be responsive
   on its own terms.
   ========================================================================== */

.person-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-8);
}
@media (min-width: 640px) {
  .person-detail {
    grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
    gap: var(--s-12);
    align-items: start;
  }
}
.person-detail .media { max-width: 260px; }
@media (max-width: 639px) { .person-detail .media { max-width: 220px; } }