/* .hero — styles for src/lib/expand.mjs's x-hero. Load AFTER tokens.css. See
   public/components/README.md for load order and the split rationale.

   Contained and rounded, not full-bleed: .hero centers itself at
   --column-wide with --column-wide-inset padding — the same max-width AND
   the same horizontal inset .column--wide uses (text.css), not just the
   former. An earlier version of this file used --hero-inset here instead:
   a DIFFERENT, sitewide clamp that only agrees with .column--wide's own
   --space-3 padding up to a certain viewport width, past which .hero's
   content drifted from .column--wide's despite both sharing the same
   max-width — the same class of bug the full-bleed version's
   --hero-inset-wide fixed, showing up again because the padding, not just
   the outer edge, has to match. .hero__box is the actual dark rounded
   rectangle; .hero is only the centering wrapper, so the box's own sizing
   (border-radius, overflow, min-height) never has to know about page-edge
   insets.

   TWO images, not one: --hero-door-img (a featureless wood panel, safe to
   crop from any side) and --hero-img (the actual subject photo) arrive as
   inline custom properties from the page, set on .hero__box. Splitting them
   is what fixes a real crop bug a single full-bleed photo had — cover-fitting
   ONE wide image into a short box crops from whichever edges don't fit, and
   a tall subject (a mascot's head) sitting near the top of the source frame
   loses exactly the part that matters. Two images means the subject's own
   grid cell can be sized for it, and background-position: ... top (not
   center) does the rest. A relative URL in either property resolves against
   THIS stylesheet, not the document that set it, which is why hero()'s
   default is absolute. */
.hero {
  max-width: var(--column-wide);
  margin: 0 auto;
  padding: 0 var(--column-wide-inset);
}

/* border exists because --color-ramp-page is the box's fill AND, in dark
   theme, the page's own background (--color-surface-page resolves to it) —
   without a border the "framed box" reads correctly in light mode, where
   the page is cream, and disappears entirely in dark mode, where the box
   and the page it sits on are the exact same color. --color-border-subtle
   is --color-ramp-mid in dark theme, a step lighter than the page, which is
   what actually gives the box an edge there; in light mode it's a warm tan
   that just reads as a clean, deliberate line. */
.hero__box {
  position: relative;
  display: grid;
  grid-template-columns: min(40%, 460px) 1fr;
  align-items: center;
  min-height: clamp(280px, 26vw, 360px);
  overflow: hidden;
  border-radius: var(--radius-default);
  border: var(--border-width-hairline) solid var(--color-border-subtle);
  background-color: var(--color-ramp-page);
}

.hero__door {
  grid-area: 1 / 1 / 2 / 2;
  align-self: stretch;
  background: var(--hero-door-img) right center / cover no-repeat;
}

/* margin-left: -1px closes the subpixel seam the grid track boundary can
   leave between the two images at some zoom levels — invisible on its own,
   since it only pulls .hero__scene one pixel under .hero__door's edge. */
.hero__scene {
  grid-area: 1 / 2 / 2 / 3;
  align-self: stretch;
  margin-left: -1px;
  background: var(--hero-img) 55% top / cover no-repeat;
}

/* Spans both grid columns but is width-capped to sit visually over the door
   panel — no scrim needed here, unlike the mobile layout below, because the
   door photo is dark enough on its own for cream text. */
.hero__content {
  grid-area: 1 / 1 / 2 / 3;
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: min(46ch, 40%);
  padding: clamp(28px, 4vw, 56px);
}

/* Cream in both themes: the photograph is dark either way, so light-mode ink
   would vanish against it. */
.hero__heading,
.hero__pitch {
  margin: 0;
  color: var(--color-ramp-cream);
}

.hero__heading {
  max-width: 26ch;
  font-family: var(--font-serif);
  font-size: var(--size-hero);
  font-weight: var(--weight-bold);
  line-height: var(--line-height-snug);
  letter-spacing: var(--letter-spacing-heading);
  text-wrap: balance;
}

.hero__pitch {
  font-size: var(--size-hero-pitch);
  line-height: var(--line-height-prose);
  text-wrap: pretty;
}

@media (max-width: 900px) {
  /* The door panel has no room to do its job at this width, so it drops
     entirely rather than shrinking into a sliver — the scene alone fills the
     box, and the copy moves onto it directly with its own scrim (the desktop
     layout has none, because the door image is dark enough by itself). */
  .hero__box {
    grid-template-columns: 1fr;
    min-height: 440px;
  }

  .hero__door {
    display: none;
  }

  .hero__scene {
    grid-area: 1 / 1 / 2 / 2;
    margin-left: 0;
    background-position: 58% top;
  }

  .hero__content {
    grid-area: 1 / 1 / 2 / 2;
    align-self: end;
    width: 100%;
    padding-top: 96px;
    background: linear-gradient(0deg,
      rgb(var(--color-scrim-hero) / 0.94) 0%,
      rgb(var(--color-scrim-hero) / 0.82) 55%,
      rgb(var(--color-scrim-hero) / 0) 100%);
  }

  .hero__heading {
    max-width: none;
    font-size: var(--size-hero-compact);
  }

  .hero__pitch {
    font-size: var(--size-500);
  }
}