/* ============================================================
   HERO — BRIGHT VARIANT  (body.hero-bright)
   Loaded by every page using the daylight hero photograph:
   the two everyday Sleep Event pages, their v3 twins, and the
   two Labor Day pages.

   Layer order: styles.css -> v3.css -> hero-bright.css
   Load this AFTER v3.css; it overrides v3's hero-rich scrim,
   which is tuned for the DARK night photograph.

   This file exists so the bright-hero treatment has ONE
   definition. It previously lived inside labor-day.css, which
   meant adopting it on the everyday pages would have required a
   second copy — and divergent copies of shared styling are
   exactly what left the Labor Day pages three commits behind
   their evergreen siblings.
   ============================================================ */

/* object-position is tuned to WHERE THE SUBJECT SITS IN THE FILE,
   not to the layout, so it must be re-tuned whenever the hero photo
   changes. The old night photo put its sleepers far right and wanted
   66%. hero-daylight-woman.webp sits at ~45% of the frame; at 66%
   her face rendered at ~48% of the viewport, directly behind the
   headline. 20% puts her at ~62%, where the previous subject sat,
   leaving the left column clean for type. */
body.hero-bright .hero-bg-img {
  object-position: 20% 50%;
  opacity: 1;
  filter: none;
}

/* Scrim weight is a function of the PHOTO, not a constant.
   v3's 0.46 is calibrated for a dark night shot. A daylight photo
   needs more, or cream type on white bedding is unreadable — but
   too much and the page reads "too dark", which is the note the
   client raised twice.

   0.60 is measured, not guessed: sampling the photo pixel behind
   the headline and compositing the scrim gives contrast vs cream of
     0.78 -> 9.16:1  (safe, but reads as the dark that was flagged)
     0.60 -> 4.90:1  (passes WCAG AA for normal text — chosen)
     0.48 -> 3.36:1  (large text only; the hero lede would fail)
   Re-run that measurement if the hero photograph changes again. */
body.hero-bright .hero::before {
  background:
    linear-gradient(100deg,
      rgba(4, 12, 26, 0.60) 0%,
      rgba(4, 12, 26, 0.48) 34%,
      rgba(4, 12, 26, 0.22) 62%,
      rgba(4, 12, 26, 0.06) 100%),
    linear-gradient(180deg,
      rgba(4, 12, 26, 0.20) 0%,
      rgba(4, 12, 26, 0.05) 45%,
      rgba(4, 12, 26, 0.28) 100%);
}

/* Phone: the text column spans the full width, so a horizontal
   gradient cannot do the work — go vertical instead. */
@media (max-width: 720px) {
  body.hero-bright .hero::before {
    background:
      linear-gradient(180deg,
        rgba(4, 12, 26, 0.52) 0%,
        rgba(4, 12, 26, 0.60) 42%,
        rgba(4, 12, 26, 0.68) 100%);
  }
  body.hero-bright .hero-bg-img { object-position: 40% 50%; }
}