/*
 * Rules for the paragraph types added in this build.
 *
 * It is a separate file from components.css for one reason: two people write
 * the palette at the same time, and one stylesheet edited from both sides is a
 * conflict on every save. Everything here obeys the same contract as
 * components.css. Values come from the tokens in tokens.css and never from a
 * literal, no rule here writes its own :focus-visible, and the file is loaded
 * sitewide by the fg2-global library so no component ships its own stylesheet.
 *
 * The file loads after components.css at the same weight, so where a rule below
 * names a class components.css already describes, the rule below wins. Every
 * such rule is a modifier class, never a bare redefinition, so nothing already
 * drawn on the site changes shape because this file exists.
 */

/* --------------------------------------------------------------------------
   1. STATISTIC  ·  the figure inside .fg-stat-block
   --------------------------------------------------------------------------
   components.css already describes the block, its label and its note. Only the
   figure was missing, because the one place a stat block is drawn today (the
   mission page's demands row) has a label and a note and no figure.

   THE FIGURE IS A PARAGRAPH, NOT A HEADING, and that is the whole reason this
   rule exists. Four figures across a row look like four headings and would be
   announced as four headings with nothing under them, which is a defect a
   screen reader user meets and a sighted reader never does. The display face
   is applied by class instead, so the appearance is a heading's and the
   document outline is untouched.

   --text-display on --surface-raised measures 17.08:1.
   -------------------------------------------------------------------------- */

.fg-stat-block__value {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-stat);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-h2);
  text-transform: uppercase;
  color: var(--text-display);
}

/* --------------------------------------------------------------------------
   2. MEDIA BAND  ·  the same band, placed inside a page
   --------------------------------------------------------------------------
   components.css describes .fg-media-band as a page opener: it clears the fixed
   header with padding-top, and it stands 560 to 760px tall. A band an editor
   drops into the middle of a page has no header above it to clear, so that
   padding would print a gap the size of the header for no reason.

   --inline replaces the two measurements and nothing else. The scrim, the copy
   column, the type caps and the narrow-screen scrim swap are all inherited
   unchanged, which matters because the scrim's contrast argument was measured
   against those exact stops.

   The two minimum heights are literals rather than tokens because there is no
   token for a band's minimum height and inventing one for this component would
   put a value in tokens.css that only one component reads. They are the same
   clamp shape the rule they replace already uses.
   -------------------------------------------------------------------------- */

.fg-media-band.fg-media-band--inline {
  padding-top: var(--section-y-lg);
  padding-bottom: var(--section-y-lg);
  min-height: clamp(420px, 22rem + 12vh, 560px);
}

.fg-media-band.fg-media-band--inline.fg-media-band--tall {
  min-height: clamp(560px, 30rem + 16vh, 760px);
}

@media (max-width: 900px) {
  .fg-media-band.fg-media-band--inline {
    padding-top: var(--section-y-lg);
  }
}

/* The picture behind the copy.
   A FRAME, NOT A BACKGROUND IMAGE: a background image carries no alternative
   text and cannot be served responsively, so the picture is a rendered media
   entity laid out as a single-cell grid.

   The grid is deliberate and absolute positioning inside it is not used: a
   positioned ancestor, which is exactly what the contextual links region is for
   a user who can edit the page, silently becomes the containing block and the
   picture collapses to no height. place-items is stated because the rule this
   one extends sets flex alignment for the placeholder case, and under grid
   those same values would stop the picture stretching to the frame. */
.fg-media-band__media--picture {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  place-items: stretch;
  place-content: stretch;
  overflow: hidden;
  background: var(--surface-panel);
}
.fg-media-band__media--picture > * { grid-area: 1 / 1; min-width: 0; }
.fg-media-band__media--picture :where(article, div, figure, picture, span) {
  display: block;
  height: 100%;
}
.fg-media-band__media--picture img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The buttons under the copy. components.css spaces a button group under the
   copy already; this only restores the gap when the group is the last thing in
   the column and the lede above it is absent. */
.fg-media-band__copy > .fg-btn-group:first-child { margin-top: 0; }

/* --------------------------------------------------------------------------
   3. PULL QUOTE
   --------------------------------------------------------------------------
   Nothing in the kit set copy apart without giving it a heading, so this is the
   one genuinely new drawing in this file. It takes the shape article.css
   already uses for a quotation inside a story, so a quotation reads the same
   whether an editor placed it or an article body carried it: an accent rule on
   the leading edge, the copy in the display ink at a raised size, and the
   attribution quiet beneath it.

   IT IS A REAL QUOTATION. The markup is a figure holding a blockquote and a
   figcaption, so assistive technology announces a quotation and its source
   rather than a paragraph in a box. The maximum length on the field is what
   keeps it from becoming running copy, because a stylesheet cannot count
   characters.

   --text-display 17.90:1 and --text-muted 5.57:1, both on --surface-base.
   -------------------------------------------------------------------------- */

.fg-callout {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-inline-start: clamp(18px, 0.9rem + 1.2vw, 30px);
  border-inline-start: 2px solid var(--accent);
}

.fg-callout__quote > :is(p, ul, ol) {
  font-family: var(--font-body);
  font-size: clamp(1.125rem, 0.98rem + 0.6vw, 1.5rem);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  color: var(--text-display);
}

.fg-callout__quote > * + * { margin-top: var(--space-4); }

.fg-callout__attribution {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  font-style: normal;
  letter-spacing: var(--ls-label);
  color: var(--text-muted);
}

/* cite is italic by default in every browser, and the kit sets no other
   quotation anywhere in italics. */
.fg-callout__attribution cite { font-style: normal; }

/* --------------------------------------------------------------------------
   4. PEOPLE GRID
   --------------------------------------------------------------------------
   The grid and the cards are the kit's own, so there is one rule here: a
   person's picture is a portrait rather than the 16 by 10 the card frame uses
   for a landscape teaser, and a face cropped to 16 by 10 loses the top of the
   head. The frame's own ratio is the only property that changes.
   -------------------------------------------------------------------------- */

.fg-card--person .fg-card__media--frame { aspect-ratio: 4 / 5; }

.fg-card--person .fg-card__role {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  color: var(--text-muted);
}


/* --------------------------------------------------------------------------
   5. THE PICTURE BAND ON A PAGE THAT STILL WEARS THE OLDER LIGHT SKIN
   --------------------------------------------------------------------------
   legacy-skin.css re-points the surface and text tokens at its light values
   inside every [data-fg-component] on a page carrying .fg2-legacy-skin, which
   is how a palette component drawn for the near-black ground renders correctly
   in the middle of a white page. That answer is right for every component in
   the palette except this one.

   WHY THIS ONE IS DIFFERENT. The picture band does not take its ground from a
   surface token. It paints its own: a photograph with a scrim of near-black ink
   over it, declared in components.css as fixed rgba stops rather than as a
   token, because the scrim's opacity is the thing the copy's contrast depends
   on and it is not editable. So the ground under this copy stays dark on a
   light page while the remap turns the copy itself dark, and the two meet.
   Measured on /products/new-components-product-category at 1280 with the remap
   and without this block: the headline reads 1.11:1 and the lede 2.43:1.

   THE FIX IS TO EXEMPT THE COPY, NOT THE BAND. Only the text over the scrim
   goes back to the dark ground's inks. The band's own surface tokens are left
   remapped, because the only thing they paint is the frame behind the picture.

   The three aliases are declared at the root, where the originals are not
   shadowed. A custom property is substituted at computed-value time on the
   element that declares it, so each alias holds the dark ground's own value
   from that point on and no literal colour is written anywhere in this file.
   -------------------------------------------------------------------------- */

/* The aliases. A custom property is substituted at computed-value time on the
   element that declares it, so each one holds the dark ground's own value from
   the root onwards and keeps it wherever the original is shadowed further down
   the tree. No literal colour is written anywhere in this file. */
:root {
  --fg3-ink-display:   var(--text-display);
  --fg3-ink-primary:   var(--text-primary);
  --fg3-ink-muted:     var(--text-muted);
  --fg3-border-ui:     var(--border-ui);
  --fg3-border-strong: var(--border-strong);
}

/* The tokens the copy resolves through. */
.fg2-legacy-skin [data-fg-component] .fg-media-band__copy {
  --text-display:   var(--fg3-ink-display);
  --text-primary:   var(--fg3-ink-primary);
  --text-muted:     var(--fg3-ink-muted);
  --text-secondary: var(--fg3-ink-muted);
  --border-ui:      var(--fg3-border-ui);
  --border-strong:  var(--fg3-border-strong);
  color: var(--fg3-ink-muted);
}

/* Re-pointing the tokens is not enough on its own. legacy-skin.css colours a
   heading, a paragraph and a link by TAG at (0,1,1), which outranks the kit's
   own role classes at (0,1,0), so those three take the light page's ink whatever
   the tokens say. Each rule below is (0,3,1) or better, which beats it outright
   rather than on source order. */
.fg2-legacy-skin [data-fg-component] .fg-media-band__copy :is(p, li, dd, dt, span, div, figcaption) {
  color: inherit;
}
.fg2-legacy-skin [data-fg-component] .fg-media-band__copy :is(h1, h2, h3, h4, h5, h6) {
  color: var(--fg3-ink-display);
}
.fg2-legacy-skin [data-fg-component] .fg-media-band__copy a {
  color: var(--fg3-ink-display);
}
.fg2-legacy-skin [data-fg-component] .fg-media-band__copy .fg-btn {
  text-decoration: none;
}
.fg2-legacy-skin [data-fg-component] .fg-media-band__copy .fg-btn--primary {
  color: var(--text-on-accent);
}
.fg2-legacy-skin [data-fg-component] .fg-media-band__copy .fg-btn--secondary {
  color: var(--fg3-ink-primary);
}