/* ===========================================================================
   Section 1 - the hero.

   TWO GENUINELY DIFFERENT TREATMENTS, not one layout scaled (FR-095).

   LANDSCAPE: the composition is already the section's aspect, so it is used
   whole and full-bleed. The place and date FLANK the couple at the foot of the
   frame - bottom-left and bottom-right - each over its own corner scrim
   (research R5/R6, `.scrim--corners`, sections.css).

   PORTRAIT: full-bleed would crop to the central 39% of the frame and cut the
   couple's names in half, which FR-091 forbids and SC-023 checks. So the
   photograph is used WHOLE at its own aspect across the full width. Research
   R5's go/no-go triggered here: the couple fill almost the whole frame, down
   to y 0.934, leaving only 0.066 of the photo's height free below them -
   under the 0.10 this layout needs for two lines of large text, and the
   couple span nearly the full width besides, so there is no corner to flank
   into either. Rather than shrink the lettering onto the couple, the couple
   chose to carry NOTHING over the photograph in portrait: no lettering, no
   scrim. The two facts move to the welcome section that follows instead
   (`.welcome__meta`, welcome.njk/welcome.css). The section still ends exactly
   where the photograph ends - no field, cream or otherwise, below it.
   =========================================================================== */

.section--home {
  background-color: var(--ground-cream);
  padding: 0;
}

/* --- Portrait: the photograph, whole, and nothing else -------------------- */

@media (max-aspect-ratio: 1/1) {
  .section--home {
    min-height: 0;
    display: block;
    position: relative;
  }

  .hero__photograph {
    position: static;
    width: 100%;
    height: auto;
    /* The committed portrait crop's own aspect. Declared, so the box is
       reserved before the image arrives and nothing shifts (FR-102). */
    aspect-ratio: 690 / 768;
    object-fit: cover;
    object-position: center 58%;
  }

  /* Research R5 go/no-go: no lettering sits on the photograph in portrait, so
     there is nothing left to light, and no scrim is drawn. Only .hero__meta
     is hidden, not .hero__content: the section's one h1 lives inside
     .hero__content too (visually-hidden, not display:none), and hiding the
     wrapper would have taken the page's only level-one heading out of the
     accessibility tree along with it (caught by check-a11y's axe pass,
     page-has-heading-one). .hero__content itself renders as an empty,
     unsized box once .hero__meta is gone, because the hidden h1 is already
     position:absolute and contributes no layout size. */
  .hero__scrim,
  .hero__meta {
    display: none;
  }
}

/* --- Landscape: the composition, whole and full-bleed, text in the corners */

@media (min-aspect-ratio: 1/1) {
  .section--home {
    align-content: end;
  }

  .hero__content {
    position: absolute;
    inset: auto var(--gutter) clamp(var(--space-md), 5vh, var(--space-xl));
    /* Override the base .section__content measure, auto-centring AND its
       explicit width: 100%. That literal width, left unoverridden, would
       combine with these insets to make the box 100% of the SECTION wide
       starting at the left inset, pushing its right edge (and .hero__dates
       inside it) past the section's own right edge entirely. `width: auto`
       is what lets the browser size the box FROM the insets instead, so it
       spans exactly gutter-to-gutter and 24% resolves against that. */
    width: auto;
    max-width: none;
    margin-inline: 0;
  }

  .hero__meta {
    display: flex;
    justify-content: space-between;
    align-items: end;
  }

  .hero__place,
  .hero__dates {
    max-width: 24%;
    color: var(--ink-reversed);
    /* The R6 helper: the gate strips this before measuring, so it can only
       help, never carry the pass on its own. */
    text-shadow:
      0 1px 2px rgb(0 0 0 / 0.45),
      0 0 1.2em rgb(0 0 0 / 0.35);
  }

  .hero__place {
    text-align: start;
    font-weight: 600;
  }

  .hero__dates {
    text-align: end;
  }

  /* R5's fallback, applied directly rather than waiting for a failure: the
     fluid --fs-lg clamp grows past 24px exactly where the free band is
     tightest (at 1280px wide the couple's left edge measures ~327px, so
     31px type set "Lisbon, Portugal" at ~278px wide, clearing it by only a
     few px before any crop rounding). Landscape pins both lines to the
     large-text FLOOR (24px) instead of the fluid scale, which clears the
     couple with comfortable room at every measured width. */
  .hero__place,
  .hero__dates {
    font-size: 1.5rem;
  }

  /* 320 px case (research R5): the left band is narrowest here, so the place
     line steps down again, to the bold large-text floor, rather than wrap or
     overflow. */
  @media (max-width: 22rem) {
    .hero__place {
      font-size: 1.1875rem;
      font-weight: 700;
    }
  }
}

/* --- The live line, landscape only -----------------------------------------
   Font sizes live inside the landscape media query above, not here: a plain,
   unconditional rule declared AFTER a media-query rule of equal specificity
   wins regardless of whether the media query matches, so a bare .hero__place
   rule here would silently override the 1.5rem/1.1875rem fallbacks above on
   every width. Only the properties that do not vary by width live here. */

.hero__dates {
  font-family: var(--font-display);
  letter-spacing: var(--tracking-display);
  /* Lining figures here: a date is a number you read, not running prose, and
     old-style figures in a line of their own read as a typo. */
  font-variant-numeric: lining-nums;
  font-feature-settings: 'lnum' 1;
}

.hero__meta {
  margin: 0;
  max-width: none;
}

/* --- The one orchestrated moment (FR-115, research R12) ------------------
   A settle on first load: opacity and a few pixels of rise, once, 380 ms, on
   the live line only. Nothing else on the site animates unprompted. No
   parallax, no per-section reveal, no carousel.

   Gated behind no-preference rather than switched off under reduce, so the
   default for anyone who has expressed no preference is still the still page
   until the browser says motion is welcome. Landscape only: portrait shows no
   live line at all (research R5). */

@media (prefers-reduced-motion: no-preference) and (min-aspect-ratio: 1/1) {
  .hero__meta {
    animation: hero-settle var(--motion-settle) var(--ease-settle) both;
  }

  @keyframes hero-settle {
    from {
      opacity: 0;
      /* transform and opacity only: both composite, neither reflows. */
      transform: translateY(6px);
    }

    to {
      opacity: 1;
      transform: none;
    }
  }
}