/* ============================================================
   Mikey Mattress — Sleep Event NY, design variant v3
   Additive layer. Loads AFTER styles.css and never edits it —
   styles.css is shared by the live NY / FL pages.

   1. HERO RICH — full-bleed dark photo, no box, cream type
   2. FEATURED PARTNERS — Nolah (image) + Birch (logo-led)
   3. ALWAYS IN STOCK — rotating national brands, call-first
   ============================================================ */


/* ============================================================ */
/* 1. HERO RICH                                                  */
/* The dark, rich photograph runs full-bleed and the type sits   */
/* DIRECTLY ON IT. No panel, no card, no box behind the text —   */
/* that box is what the client asked us to remove, and removing  */
/* it is what lets you see more of the photograph.               */
/*                                                               */
/* Legibility comes from a full-bleed gradient scrim, not from a */
/* container. Measured on the actual file: the mean of the text  */
/* band reads 12.1:1 for cream type, which says no scrim needed  */
/* — but the BRIGHTEST cell (a lit patch of bedding) is 4.3:1    */
/* and fails. Light text is governed by the bright patch, the    */
/* same way dark text is governed by the dark one. The scrim     */
/* below puts that worst cell at roughly 7:1.                    */
/* ============================================================ */
body.hero-rich .hero {
  background: var(--navy);
  min-height: clamp(600px, 80vh, 760px);
  align-items: center;
}
body.hero-rich .hero-bg-img {
  opacity: 1;
  object-position: 62% 50%;   /* keep the sleepers right, clear the text column */
  filter: none;
}

/* THE SCRIM — full-bleed, no edges, nothing that reads as a box.
   Heavier bottom-left under the type, opening up toward the right
   so the photograph stays rich where the sleepers are. */
body.hero-rich .hero::before {
  content: "";
  background:
    linear-gradient(100deg,
      rgba(4, 12, 26, 0.46) 0%,
      rgba(4, 12, 26, 0.36) 38%,
      rgba(4, 12, 26, 0.16) 66%,
      rgba(4, 12, 26, 0.04) 100%),
    linear-gradient(180deg,
      rgba(4, 12, 26, 0.20) 0%,
      rgba(4, 12, 26, 0.04) 45%,
      rgba(4, 12, 26, 0.30) 100%);
}

/* FIREFLIES — the gold orbs and sparks stay. They were built for a navy
   hero and this is one, so they read as warm points of light over the
   bedding rather than the haze they became on a white background.
   They sit above the scrim (z-index 1) and below the type (z-index 2). */
body.hero-rich .luxe-decor { display: block; z-index: 1; }
body.hero-rich .luxe-spark { opacity: 0.9; }
body.hero-rich .luxe-orb { opacity: 0.5; }
body.hero-rich .hero .wrap { width: 100%; }
body.hero-rich .hero-grid {
  color: var(--cream);
  position: relative;
  z-index: 2;
  align-items: center;
  padding-top: 64px;
  padding-bottom: 56px;
}

/* NO BOX. This is the specific thing that was asked for — the base
   stylesheet gives this div a translucent panel, a border and a blur;
   all three come off so the type sits on bare photograph. */
body.hero-rich .hero-grid > div {
  background: none;
  border: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
  max-width: 620px;
}

/* --- Type: light on a dark frame, with a soft shadow doing the work
   a box used to do. Cheaper than a panel and it does not crop the photo. --- */
body.hero-rich .hero-250,
body.hero-rich .hero-250 .h250-yr { color: var(--brass-light); }
body.hero-rich .hero-250 .h250-mid {
  color: var(--brass-light);
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
}
body.hero-rich .h250-dot { color: var(--brass-light); opacity: 0.85; }

body.hero-rich .hero h1 {
  color: var(--cream);
  text-shadow: 0 2px 18px rgba(4, 12, 26, 0.55);
}
body.hero-rich .hero h1 .accent { filter: none; }
body.hero-rich.evergreen-luxe .hero h1 .accent-shimmer {
  background: linear-gradient(105deg, #D9C08A 0%, #F0DDAE 32%, #FFF3D0 48%, #F0DDAE 66%, #D9C08A 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #E7D3A0;
}

body.hero-rich .hero-lede {
  color: rgba(250, 247, 242, 0.94);
  text-shadow: 0 1px 12px rgba(4, 12, 26, 0.5);
}
body.hero-rich .hero-lede strong { color: var(--brass-light) !important; }

/* Trust pips: a rule, not a container — keeps the no-box rule honest. */
body.hero-rich .hero-trust--prominent {
  background: none;
  border: none;
  border-left: 2px solid rgba(220, 194, 137, 0.55);
  border-radius: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding-left: 16px;
  color: rgba(250, 247, 242, 0.92);
  text-shadow: 0 1px 10px rgba(4, 12, 26, 0.5);
}
body.hero-rich .hero-trust--prominent .pip strong,
body.hero-rich .hero-trust--prominent .accent { color: var(--brass-light); }
body.hero-rich .hero-trust--prominent .stars { color: var(--brass-light); }
body.hero-rich .hero-trust--prominent .pip-sep { color: rgba(250, 247, 242, 0.45); }

/* Scoped to .hero on purpose: unscoped, a body-class rule outranks
   .stock-callout .btn-ghost and repaints a button further down the page. */
body.hero-rich .hero .btn-ghost {
  color: var(--cream);
  border-color: rgba(250, 247, 242, 0.6);
  background: rgba(4, 12, 26, 0.28);
}
body.hero-rich .hero .btn-ghost:hover {
  background: rgba(250, 247, 242, 0.14);
  color: var(--cream);
}

body.hero-rich .hero-gift {
  color: rgba(250, 247, 242, 0.9);
  text-shadow: 0 1px 10px rgba(4, 12, 26, 0.5);
}
body.hero-rich .gift-icon .gift-box,
body.hero-rich .gift-icon .gift-bow,
body.hero-rich .gift-icon .gift-ribbon { stroke: var(--brass-light); }

/* --- Mobile: the narrow crop is the problem case. Centred, the frame
   lands on a face. Pushed right, the sleepers sit behind the lower half
   and the type gets the calmer bedding. Scrim raised because a portrait
   crop puts proportionally more image under the text. --- */
/* --- Mobile: the photograph gets its own band instead of being cropped.
   The source is 1500x551 (2.72:1). Filling a 390-wide portrait hero with
   `cover` scales it 1.31x, so only about 20% of the image width is on
   screen — a vertical slice of bedding you cannot identify as anything.
   That was the complaint.

   Letting the band keep close to the photo's own proportions puts roughly
   80% of the width back on screen, so the scene reads. Type then sits on
   the navy below it — still no box, and now the image is legible. --- */
@media (max-width: 720px) {
  body.hero-rich .hero {
    display: flex;
    flex-direction: column;
    /* The desktop rule sets align-items:center for the horizontal layout.
       Left as-is on a flex COLUMN it centres children on the cross axis and
       lets the image size to its own intrinsic width — which pushed it 30px
       past the viewport and put a horizontal scrollbar on the page. */
    align-items: stretch;
    min-height: 0;
    padding-top: 26px;
    padding-bottom: 40px;
    overflow-x: hidden;
  }

  /* The eyebrow and headline live two levels inside .hero-grid, so `order`
     cannot reach them — order only sorts siblings. Collapsing the two
     wrappers with `display: contents` promotes their children to be flex
     items of .hero itself, which is what makes the sequence below possible
     without touching the markup (and without duplicating the headline,
     which would read twice to a screen reader). */
  body.hero-rich .hero-grid,
  body.hero-rich .hero-grid > div { display: contents; }

  body.hero-rich .hero-250            { order: 1; }
  body.hero-rich .hero h1             { order: 2; }
  body.hero-rich .hero-bg-img         { order: 3; }
  body.hero-rich .hero-lede           { order: 4; }
  body.hero-rich .hero-trust--prominent { order: 5; }
  body.hero-rich .hero-ctas           { order: 6; }
  body.hero-rich .hero-gift           { order: 7; }

  /* .wrap supplied the horizontal gutter; display:contents removed its box,
     so each promoted child carries its own. */
  body.hero-rich .hero-250,
  body.hero-rich .hero h1,
  body.hero-rich .hero-lede,
  body.hero-rich .hero-trust--prominent,
  body.hero-rich .hero-ctas,
  body.hero-rich .hero-gift {
    padding-left: var(--gutter);
    padding-right: var(--gutter);
    max-width: none;
  }

  /* Photo band: full-bleed, close to the source's own 2.72:1 so the scene
     stays readable instead of being cropped to a 20%-wide slice. */
  body.hero-rich .hero-bg-img {
    position: relative;
    inset: auto;
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 2.2 / 1;
    object-fit: cover;
    object-position: 52% 50%;
    z-index: 0;
  }

  /* The scrim exists to make type legible over the photo. On mobile the type
     sits beside it, not on it, so a full-bleed scrim would only mute the
     image we just worked to reveal. */
  body.hero-rich .hero::before { display: none; }

  /* --- Vertical rhythm. Every gap in the stack was different: a wide one
     under the ticker, almost none between the headline and the photo, then
     a large dead area under the lede. One consistent step, with the photo
     given equal air top and bottom so it reads as a deliberate band rather
     than something the headline is resting on. --- */
  body.hero-rich .hero-250   { margin: 0 0 10px; }
  body.hero-rich .hero h1    { margin: 0 0 22px; }
  body.hero-rich .hero-bg-img { margin: 0 0 22px; }
  body.hero-rich .hero-lede  { margin: 0 0 22px; }
  body.hero-rich .hero-trust--prominent { margin: 0 0 22px; }
  body.hero-rich .hero-ctas  { margin: 0 0 18px; }
  body.hero-rich .hero-gift  { margin: 0; }

  /* Single line, always. Measured on the real string: it occupies ~678px of
     width per 1rem of font-size at 0.08em tracking. Available width is
     roughly (100vw - gutters), so the size that exactly fills it is
     avail/678 rem — about 2.15vw. Sizing it fluidly rather than fixing one
     value keeps it on one line on a 320px phone as well as a 430px one; a
     fixed size that fits this viewport would wrap on a narrower one.
     The clamp floors it so it can never shrink to unreadable. */
  body.hero-rich .hero-250 {
    display: block;
    white-space: nowrap;
    font-size: clamp(0.42rem, 2.0vw, 0.58rem);
    letter-spacing: 0.07em;
    line-height: 1.8;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body.hero-rich .hero-250 .h250-dot { margin: 0 6px; }

  /* Fireflies over the photo: at 5px with a soft glow they vanish against
     lit bedding. Bigger and warmer so they carry across the image, which is
     the busiest thing they have to sit on. */
  body.hero-rich .luxe-spark {
    width: 7px;
    height: 7px;
    box-shadow: 0 0 18px 5px rgba(255, 226, 160, 0.7);
  }
  body.hero-rich .luxe-decor { z-index: 1; }

  /* Type is on flat navy now — the shadows were compensating for a photo. */
  body.hero-rich .hero h1,
  body.hero-rich .hero-lede,
  body.hero-rich .hero-gift,
  body.hero-rich .hero-trust--prominent { text-shadow: none; }
}


/* ============================================================ */
/* 2. FEATURED PARTNERS — Nolah + Birch                          */
/* Same structure and tone as the Helix section above them.      */
/* ============================================================ */

/* Alternating field so three partner blocks in a row read as a set
   rather than one long white slab. */
.featured-partner--alt { background: var(--cream-warm); }

/* Birch has no product photograph in this repo. Rather than leave an
   empty image well, the section is restructured logo-led and centred. */
.featured-partner--solo .wrap {
  grid-template-columns: 1fr;
  max-width: 860px;
  text-align: center;
  gap: 0;
}
/* --- Birch has no product photography, so the section earns its keep from
   the brand's own material story instead of a stock bed. Everything below is
   drawn in CSS — nothing to source, nothing to license, and it cannot go
   stale the way a borrowed product shot does.

   The panel is an arch (a seed, a doorway, a tree canopy — read it how you
   like) in Birch's own #00513E, wearing a birch-bark texture: soft vertical
   banding plus the short horizontal lenticel dashes that actually
   distinguish birch bark from any other tree. --- */
.featured-partner--solo { position: relative; overflow: hidden; }

/* Two soft canopies of light, well under the copy. */
.featured-partner--solo::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 42% at 12% 0%, rgba(0, 81, 62, 0.06), transparent 70%),
    radial-gradient(48% 38% at 92% 8%, rgba(176, 152, 92, 0.10), transparent 72%);
}
.featured-partner--solo .wrap { position: relative; z-index: 1; }

.featured-partner--solo .partner-logo-well {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  margin: 0 auto 30px;
  padding: 44px 40px 38px;
  max-width: 320px;
  background: #00513E;
  border: none;
  /* Arch: fully round at the top, barely rounded at the base. */
  border-radius: 160px 160px 20px 20px;
  box-shadow:
    0 18px 40px -18px rgba(0, 44, 34, 0.55),
    inset 0 0 0 1px rgba(233, 224, 200, 0.16);
}

/* Birch bark: vertical grain + the horizontal lenticel dashes. Kept low
   contrast so it reads as texture, never as stripes. */
.featured-partner--solo .partner-logo-well::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background:
    repeating-linear-gradient(90deg,
      rgba(255, 255, 255, 0.05) 0 2px,
      transparent 2px 9px,
      rgba(0, 0, 0, 0.05) 9px 11px,
      transparent 11px 22px),
    repeating-linear-gradient(88deg,
      transparent 0 46px,
      rgba(233, 224, 200, 0.16) 46px 52px,
      transparent 52px 118px);
}

/* The wordmark ships in dark green — invert it to cream so it reads on the
   green panel. brightness(0) flattens it to black first, so the invert
   lands on a known value instead of shifting the brand hue. */
.featured-partner--solo .partner-logo-well img {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 210px;
  height: auto;
  display: block;
  filter: brightness(0) invert(1);
  opacity: 0.96;
}

/* Material chips — the three things the brand is actually made of. */
.featured-partner--solo .partner-feat {
  position: relative;
  padding-left: 20px;
  color: var(--ink);
}
.featured-partner--solo .partner-feat::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-radius: 60% 0 60% 0;   /* leaf */
  background: #00513E;
  transform: rotate(-15deg);
}
.featured-partner--solo .partner-body { margin-left: auto; margin-right: auto; max-width: 64ch; }
.featured-partner--solo .partner-features {
  grid-template-columns: repeat(4, auto);
  justify-content: center;
  gap: 10px 28px;
  margin-top: 26px;
}
.featured-partner--solo .partner-feat { justify-content: center; }
@media (max-width: 720px) {
  .featured-partner--solo .partner-features { grid-template-columns: repeat(2, auto); }
}

/* Brand lockup inside a partner block (Nolah) — the logo sits with the
   name rather than floating in the copy. */
.featured-partner .partner-logo {
  display: block;
  height: 34px;
  width: auto;
  margin-bottom: 14px;
}


/* ============================================================ */
/* 3. ALWAYS IN STOCK — rotating national brands, call-first     */
/* ============================================================ */
.stock-callout {
  background: var(--navy);
  color: var(--cream);
  border-bottom: 1px solid var(--navy-soft);
}
.stock-callout .wrap {
  max-width: 900px;
  text-align: center;
}
.stock-callout .eyebrow {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass-light);
  font-weight: 600;
  margin-bottom: 14px;
}
.stock-callout h2 {
  color: var(--cream);
  margin-bottom: 18px;
}
.stock-callout h2 .accent { color: var(--brass-light); font-style: italic; }
.stock-callout p {
  color: rgba(250, 247, 242, 0.9);
  font-size: 1.05rem;
  max-width: 62ch;
  margin: 0 auto 16px;
}
/* The global `strong { color: var(--ink) }` (near-black) applies directly to the
   element and so beats the cream inherited from the <p> above. On this navy panel
   that renders at 1.1:1 — invisible. Every dark-background section needs this
   override; it is not optional styling. */
.stock-callout p strong { color: var(--brass-light); }
.stock-callout .stock-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 26px;
}
.stock-callout .stock-hours {
  margin-top: 18px;
  font-size: 0.9rem;
  color: rgba(250, 247, 242, 0.72);
}
.stock-callout .btn-ghost {
  color: var(--cream);
  border-color: rgba(250, 247, 242, 0.55);
}
@media (max-width: 560px) {
  .stock-callout .stock-ctas { flex-direction: column; align-items: stretch; }
  .stock-callout .stock-ctas .btn { justify-content: center; }
}


/* ============================================================ */
/* 4. LOCAL PRESS — Tradition Magazine cover (FL v3)             */
/* The cover is a PORTRAIT editorial image. The default          */
/* .partner-image frame is 4:3 + object-fit:cover, which         */
/* center-crops the masthead off and lands the badge on Mike's   */
/* face. This modifier shows the full cover, uncropped.          */
/* ============================================================ */
.featured-partner .partner-image--press {
  aspect-ratio: auto;
  max-width: 440px;
  margin: 0 auto;
}
.featured-partner .partner-image--press img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}