/* mp-hero — inset photo card. Contract: COMPONENTS.md §7.14.
   Image/video and copy share one grid cell. Explicit local layers keep the playing
   video behind the copy and its scrim, including during the opacity transition. */
@layer components {
  .mp-hero {
    display: grid;
    isolation: isolate;
    min-block-size: var(--mp-h-hero);
    margin-block-start: var(--mp-space-xs);
    border-radius: var(--mp-radius-lg);
    overflow: hidden;
  }
  @media (width >= 48rem) {
    .mp-hero { margin-block-start: var(--mp-space-s); border-radius: var(--mp-radius-xl); }
  }
  /* Phone: edge to edge under the header (entry.css takes it to the full lane); the body's
     inline padding is the page gutter, so the eyebrow, title and lede line up with the page. */
  @media (width < 48rem) {
    .mp-hero { margin-block-start: 0; border-radius: 0; }
    .mp-hero__body { padding-inline: var(--mp-gutter); }
  }
  .mp-hero__img,
  .mp-hero__video,
  .mp-hero__body { grid-area: 1 / 1; }
  .mp-hero__img,
  .mp-hero__video { z-index: 0; }
  .mp-hero__picture { display: contents; } /* the camp film's phone poster: the <img> stays the grid item */
  /* contain: size and no aspect ratio — the photo fills the cell but never sets its height. */
  .mp-hero__img {
    contain: size;
    aspect-ratio: auto;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: var(--mp-focus, 50% 50%);
  }
  /* The loop over the photo (desktop, after load): the same cell and focal point, under the
     words and their scrim by explicit stacking order; it fades in once it plays. */
  .mp-hero__video {
    contain: size;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: var(--mp-focus, 50% 50%);
    opacity: 0;
    transition: opacity var(--mp-dur-reveal) var(--mp-ease-out);
  }
  .mp-hero__video[data-playing] { opacity: 1; }
  @media (prefers-reduced-motion: reduce) {
    .mp-hero__video { display: none; }
  }
  @media (width < 48rem) {
    .mp-hero__video:not([data-mp-hero-video="every"]) { display: none; } /* home: desktop only */
    .mp-hero__video[data-mp-hero-video="every"] { object-position: 50% 50%; } /* the phone file is framed already */
  }
  .mp-hero__body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: var(--mp-space-xs);
    padding: var(--mp-space-s) var(--mp-space-m) var(--mp-space-l);
    background-image: var(--mp-scrim-hero);
  }
  @media (width >= 48rem) {
    .mp-hero__body { padding: var(--mp-space-m) var(--mp-space-xl) var(--mp-space-xl); }
    /* Room for the booking card that overlaps the hero's foot (wizard: mp-book). */
    .mp-hero:has(+ .mp-book) .mp-hero__body { padding-block-end: calc(var(--mp-space-3xl) + var(--mp-space-xl)); }
  }
  /* Phone: the standard fade, darker at the foot (the camp heroes keep their own scrims). */
  @media (width < 48rem) {
    .mp-hero__body { background-image: var(--mp-scrim-hero-sm); }
  }
  .mp-hero__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mp-space-2xs);
    margin-block-end: auto;
  }
  /* A chip can be a whole sentence (mp-core's camp line while booking is not open): it wraps on
     balanced lines inside the hero instead of widening it past the screen; half a chip's height
     as the radius keeps one line a pill and gives two lines round corners. */
  .mp-hero__chips > .mp-chip {
    max-inline-size: 100%;
    padding-block: calc((var(--mp-h-chip) - 1lh) / 2); /* one line is exactly a chip high */
    border-radius: calc(var(--mp-h-chip) / 2);
    white-space: normal;
    text-wrap: balance;
  }
  .mp-hero__title {
    margin-block: var(--mp-space-3xs) var(--mp-space-2xs);
    font-size: var(--mp-fs-display-2xl);
  }
  .mp-hero__lede {
    max-inline-size: var(--mp-measure);
    color: var(--mp-color-text-2);
    font-size: var(--mp-fs-lead);
    line-height: var(--mp-lh-snug);
  }
  .mp-hero__price {
    font: var(--mp-weight-ui) var(--mp-fs-sm) / var(--mp-lh-tight) var(--mp-font-ui);
    letter-spacing: var(--mp-track-ui);
  }
  .mp-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mp-space-xs);
    margin-block-start: var(--mp-space-xs);
  }

  /* Interior pages: lower, smaller H1. */
  .mp-hero--short { min-block-size: var(--mp-h-band); }
  .mp-hero--short .mp-hero__title { font-size: var(--mp-fs-display-xl); }

  /* Over a photograph the eyebrow is white: the scheme's green is AA on ink, not on a bright
     photo (the home aerial put it at well under 3:1). On ink (stacked or plain) it stays green. */
  .mp-hero__img ~ .mp-hero__body > .mp-eyebrow { color: var(--mp-color-text); }

  /* Phone, interior hero: its copy (the camp page: chips, eyebrow, three-line H1, five-line
     lede, price, two buttons) covers the whole photo, and no scrim keeps white text readable
     over a white jersey. The photo becomes a band above; the copy sits on the hero's ink. */
  @media (width < 48rem) {
    .mp-hero--short:has(> .mp-hero__img) { min-block-size: 0; }
    .mp-hero--short > .mp-hero__img { contain: none; aspect-ratio: var(--mp-ratio-wide); block-size: auto; }
    .mp-hero--short > .mp-hero__body { grid-area: 2 / 1; background-image: none; padding-block-start: var(--mp-space-m); }
    .mp-hero--short > .mp-hero__body > .mp-eyebrow { color: var(--mp-color-accent-text); }
  }

  /* Camp: taller, the words bottom-left; the title's <em> green; no chips, no price line.
     The full-width film scrim keeps a gentle vertical fade. The kicker stays white:
     small green text over a photograph had insufficient contrast in the original film audit. */
  .mp-hero__title em { font-style: normal; color: var(--mp-color-accent-text); }
  .mp-hero--camp .mp-hero__body { gap: var(--mp-space-s); background-image: var(--mp-scrim-hero-camp); }
  @media (width >= 48rem) {
    /* Give the bright film top room above the eyebrow, including at tablet widths. */
    .mp-hero--camp:has(> .mp-hero__video) .mp-hero__body { padding-block-start: var(--mp-space-3xl); background-image: var(--mp-scrim-hero-film); }
  }
  .mp-hero__kicker { display: block; margin-block-end: var(--mp-space-s); color: var(--mp-color-text); font: var(--mp-weight-ui) var(--mp-fs-xs) / var(--mp-lh-tight) var(--mp-font-ui); letter-spacing: var(--mp-track-caps); }
  .mp-hero--camp .mp-hero__title { max-inline-size: 9em; font-size: var(--mp-fs-display-2xl); }
  .mp-hero--camp .mp-hero__actions .mp-btn { min-block-size: var(--mp-h-control); padding-inline: var(--mp-space-l); font-size: var(--mp-fs-lead); }
  /* Phone (design, 2026-10-30: the film stays the picture): the kicker, the H1 and the buttons on the
     film under a clear top third; the lede leaves the card for the page's ink under it. The body
     steps aside so its parts take the hero's rows (clear · title · actions · lede); the film and its
     foot-weighted scrim (the hero's ::before) span the first three, and the card is as tall as its
     words. */
  @media (width < 48rem) {
    .mp-hero--camp { grid-template-columns: minmax(0, 1fr); grid-template-rows: [film-start] calc(var(--mp-space-3xl) * 2.5) auto auto [film-end] auto; min-block-size: 0; }
    .mp-hero--camp :is(.mp-hero__img, .mp-hero__video),
    .mp-hero--camp::before { grid-row: film-start / film-end; grid-column: 1; border-radius: 0; }
    .mp-hero--camp::before { content: ""; z-index: 1; background-image: var(--mp-scrim-hero-film-sm); }
    .mp-hero--camp > .mp-hero__body { display: contents; }
    .mp-hero--camp .mp-hero__title,
    .mp-hero--camp .mp-hero__actions,
    .mp-hero--camp .mp-hero__lede { grid-column: 1; }
    .mp-hero--camp .mp-hero__title { grid-row: 2; z-index: 2; margin: 0; padding-inline: var(--mp-gutter); font-size: var(--mp-fs-display-xl); } /* "FUNDAMENTAL." inside a phone */
    .mp-hero--camp .mp-hero__actions { grid-row: 3; z-index: 2; margin: 0; padding: var(--mp-space-m) var(--mp-gutter) var(--mp-space-l); }
    .mp-hero--camp .mp-hero__lede { grid-row: 4; z-index: 2; padding: var(--mp-space-m) var(--mp-gutter) 0; }
  }
  @media (width >= 64rem) {
    .mp-hero--camp { min-block-size: calc(var(--mp-space-3xl) * 8); }
    .mp-hero--camp .mp-hero__body { padding: var(--mp-space-3xl) var(--mp-space-2xl) var(--mp-space-2xl); }
  }
  /* No photo: an ink band (the hero's own scheme), no scrim. */
  .mp-hero--plain { min-block-size: 0; }
  .mp-hero--plain .mp-hero__body { background-image: none; padding-block: var(--mp-space-panel); }
  .mp-hero--plain .mp-hero__title { font-size: var(--mp-fs-display-xl); }
}