/*
 * Signal and Echo design system: the page-head part (pack site, issue 164; .claude/reference/site-profile.md s4).
 *
 * The head of an interior page: an eyebrow, the h1 and a description, with an optional aside column.
 *
 *   <header class="sds-page-head">               data-size="lg": the h1 takes the display role
 *     <p class="sds-eyebrow">Press</p>
 *     <h1 class="sds-page-head-title">Press kit</h1>
 *     <p class="sds-page-head-description">One line on what the page holds.</p>
 *     <div class="sds-page-head-aside">Last updated 2026-11-07</div>   optional
 *   </header>
 *
 * The head spans the page (its background bleeds) and its content stops at --sds-page-max, inside
 * --sds-page-gutter (site/base.css). The title is type.title (fluid when the theme sets
 * type.title.size-max), or type.display with data-size="lg"; the description is type.lead in
 * color.text-soft, held to a 34ch measure (site-profile.md s6). The aside stacks under the
 * description up to 37.5em (600 CSS pixels) and is a second column above it.
 *
 * The art stays with the site.
 * Every value is a token; the only literals are 0, percentages, ch and unitless numbers.
 */

/* sds-claims: page-head */

@layer sds.reset, sds.components;

@layer sds.components {
  .sds-page-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    padding-block: var(--sds-space-8) var(--sds-space-7);
    padding-inline: max(var(--sds-page-gutter), (100% - var(--sds-page-max)) / 2 + var(--sds-page-gutter));
    color: var(--sds-color-text);
  }

  .sds-page-head > * {
    grid-column: 1;
    margin-block: 0;
  }

  .sds-page-head > .sds-eyebrow {
    margin-block-end: var(--sds-space-4);
  }

  .sds-page-head-title {
    color: var(--sds-color-text-strong);
    font-family: var(--sds-font-display);
    font-size: calc(var(--sds-type-title-size) * var(--sds-type-scale));
    font-weight: var(--sds-type-title-weight);
    letter-spacing: var(--sds-type-title-tracking);
    line-height: var(--sds-type-title-line-height);
    text-wrap: balance;
  }

  .sds-page-head:where([data-size="lg"]) .sds-page-head-title {
    font-size: calc(var(--sds-type-display-size) * var(--sds-type-scale));
    font-weight: var(--sds-type-display-weight);
    letter-spacing: var(--sds-type-display-tracking);
    line-height: var(--sds-type-display-line-height);
  }

  .sds-page-head-description {
    max-inline-size: 34ch;
    margin-block-start: var(--sds-space-5);
    color: var(--sds-color-text-soft);
    font-family: var(--sds-font-body);
    font-size: calc(var(--sds-type-lead-size) * var(--sds-type-scale));
    font-weight: var(--sds-type-lead-weight);
    letter-spacing: var(--sds-type-lead-tracking);
    line-height: var(--sds-type-lead-line-height);
    text-wrap: pretty;
  }

  /* --- aside: under the description on a phone; a second column from 37.5em. */

  .sds-page-head-aside {
    margin-block-start: var(--sds-space-6);
    color: var(--sds-color-text-muted);
    font-family: var(--sds-font-ui);
    font-size: calc(var(--sds-type-small-size) * var(--sds-type-scale));
    font-weight: var(--sds-type-small-weight);
    letter-spacing: var(--sds-type-small-tracking);
    line-height: var(--sds-type-small-line-height);
  }

  @media (width > 37.5em) {
    .sds-page-head:has(> .sds-page-head-aside) {
      grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
      column-gap: var(--sds-space-8);
    }

    /* The aside fills column 2 beside every head row; spare implicit rows are empty and 0 high,
       because the rows have no gap (the head spaces its rows with margins). */
    .sds-page-head > .sds-page-head-aside {
      grid-column: 2;
      grid-row: 1 / span 6;
      align-self: end;
      margin-block-start: 0;
    }
  }
}