/* =========================================================================
   SLEEP MAGAZINE — Homepage Showcase
   CMS-driven full-bleed video/photo header + media "bento" category grid.
   Flat / angular: no border-radius, no box-shadow. Loaded on the front page
   only (see inc/setup.php), after style-c.css.
   ========================================================================= */

/* These four used to be a private palette (#0f1216 / #cfe4f4 / #f1f3f5 /
   #dfeaf3) unrelated to anything in style-c.css, which made the homepage —
   the page most likely to be revamped first — the page least connected to
   the design system: accent, ink, bg and density switching had no effect on
   the hero or the bento grid at all. They now default to the global tokens
   and stay as named aliases so the homepage keeps ONE local override point
   if it ever needs to diverge deliberately. */
:root{
  --hs-black:var(--dark);   /* header + tile ink            */
  --hs-blue:var(--hi);      /* primary button / accent      */
  --hs-sec:var(--paper);    /* section background           */
  --hs-ph:var(--hair);      /* placeholder tile (no media)  */
}

/* =========================================================================
   1. HEADER  (.home-hero)
   ========================================================================= */
.home-hero{
  position:relative;
  min-height:640px;
  background:var(--hs-black);
  color:var(--on-dark);
  overflow:hidden;
  isolation:isolate;
  display:flex;
  align-items:center;
}

/* Media zone fills the whole header; subject kept in the right half. */
.home-hero__mediazone{position:absolute;inset:0;z-index:0}
.home-hero__media,
.home-hero__video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:right center;
}
.home-hero__video{opacity:0;transition:opacity .5s ease}
.home-hero__video.is-playing{opacity:1}

/* Left-origin gradient carrying the text (left 40% is the darkest). */
.home-hero__scrim{
  position:absolute;inset:0;
  background:linear-gradient(90deg,
     rgba(15,18,22,.95) 0%,
     rgba(15,18,22,.82) 30%,
     rgba(15,18,22,.55) 55%,
     rgba(15,18,22,.25) 100%);
}

.home-hero__inner{
  position:relative;z-index:2;
  width:100%;
  padding:100px 0;
}
.home-hero__text{max-width:640px}
.home-hero .kicker{color:var(--hs-blue)}
.home-hero h1{
  font-size:var(--fs-h1);
  line-height:1.0;
  margin:16px 0 0;
  color:var(--on-dark);
  max-width:16ch;
}
.home-hero h1 .it{font-style:italic;font-weight:600}
.home-hero__lead{
  color:var(--on-dark-soft);
  font-size:var(--fs-3xl);
  line-height:1.55;
  max-width:52ch;
  margin-top:22px;
}
.home-hero__cta{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap}

/* Buttons — override style-c .btn skin. */
.home-hero__btn{padding:16px 28px;font-size:var(--fs-lg);border:2px solid transparent}
.home-hero__btn--primary{background:var(--hs-blue);color:var(--hs-black);border-color:var(--hs-blue)}
.home-hero__btn--primary:hover{background:var(--on-dark);color:var(--hs-black);border-color:var(--on-dark)}
.home-hero__btn--ghost{background:transparent;color:var(--on-dark);border-color:rgba(255,255,255,.5)}
.home-hero__btn--ghost:hover{background:var(--on-dark);color:var(--hs-black);border-color:var(--on-dark)}

/* Number bar pinned over the bottom of the media. */
.home-hero__statbar{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  background:rgba(10,12,15,.62);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  border-top:1px solid rgba(255,255,255,.14);
}
.home-hero__statbar-row{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
}
.home-hero__stat{
  padding:22px 8px;
  border-left:1px solid rgba(255,255,255,.10);
  text-align:left;
}
.home-hero__stat:first-child{border-left:0}
.home-hero__stat b{
  font-family:var(--serif);
  font-size:clamp(24px,2.6vw,34px);
  font-weight:800;line-height:1;
  color:var(--on-dark);display:block;
}
.home-hero__stat span{
  display:block;margin-top:6px;
  font-size:var(--fs-xs);letter-spacing:.09em;text-transform:uppercase;
  color:var(--on-dark-mute);
}

/* =========================================================================
   2. BENTO CATEGORY GRID  (.home-bento)  — design 2a
   ========================================================================= */
.home-bento{background:var(--hs-sec)}
.home-bento__wrap{max-width:1200px;margin:0 auto;padding:0 32px}

/* Section head: kicker + Playfair H2 + a 1px ink rule above the grid. */
.home-bento__head{margin:0 0 18px}
.home-bento__h2{
  font-family:var(--serif);
  font-size:clamp(28px,3.4vw,40px);
  font-weight:800;line-height:1.05;
  color:var(--hs-black);margin:6px 0 0;
}
.home-bento__rule{
  border:0;border-top:1px solid var(--hs-black);
  margin:0 0 26px;
}

.home-bento__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:228px;
  gap:14px;
}

.home-bento__tile{
  position:relative;
  overflow:hidden;
  background:var(--hs-ph);
  min-height:228px;
  color:var(--on-dark);
}
.home-bento__tile--large{grid-column:span 2;grid-row:span 2}
.home-bento__tile--wide{grid-column:span 2;grid-row:span 1}
.home-bento__tile--small{grid-column:span 1;grid-row:span 1}

.home-bento__mediazone{position:absolute;inset:0;z-index:0}
.home-bento__media,
.home-bento__video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center;
}
.home-bento__video{opacity:0;transition:opacity .4s ease}
.home-bento__video.is-playing{opacity:1}

/* Dark gradient over the media — direction/strength per tile size. */
.home-bento__grad{position:absolute;inset:0;z-index:1}
.home-bento__tile--large .home-bento__grad{
  background:linear-gradient(0deg,
     rgba(15,18,22,.86) 0%,
     rgba(15,18,22,.15) 55%,
     rgba(15,18,22,.05) 100%);
}
.home-bento__tile--wide .home-bento__grad{
  background:linear-gradient(90deg,
     rgba(15,18,22,.82) 0%,
     rgba(15,18,22,.1) 78%);
}
.home-bento__tile--small .home-bento__grad{
  background:linear-gradient(0deg,
     rgba(15,18,22,.85) 0%,
     rgba(15,18,22,.08) 70%);
}

/* Whole-tile link sits above the media but below the body buttons. */
.home-bento__overlay{position:absolute;inset:0;z-index:2}

.home-bento__body{
  position:relative;z-index:3;
  height:100%;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:18px 20px;
  pointer-events:none;   /* let the overlay catch clicks; buttons re-enable */
}
/* Topper (wide): text is a vertically-centred left banner, not bottom-aligned. */
.home-bento__tile--wide .home-bento__body{justify-content:center;align-items:flex-start;max-width:62%}

.home-bento__title{
  font-family:var(--serif);
  font-weight:800;line-height:1.04;
  color:var(--on-dark);margin:0;
}
.home-bento__tile--large .home-bento__title{font-size:clamp(24px,2.6vw,30px)}
.home-bento__tile--wide  .home-bento__title{font-size:clamp(20px,2.2vw,23px)}
.home-bento__tile--small .home-bento__title{font-size:clamp(17px,1.8vw,19px)}

.home-bento__count{
  margin-top:6px;
  font-weight:500;letter-spacing:.01em;
  color:var(--on-dark-soft);
}
.home-bento__tile--large .home-bento__count{font-size:var(--fs-sm)}
.home-bento__tile--wide  .home-bento__count{font-size:var(--fs-xs)}
.home-bento__tile--small .home-bento__count{font-size:var(--fs-xs)}

/* Flat, angular CTA buttons — one row on every tile. */
.home-bento__actions{
  display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;
  pointer-events:auto;   /* buttons stay clickable over the overlay */
}
.home-bento__btn{
  padding:8px 12px;
  font-size:var(--fs-2xs);font-weight:500;line-height:1;
  border:1px solid transparent;
  border-radius:0;
  text-decoration:none;
  white-space:nowrap;
}
.home-bento__btn--solid{background:var(--hs-blue);color:var(--hs-black);border-color:var(--hs-blue)}
.home-bento__btn--solid:hover{background:var(--on-dark);color:var(--hs-black);border-color:var(--on-dark)}
.home-bento__btn--ghost{background:transparent;color:var(--on-dark);border-color:rgba(255,255,255,.45)}
.home-bento__btn--ghost:hover{background:var(--on-dark);color:var(--hs-black);border-color:var(--on-dark)}

/* Small tiles (~152px): tighter so title + count + one button never overflow. */
.home-bento__tile--small .home-bento__body{padding:14px 15px}
.home-bento__tile--small .home-bento__actions{gap:6px;margin-top:10px}
.home-bento__tile--small .home-bento__btn{padding:7px 10px;font-size:10.5px}

/* Placeholder tile (no media): flat light block, dark readable text. */
.home-bento__tile--placeholder{background:var(--hs-ph)}
.home-bento__tile--placeholder .home-bento__grad{display:none}
.home-bento__tile--placeholder .home-bento__title{color:var(--hs-black)}
.home-bento__tile--placeholder .home-bento__count{color:var(--mute)}
.home-bento__tile--placeholder .home-bento__btn--ghost{color:var(--hs-black);border-color:rgba(15,18,22,.35)}
.home-bento__tile--placeholder .home-bento__btn--ghost:hover{background:var(--hs-black);color:var(--on-dark);border-color:var(--hs-black)}

/* Secondary tiles (Topper/Kopfkissen/Bettdecken): discreet underlined text-link
   CTAs instead of framed buttons. The container re-enables pointer events so the
   links stay clickable over the whole-tile overlay. */
.home-bento__links{
  display:flex;flex-wrap:wrap;gap:14px;margin-top:12px;
  pointer-events:auto;   /* clickable over the overlay; body stays inert */
}
.home-bento__textlink{
  display:inline-block;
  padding:4px 0;         /* comfortable tap target, still reads as a text link */
  font-size:var(--fs-2xs);font-weight:500;line-height:1;
  color:var(--on-dark);text-decoration:none;white-space:nowrap;
  border-bottom:1px solid rgba(255,255,255,.5);
}
.home-bento__textlink:hover{border-bottom-color:var(--on-dark)}
/* Wide (Topper) sits a touch larger than the small-tile links. */
.home-bento__tile--wide  .home-bento__textlink{font-size:var(--fs-2xs)}
.home-bento__tile--small .home-bento__links{gap:12px;margin-top:10px}
.home-bento__tile--small .home-bento__textlink{font-size:10.5px}
/* Placeholder tiles (no media): dark ink + dark underline for contrast. */
.home-bento__tile--placeholder .home-bento__textlink{color:var(--hs-black);border-bottom-color:rgba(15,18,22,.45)}
.home-bento__tile--placeholder .home-bento__textlink:hover{border-bottom-color:var(--hs-black)}

/* =========================================================================
   3. RESPONSIVE
   ========================================================================= */

/* Video is never shown on touch/reduced-motion; the poster <img> carries it. */
@media (prefers-reduced-motion: reduce){
  .home-hero__video,.home-bento__video{display:none !important}
}

/* --- HEADER: mobile (<=767px) → media (video autoplays like desktop; bento
   stays poster-only) sits in a 250px band with a gradient into the dark; the
   text sits below it, pulled up over the image edge. Matches design option
   3a. --- */
@media (max-width: 760px){
  /* Only the primary tile animates on a phone; the other three stay on their
     poster (no hover to swap them, and three more clips is real mobile data). */
  .home-bento__tile:not([data-primary]) .home-bento__video{display:none}

  .home-hero{
    display:block;
    min-height:0;
  }
  .home-hero__mediazone{
    position:static;
    height:250px;
  }
  .home-hero__media,
  .home-hero__video{position:absolute;object-position:center} /* fills the 250px static zone */
  .home-hero__scrim{
    background:linear-gradient(to top,
       var(--hs-black) 0%,
       rgba(15,18,22,.35) 55%,
       rgba(15,18,22,.06) 100%);
  }
  .home-hero__inner{
    position:relative;
    margin-top:-40px;   /* pull the text up over the image edge */
    padding:0 20px 34px;
  }
  .home-hero__text{max-width:none}
  .home-hero .kicker{font-size:9.5px}
  .home-hero h1{font-size:clamp(30px,8.8vw,40px);line-height:1.06;margin-top:10px}
  .home-hero__lead{font-size:14.5px;line-height:1.55;max-width:none;margin-top:12px}
  .home-hero__cta{flex-direction:column;align-items:stretch;gap:10px;margin-top:20px}
  .home-hero__cta .home-hero__btn{width:100%;padding:15px 18px;font-size:var(--fs-sm);border-width:1px;text-align:center}
}

/* --- BENTO: tablet → 2 columns, Matratzen full-width big, Topper wide banner --- */
@media (max-width: 760px){
  .home-bento__wrap{padding:0 22px}
  .home-bento__grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:148px;gap:12px}
  .home-bento__tile--large{grid-column:1 / -1;grid-row:span 2}
  .home-bento__tile--wide{grid-column:1 / -1;grid-row:span 1}
  .home-bento__tile--small{grid-column:span 1;grid-row:span 1}
  .home-bento__tile--wide .home-bento__body{max-width:70%}
}

/* --- BENTO: phone → Matratzen & Topper full width, small tiles side by side --- */
@media (max-width: 430px){
  .home-bento__grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:auto;gap:10px}
  .home-bento__tile{grid-row:auto;min-height:0}
  .home-bento__tile--large{grid-column:1 / -1;min-height:200px}
  .home-bento__tile--wide{grid-column:1 / -1;min-height:132px}
  .home-bento__tile--small{grid-column:span 1;min-height:140px}
  .home-bento__tile--wide .home-bento__body{max-width:78%}
  .home-bento__actions{gap:8px}
}