/* ============================================================
   FABBRUCCIO: HOME HERO (section, front page only)

   Ported from beta2 site.css:284-300 (the hero + its foot) and
   :391-393 (the mobile crop). Markup: parts/home/hero.php.

   beta2 -> here
     .hero        -> .fab-hero
     .hero-media  -> .fab-hero__media
     .hero-scrim  -> .fab-hero__scrim
     .hero-foot   -> .fab-hero__foot

   ------------------------------------------------------------
   LANDMINE 3: WHY body.home GETS overflow-x: clip
   ------------------------------------------------------------
   instawhew/assets/css/layout.css:22 sets `body { overflow-x: hidden }`.
   Per CSS Overflow 3, a non-visible value on one axis forces the OTHER
   axis to compute to `auto`, so body becomes a SCROLL CONTAINER. A
   position:sticky element only sticks against its nearest scrolling
   ancestor, so every sticky element on the site pins to body's
   scrollport instead of the viewport, and body's scrollport never
   scrolls (the viewport does). The elements pin to a box that cannot
   move, which looks exactly like sticky being silently ignored.

   `clip` is the fix, and the distinction is exact: the same spec rule
   only forces `auto` when the other value is "not visible nor clip".
   `overflow-x: clip` paired with `overflow-y: visible` is legal, so body
   stops being a scroll container and sticky works again, while the
   sideways clamp the parent wanted is kept. It does not clip the fixed
   nav either: overflow does not create a containing block for fixed
   descendants.

   Route-scoped, because the parent's declaration is not ours to change
   and the routes this pass does not own must keep the parent's
   behaviour. The other three guards are in fab-pdp.css (single product),
   fab-cart.css (cart) and fab-calf.css (the pre-lander).
   ------------------------------------------------------------ */
body.home { overflow-x: clip; }

/* ============================================================
   THE HERO. Silent, full-bleed, image only. NO HEADLINE OVER IT.

   Desktop has NO CONTAINER ASPECT RATIO AT ALL: the image sets its own
   height, so the 3:2 source (2000x1336) is shown WHOLE and nothing is
   cropped. That is the crop-discipline rule in its plainest form, and it
   is why there is no `height` here to fight.

   The letterbox colour behind it is the leather brown from the
   photograph itself, so on the frame or two before the image paints, and
   at any width where the image cannot fill, the band reads as part of
   the picture rather than as a hole.
   ============================================================ */
.fab-hero {
  position: relative;
  background: var(--fab-hero-letterbox);
}
.fab-hero__media {
  position: relative;
  display: block;
  margin: 0;
}
.fab-hero__media img {
  display: block;
  width: 100%;
  height: auto;
}

/* The one gradient in the entire system, and it exists to keep the
   inverted nav legible over a light patch of leather. */
.fab-hero__scrim {
  position: absolute;
  inset: 0 0 auto 0;
  height: 190px;
  pointer-events: none;
  background: linear-gradient(to bottom, var(--fab-scrim-top), var(--fab-scrim-bottom));
}

/* The hero's foot: one honest line about the collection, and the quiet
   entry link. Hairline-bottomed, so the hero hands off to the page
   through a rule rather than through a colour change. */
.fab-hero__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px 26px;
  padding-block: clamp(20px, 3vw, 32px);
  border-bottom: 1px solid var(--fab-hairline);
}
/* .fab-hero__line IS the h1. It is listed alongside p so the two are
   provably identical: the front page's only top-level heading is a sentence,
   not a display slab, because the hero is an image and the design puts no
   headline over it. theme.json gives every h1 a size and a weight, so both
   are restated here to counter it; the class (0,1,0) beats `:root :where(h1)`
   and this section layer loads after global styles, so no !important. */
.fab-hero__foot p,
.fab-hero__foot .fab-hero__line {
  margin: 0;
  max-width: var(--fab-measure-hero);
  font-family: var(--fab-font-sans);
  font-size: var(--fab-size-lede);
  font-weight: var(--fab-weight-regular);
  line-height: var(--fab-leading-body);
  letter-spacing: var(--fab-track-body);
  color: var(--fab-ink-secondary);
}
/* Emphasis inside a sentence is a colour and weight change, never a
   separate styled component. */
.fab-hero__foot p b,
.fab-hero__foot .fab-hero__line b {
  color: var(--fab-ink);
  font-weight: var(--fab-weight-medium);
}

/* MOBILE. Below 700px the hero takes a 4/3 window, which is THE TIGHTEST
   CROP THIS COMPOSITION SURVIVES and was measured, not guessed: the open
   toe sits about 7 percent in from the left edge of the frame and a 4:3
   crop takes 5.5 percent. Anything squarer cuts the product. This is the
   one place in the system where cover is used on a ratio that does not
   match the source, and it is allowed only because the crop was checked
   by looking at it. */
@media (max-width: 700px) {
  .fab-hero__media { aspect-ratio: 4 / 3; }
  .fab-hero__media img {
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
  }
  .fab-hero__scrim { height: 120px; }
}