/*
 * Signal and Echo design system: the hero site part (site profile, issue 164; .claude/reference/site-profile.md s4).
 *
 * .sds-hero[data-variant="overlay|split"] > .sds-hero-media (an img, picture or video) and
 * .sds-hero-copy (an .sds-eyebrow, the title h1 or h2 in the display role, a lead p in the lead role,
 * and .sds-hero-actions with buttons). The title is fluid when the theme sets type.display.size-max.
 *
 * overlay: the media bleeds the full width in a frame of hero.media-ratio (hero.phone-ratio up to
 * 37.5em, 600 CSS pixels); the frame grows when the copy is taller. The copy sits at the bottom,
 * inside the page gutter (page.gutter-sm|md|lg at the base part's steps) and the page.max cap,
 * on a hero.scrim gradient that is opaque behind the text (2 layers) and fades out above it, in
 * hero.on-scrim.
 * split: copy and media side by side from 37.5em with hero.gap between, stacked on a phone. Source
 * order puts the media first or second, in both layouts.
 *
 * Site art (filters, gradients, scanlines) stays with the site.
 * Every value is a token; the only literals are 0, percentages, unitless numbers, em breakpoints and
 * the lead's 34ch measure (site-profile.md s6).
 */

/* sds-claims: hero */

@layer sds.reset, sds.components;

@layer sds.components {
  .sds-hero {
    display: grid;
    position: relative;
  }

  .sds-hero-media {
    min-width: 0;
    margin: 0;
  }

  .sds-hero-media > :is(img, video, picture),
  .sds-hero-media > picture > img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
  }

  .sds-hero-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sds-space-5);
    min-width: 0;
  }

  .sds-hero-copy > :is(h1, h2) {
    margin: 0;
    font-family: var(--sds-font-display);
    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);
    text-wrap: balance;
  }

  .sds-hero-copy > p:not(.sds-eyebrow) {
    max-width: 34ch;
    margin: 0;
    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);
  }

  .sds-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-self: stretch;
    gap: var(--sds-space-3);
    margin-top: var(--sds-space-3);
  }

  /* --- overlay: media and copy share one cell; the copy paints above (it is positioned). */

  .sds-hero[data-variant="overlay"] {
    grid-template: minmax(0, 1fr) / minmax(0, 1fr);
    aspect-ratio: var(--sds-hero-phone-ratio);
    background-color: var(--sds-color-surface);
    overflow: hidden;
  }

  .sds-hero[data-variant="overlay"] > :is(.sds-hero-media, .sds-hero-copy) {
    grid-area: 1 / 1;
  }

  .sds-hero[data-variant="overlay"] > .sds-hero-copy {
    position: relative;
    align-self: end;
    justify-content: flex-end;
    padding-block: var(--sds-space-9) var(--sds-space-8);
    padding-inline: max(var(--sds-page-gutter-sm), (100% - var(--sds-page-max)) / 2);
    color: var(--sds-hero-on-scrim);
    background-image:
      linear-gradient(to bottom, transparent, var(--sds-hero-scrim) var(--sds-space-9)),
      linear-gradient(to bottom, transparent, var(--sds-hero-scrim) var(--sds-space-9));
  }

  .sds-hero[data-variant="overlay"] .sds-eyebrow,
  .sds-hero[data-variant="overlay"] .sds-eyebrow-index {
    color: inherit;
  }

  /* --- split: 1 column on a phone, 2 from 37.5em; the media keeps hero.media-ratio. */

  .sds-hero[data-variant="split"] {
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: var(--sds-hero-gap);
    max-width: var(--sds-page-max);
    margin-inline: auto;
    padding-block: var(--sds-space-9);
    padding-inline: var(--sds-page-gutter-sm);
  }

  .sds-hero[data-variant="split"] > .sds-hero-media {
    aspect-ratio: var(--sds-hero-media-ratio);
    overflow: hidden;
    border-radius: var(--sds-radius-md);
    background-color: var(--sds-color-surface);
  }

  .sds-hero[data-variant="split"] > .sds-hero-copy > :is(h1, h2) {
    color: var(--sds-color-text-strong);
  }

  .sds-hero[data-variant="split"] > .sds-hero-copy > p:not(.sds-eyebrow) {
    color: var(--sds-color-text-soft);
  }

  @media (width > 37.5em) {
    .sds-hero[data-variant="overlay"] {
      aspect-ratio: var(--sds-hero-media-ratio);
    }

    .sds-hero[data-variant="overlay"] > .sds-hero-copy {
      padding-inline: max(var(--sds-page-gutter-md), (100% - var(--sds-page-max)) / 2);
    }

    .sds-hero[data-variant="split"] {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      padding-inline: var(--sds-page-gutter-md);
    }
  }

  @media (width >= 75em) {
    .sds-hero[data-variant="overlay"] > .sds-hero-copy {
      padding-inline: max(var(--sds-page-gutter-lg), (100% - var(--sds-page-max)) / 2);
    }

    .sds-hero[data-variant="split"] {
      padding-inline: var(--sds-page-gutter-lg);
    }
  }
}