/* =========================================================
   LFD Homepage shell

   Structure only. This file paints nothing: no colour, no type, no rule, no
   background. It establishes the landmark, the hero boundary and the one thing
   the approved homepage sections genuinely share - their horizontal gutter -
   and stops there. Vertical rhythm belongs to each section, because in the
   approved design it differs per section and that is a decision, not an
   accident:

     announcement   24px 24px 58px    lfd-home.css:83
     statistics     42px 42px 72px    lfd-home.css:286
     gallery        76px 34px 86px    lfd-home.css:614
     designers      86px 42px 94px    lfd-home.css:1498
     news           70px 42px 86px    lfd-home.css:1881

   THE CANONICAL HOMEPAGE GUTTER CONTRACT

       42px  ->  28px at 1180px  ->  16px at 767px

   One system, owned here, for every homepage section. A section NEVER declares
   its own horizontal padding or its own gutter breakpoint; it inherits this one
   and adds only vertical rhythm.

   The approved CSS uses these same three values everywhere but steps between
   them at two different widths - the announcement and statistics strip at
   1024px, the gallery, designers and news at 1180px, and the statistics strip
   alone widens to 56px above 1600px. That is historical implementation drift,
   not approved visual intent: the end values are identical and only the
   switch-over differs. Owner decision: unify on 1180px and drop the 1600px
   step, so every section on the page shares one vertical alignment edge at
   every width. See docs/approved-design-fidelity.md, D4.

   Vertical rhythm is deliberately NOT unified - see the table above.

   NO !important ANYWHERE. lfd-home.css needs 1,171 of them to fight page-builder
   output it does not control. The shell owns its markup, so it needs none.
   ========================================================= */

.lfd-home {
  /* The canonical homepage gutter. Sections read it; they never restate it and
     they never set their own horizontal padding. */
  --lfd-home-gutter: 42px;

  /* The widest editorial line the approved sections use: the announcement card
     at lfd-home.css:95. Individual sections narrow it; none exceeds it. */
  --lfd-home-line: 1320px;

  display: block;
  position: relative;
}

/* The landmark is a skip-link destination, so it takes focus - but it is not an
   interactive control and must not draw a focus ring when it receives focus
   programmatically. :focus-visible would already suppress it in current
   browsers; this is explicit so older ones agree. */
.lfd-home:focus {
  outline: none;
}

.lfd-home:focus-visible {
  outline: none;
}

/* ---------------------------------------------------------
   Hero boundary

   Slider Revolution sizes itself and is full-bleed in the approved design, so
   this wrapper deliberately declares no width, no padding, no margin and no
   background. Its whole job is to be an addressable boundary: the header sits
   flush above it (lfd-menu.css:29-31 zeroes .edgtf-content's top padding), and
   the first post-hero section begins immediately below it.

   position: relative + isolation gives the slider its own stacking context so a
   hero layer can never paint over the header, which carries z-index 99999.
   --------------------------------------------------------- */
.lfd-home-hero {
  position: relative;
  isolation: isolate;
}

/* The slider's own wrapper keeps every Manon rule that already targets it. The
   shell only guarantees it cannot introduce sideways scroll on a phone. */
.lfd-home-hero > .edgtf-slider {
  max-inline-size: 100%;
}

/* ---------------------------------------------------------
   Hero placeholder

   What stands in the hero's space when no Slider Revolution slider has been
   selected. DELIBERATELY NOT A DESIGN: flat, unstyled beyond holding the space,
   and carrying the wordmark so the page still reads as London Fashion Day
   rather than opening on nothing.

   The height is the hero's, not an invented one - 78svh matches the approved
   hero's viewport share, with svh so a phone's collapsing address bar does not
   change it mid-scroll. min-block-size keeps it sane on a short desktop window.
   --------------------------------------------------------- */
.lfd-home-hero-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 48px 24px;
  block-size: 78svh;
  min-block-size: 420px;
  background: var(--lfd-color-ink-deep, #050505);
  color: var(--lfd-color-paper, #fff);
  text-align: center;
}

/* The LFD Hero block prints the same wordmark as the page's h1, and Manon styles h1 by ELEMENT -
   `h1 { color: #000; margin: 25px 0 }` - which beats a colour this band only offers by
   inheritance. So the mark states its colour and margin itself. On the option-driven span both
   are what it already had: an inline span inherits the white and has no block margin. */
.lfd-home-hero-placeholder-mark {
  margin: 0;
  font-family: var(--lfd-font-display, "Oswald", sans-serif);
  font-size: clamp(28px, 6vw, 64px);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.1;
  color: inherit;
}

/* The block's optional eyebrow: the design system's eyebrow on dark (lfd-type-eyebrow,
   lfd-u-muted-on-dark) - this only removes Manon's paragraph margin, so the band's 16px gap is
   the only spacing. */
.lfd-home-hero-placeholder-eyebrow {
  margin: 0;
}

/* Only an administrator ever sees this line. */
.lfd-home-hero-placeholder-note {
  margin: 0;
  max-inline-size: 46ch;
  font-size: 14px;
  line-height: 1.6;
  /* The design system already has this: --lfd-color-text-muted-on-dark. NOT --lfd-color-mist,
     which is a light section GROUND (#f6f6f6) and would be near-white on this dark panel. */
  color: var(--lfd-color-text-muted-on-dark, rgb(255 255 255 / 0.68));
}

@media (max-width: 767px) {

  .lfd-home-hero-placeholder {
    block-size: 62svh;
    min-block-size: 320px;
  }
}

/* ---------------------------------------------------------
   Post-hero rail
   --------------------------------------------------------- */
.lfd-home-flow {
  display: block;
  position: relative;
}

.lfd-home-section {
  position: relative;
  padding-inline: var(--lfd-home-gutter);
}

/* Full-bleed is the approved default: the marquee, the gallery feed and the news
   grid all run edge to edge, managing their own inner column. */
.lfd-home-section--full > * {
  max-inline-size: 100%;
}

/* A section that opts into the reading column instead. */
.lfd-home-section--grid > * {
  inline-size: 100%;
  max-inline-size: var(--lfd-home-line);
  margin-inline: auto;
}

/* Edge to edge, outside the gutter contract. Only for a section whose approved
   rule declares no horizontal padding and clips its own overflow - a band meant
   to run off both edges of the screen, where a gutter would leave a visible
   margin beside it. It is an exception, and the browser gate asserts it really
   reaches both edges rather than merely opting out of alignment. */
.lfd-home-section--bleed {
  padding-inline: 0;
}

/* ---------------------------------------------------------
   Breakpoints - the approved ones, not new ones
   --------------------------------------------------------- */

/* One step, for every section. lfd-home.css:1680, 2182 */
@media (max-width: 1180px) {

  .lfd-home {
    --lfd-home-gutter: 28px;
  }
}

/* lfd-home.css:1722, 2219, and every other mobile block in the approved file -
   16px is the one value they all agree on. */
@media (max-width: 767px) {

  .lfd-home {
    --lfd-home-gutter: 16px;
  }
}

/* Below 400px the gutter still has to clear a notch. It narrows, it never
   disappears - the same rule the layout layer applies to .lfd-container. */
@media (max-width: 400px) {

  .lfd-home-section:not(.lfd-home-section--bleed) {
    padding-inline-start: max(var(--lfd-home-gutter), env(safe-area-inset-left, 0px));
    padding-inline-end: max(var(--lfd-home-gutter), env(safe-area-inset-right, 0px));
  }
}