/* sauna-benefits.module v1.0.0 — all rules scoped under .sbf ; no HubL in this file */

.sbf {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  color: var(--sbf-ink, #313638);
  font-family: var(--ff-base), Arial;
  /* v1.1.0: a warm tint gives the block a clean top and bottom edge against the
     white hero above and the white experience block below. */
  background: var(--sbf-bg, #f2ede6);
  align-items: center;
}

/* containment kit: every layout child may shrink; nothing inflates past the viewport */
.sbf > *,
.sbf__body > *,
.sbf__item > * {
  min-width: 0;
  max-width: 100%;
}

.sbf img { max-width: 100%; height: auto; display: block; }

/* typography pins: never inherit the theme's mobile spacing */
.sbf h2, .sbf p, .sbf ul, .sbf li, .sbf strong, .sbf span {
  line-height: 1.4;
  margin: 0;
}

/* ---------- media ---------- */

/* Source images are PORTRAIT (720x854). A 4:3 mobile frame would crop the top
   and bottom off a lifestyle shot, so the stacked layout stays near-square. */
.sbf__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
@supports not (aspect-ratio: 4 / 5) {
  .sbf__media { height: 0; padding-bottom: 125%; }
}
.sbf .sbf__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* ---------- body ---------- */

.sbf__body {
  display: grid;
  gap: 22px;
  align-content: center;
  padding: 56px 20px;
  max-width: 620px;
  justify-self: center;
  width: 100%;
}

/* v1.2.0: matched to the estate's section headings via the theme's own
   heading tokens — --ff-h2 (Poppins) / --fw-h2 (700) / --ls-h2 (-1px). Was
   weight 400, which read as a different typeface next to every other heading. */
.sbf .sbf__head {
  font-family: var(--ff-h2), var(--ff-accent), Arial;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: var(--fw-h2, 700);
  line-height: 1.14;
  letter-spacing: var(--ls-h2, -0.01em);
}

.sbf .sbf__intro { font-size: 1.02rem; line-height: 1.6; opacity: 0.9; }

.sbf__list {
  list-style: none;
  padding: 26px 0 0;
  border-top: 1px solid rgba(20, 30, 40, 0.16);
  display: grid;
  gap: 24px;
}

.sbf .sbf__item { display: flex; gap: 14px; align-items: flex-start; }
.sbf .sbf__tick { flex: 0 0 20px; color: var(--sbf-accent, #1b74c4); margin-top: 2px; }
.sbf .sbf__tick svg { display: block; }
.sbf .sbf__text { display: grid; gap: 6px; }
.sbf .sbf__title { font-family: var(--ff-accent), Arial; font-size: 1.02rem; font-weight: 700; }
.sbf .sbf__blurb { line-height: 1.55; opacity: 0.88; }

/* ---------- v1.4.0 (Lane C3 2026-07-28): opt-in dark mode ----------
   Triggered by theme.dark=true (set on the module placement). Background + text come
   from the theme fields (--sbf-bg / --sbf-ink), so all copy inherits the light ink and
   the checkmarks keep --sbf-accent. The ONLY element that doesn't adapt on its own is the
   list divider, which is a hardcoded dark hairline — flip it to a light hairline here.
   Kept opt-in so the shared sauna/swim/cold/jets Benefits instances are untouched. */
.sbf--dark .sbf__list { border-top-color: var(--sbf-accent, #0075c9); }  /* v1.4.1: blue border line to match the dark scheme (Charles 2026-07-29) */
/* The estate child.css forces `color:#171b25 !important` on .sbf__head/intro/title/blurb
   (single-class specificity). On dark that would be black-on-black, so beat it with a
   higher-specificity !important that pulls the light ink instead. */
.sbf--dark .sbf__head,
.sbf--dark .sbf__intro,
.sbf--dark .sbf__title,
.sbf--dark .sbf__blurb { color: var(--sbf-ink, #f5f7f8) !important; }

/* ---------- desktop: full-bleed image beside a boxed text column ---------- */

@media (min-width: 900px) {
  .sbf { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

  /* ==== SEAM ALIGNMENT TO THE HERO (Charles 2026-07-27) ====================
     The image edge and the text edge must line up with the gallery edge and
     the panel edge in sauna-showcase directly above, so one vertical seam runs
     down the page.

     They do not line up for free: this block is FULL-BLEED (0 -> viewport)
     while the hero is a CENTERED 1280px box, so the two have different left
     origins. Measured before this rule: gallery overhung the image by 68px and
     the panel sat 56px right of the heading.

     The column below reconstructs the hero's own geometry:
       gutter   max(0, (100% - 1280) / 2)      centering offset of the hero box
       + 12px                                  the hero's side padding
       + (min(100%,1280) - 68px) * 0.5745      its media column
                                               68 = 24 side padding + 44 gap
                                               0.5745 = 1.35fr / (1.35fr + 1fr)
     then padding-left:44px on the text jumps the hero's 44px column gap.

     100% (not 100vw) on purpose — 100vw includes the scrollbar and would throw
     this off by ~15px.

     THESE NUMBERS MIRROR sauna-showcase. If its max-width, side padding, grid
     ratio or gap change, this breaks silently — the page just stops aligning.
     ======================================================================== */
  .sbf--left {
    grid-template-columns:
      calc(max(0px, (100% - 1280px) / 2) + 12px + (min(100%, 1280px) - 68px) * 0.5745)
      minmax(0, 1fr);
  }
  .sbf--left .sbf__body { padding-left: 44px; max-width: 616px; }
  .sbf__media { aspect-ratio: auto; height: 100%; min-height: 620px; }
  @supports not (aspect-ratio: 4 / 5) {
    .sbf__media { height: 100%; padding-bottom: 0; }
  }
  .sbf__body { padding: 56px; justify-self: start; }

  /* image-right variant flips the columns without reordering the DOM, so the
     heading still comes first for screen readers and keyboard order. */
  .sbf--right .sbf__media { grid-column: 2; grid-row: 1; }
  .sbf--right .sbf__body  { grid-column: 1; grid-row: 1; justify-self: end; }
}

/* ---------- mobile ---------- */

@media (max-width: 640px) {
  .sbf__body { padding: 36px 16px; gap: 18px; }
  .sbf__list { gap: 20px; padding-top: 22px; }
}

/* ---------- v1.2.0 (Lane C 2026-07-28): text-forward variant ---------- */
/* Hot tub renders with no media column until a hero image is chosen: a single centered
   editorial column on the #f5f5f5 band. Overrides the desktop 2-col grid (declared after
   it in source order so it wins at equal specificity). The sauna seam-align (.sbf--left)
   is deliberately NOT applied here — no showcase sits above the hot tub block. */
.sbf--no-media .sbf__body { justify-self: center; max-width: 760px; }
@media (min-width: 900px) {
  .sbf--no-media { grid-template-columns: minmax(0, 1fr); }
  .sbf--no-media .sbf__body { padding: 64px 24px; }
}

/* ---------- v1.3.0 (Lane C 2026-07-28): hot-tub lifestyle carousel + lightbox ---------- */
/* The media column becomes a swipeable landscape carousel (JS builds it from module.js,
   keyed by the model). Full-bleed #f5f5f5 band, content boxed and centred; on desktop the
   carousel sits beside the text. The sauna seam-align (.sbf--left) is not used here. */
.sbf__gallery {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: rgba(0, 0, 0, 0.05);
  border-radius: var(--br-btn, 3px);
  min-width: 0;
}
@supports not (aspect-ratio: 3 / 2) { .sbf__gallery { height: 0; padding-bottom: 66.66%; } }
.sbf-car__track { display: flex; height: 100%; transition: transform 0.38s ease; }
.sbf-car__img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }
.sbf-car__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.9); color: #1b1f22;
  font-size: 24px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.28);
}
.sbf-car__prev { left: 10px; }
.sbf-car__next { right: 10px; }
.sbf-car__nav:hover { background: #fff; }
.sbf-car__dots { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; gap: 7px; justify-content: center; }
.sbf-car__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.55); cursor: pointer; }
.sbf-car__dot[aria-selected="true"] { background: #fff; }
.sbf-car__img:focus-visible { outline: 3px solid var(--sbf-accent, #1b74c4); outline-offset: -3px; }

/* lightbox — appended to <body> by JS */
.sbf-lb { position: fixed; inset: 0; z-index: 99999; background: rgba(10, 12, 14, 0.93); display: flex; align-items: center; justify-content: center; }
.sbf-lb[aria-hidden="true"] { display: none; }
.sbf-lb__img { max-width: 92vw; max-height: 88vh; object-fit: contain; border-radius: 2px; }
.sbf-lb__close { position: absolute; top: 16px; right: 20px; width: 44px; height: 44px; border: 0; background: transparent; color: #fff; font-size: 34px; line-height: 1; cursor: pointer; }
.sbf-lb__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 54px; height: 54px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.14); color: #fff; font-size: 30px; line-height: 1; cursor: pointer; }
.sbf-lb__prev { left: 3vw; }
.sbf-lb__next { right: 3vw; }
.sbf-lb__nav:hover { background: rgba(255, 255, 255, 0.26); }

/* Content split (Charles 2026-07-28 "fill the entire window like a content split"): the
   carousel fills the LEFT half of the window edge-to-edge; the text sits in the right half.
   The gallery stretches to the block height instead of a fixed aspect ratio. */
.sbf--gallery { align-items: stretch; }
@media (min-width: 900px) {
  .sbf--gallery { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sbf--gallery .sbf__gallery { grid-column: 1; aspect-ratio: auto; height: 100%; min-height: 460px; padding-bottom: 0; }
  .sbf--gallery .sbf__body { grid-column: 2; padding: 56px; max-width: 640px; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) { .sbf-car__track { transition: none; } }