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

.sps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  /* v1.4.2: widened 1080 -> 1280. At 1080 the gallery column capped at 581px
     and a 1920 screen carried ~420px of dead margin each side. The three boxed
     sauna blocks (this, sauna-experience, sauna-specs) MUST share this number
     or their left/right edges stop lining up down the page. */
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 12px;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  color: var(--sps-ink, #313638);
  font-family: var(--ff-base), Arial;
  /* v1.4.1: NO top padding. The hero is the first block on the page and sits
     directly under the site header, which brings its own spacing — a top pad
     here was never asked for and only pushed the product down the page. The
     uniform 56px top/bottom rhythm applies to the blocks BELOW this one.
     Bottom padding separates the hero from the benefits band. */
  padding-bottom: 106px;
}

/* containment kit: every layout child may shrink; nothing inflates past the viewport */
.sps > *,
.sps__media > *,
.sps__panel > *,
.sps__feature > *,
.sps__thumbs > *,
.sps__actions > * {
  min-width: 0;
  max-width: 100%;
}
.sps img { max-width: 100%; height: auto; display: block; }

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

/* ---------- header: eyebrow + title + model switcher, centered above the gallery ---------- */
/* v2.1.0 (Charles round 6): the header spans both grid columns and centers, so the
   series eyebrow, product name and size switcher sit ABOVE the gallery on desktop and
   mobile alike. Applies to swim spas AND cold plunge (one module). The eyebrow may
   carry two lines (swim: "Endless Pools" / "<Series> Swim Spas") — .sps__eyebrow-line
   stacks them; a single-line eyebrow (cold plunge) is one line, unchanged. */
.sps__header {
  grid-column: 1 / -1;
  display: grid;
  gap: 12px;
  justify-items: center;
  text-align: center;
}
.sps__header .sps__title { text-wrap: balance; }
.sps__header .sps__toggle { justify-self: center; }
.sps .sps__eyebrow-line { display: block; }

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

.sps__media { display: grid; gap: 14px; align-items: start; }

.sps__stage {
  /* <figure> carries a UA default of margin:1em 40px. The typography pin below
     never listed figure, so the gallery window rendered 40px narrower per side
     than the thumbnail grid beneath it. THIS is why the stage looked inset. */
  margin: 0;
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--br-btn, 3px);
  overflow: hidden;
  background: rgba(0, 0, 0, 0.04);
}
@supports not (aspect-ratio: 4 / 3) {
  .sps__stage { height: 0; padding-bottom: 75%; }
}
.sps .sps__main {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.sps .sps__main--ghost {
  z-index: 1;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.sps__stage--zoom { cursor: zoom-in; }
.sps__stage--zoom:focus-visible { outline: 3px solid var(--sps-accent, #1b74c4); outline-offset: 2px; }

/* v1.3.1: back to 4:3, matching the stage, and 3 across rather than 4 — bigger
   tiles that stack into enough rows to bring the media column up toward the
   height of the text column beside it. Symmetry between the two columns is the
   goal, not the smallest possible filmstrip. */
.sps__thumbs {
  display: grid;
  /* v2.0.0 (Charles): 3-across grid — 9 images fall into 3 rows of 3, 6 into 2 rows of 3. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
/* single-image models (cold plunge) hide the grid — author rule needed to beat display:grid */
.sps__thumbs[hidden] { display: none; }
.sps .sps__thumb {
  padding: 0; border: 0; background: none;
  border-radius: var(--br-btn, 3px);
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 4 / 3;
}
@supports not (aspect-ratio: 4 / 3) {
  .sps .sps__thumb { height: 0; padding-bottom: 75%; position: relative; }
  .sps .sps__thumb img { position: absolute; inset: 0; }
}
.sps .sps__thumb img { width: 100%; height: 100%; object-fit: cover; }
.sps .sps__thumb:focus-visible { outline: 3px solid var(--sps-accent, #1b74c4); outline-offset: 2px; }
.sps .sps__thumb[aria-current="true"] { box-shadow: inset 0 0 0 3px var(--sps-accent, #1b74c4); }
.sps .sps__thumb[aria-current="true"] img { opacity: 0.92; }
@media (hover: hover) {
  .sps .sps__thumb img { transition: transform 0.25s ease; }
  .sps .sps__thumb:hover img { transform: scale(1.04); }
}

.sps__video { position: relative; }
.sps .sps__video-poster {
  position: relative;
  display: block; width: 100%;
  padding: 0; border: 0; background: none;
  border-radius: var(--br-btn, 3px);
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 16 / 9;
}
@supports not (aspect-ratio: 16 / 9) {
  .sps .sps__video-poster { height: 0; padding-bottom: 56.25%; }
}
.sps .sps__video-img { width: 100%; height: 100%; object-fit: cover; }
.sps .sps__video-play {
  position: absolute; left: 14px; bottom: 14px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
}
.sps .sps__video-play em { font-style: normal; font-size: 0.85rem; }
.sps .sps__video-frame {
  width: 100%; aspect-ratio: 16 / 9; border: 0;
  border-radius: var(--br-btn, 3px);
}
@supports not (aspect-ratio: 16 / 9) {
  .sps .sps__video-frame { height: 0; padding-bottom: 56.25%; }
}

/* ---------- panel ---------- */

.sps__panel {
  background: var(--sps-panel-bg, #fff);
  /* v1.4.3: the panel card matches the page's corner language (buttons and
     every image), rather than its own 14px+6px slider. */
  border-radius: var(--br-btn, 3px);
  padding: 26px 22px 30px;
  box-shadow: 0 10px 34px rgba(20, 30, 40, 0.08);
  display: grid;
  gap: 18px;
  align-content: start;
}

/* v1.3.0: matched to the hot tub hero's product title (.scspd__model) so the
   two product-page families read as one system. Was 2rem/400 — much lighter. */
.sps .sps__title {
  font-family: var(--ff-accent), Arial;
  font-size: clamp(1.9rem, 4vw, 3rem);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* v1.2.0: an author rule with a class selector outranks the UA [hidden] rule,
   so hiding the size toggle needs this explicit line, not just the attribute. */
.sps__toggle[hidden] { display: none; }
.sps__toggle {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(20, 30, 40, 0.06);
  justify-self: start;
}
.sps .sps__chip {
  border: 1px solid transparent;
  background: none;
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 0.95rem;
  cursor: pointer;
  color: inherit;
}
/* v1.3.0: in link mode the chips are anchors to each size's own page, so they
   need the anchor resets and aria-current instead of aria-pressed. */
.sps a.sps__chip { text-decoration: none; display: inline-block; }
.sps .sps__chip[aria-pressed="true"],
.sps .sps__chip[aria-current="true"] {
  background: #fff;
  border-color: var(--sps-accent, #1b74c4);
  color: var(--sps-accent, #1b74c4);
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(20, 30, 40, 0.12);
}
.sps .sps__chip:focus-visible { outline: 3px solid var(--sps-accent, #1b74c4); outline-offset: 2px; }

/* v2.0.0 hero copy (Charles): eyebrow (series label) + subtitle (model tagline) match
   the live endless-pools pages; dims drops to a quiet secondary line under them. */
.sps .sps__eyebrow {
  font-family: var(--ff-base), Arial;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sps-accent, #1b74c4);
}
.sps .sps__subtitle {
  font-family: var(--ff-accent), Arial;
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.3;
}
.sps__eyebrow[hidden], .sps__subtitle[hidden],
.sps__usecases[hidden], .sps__usecases-head[hidden] { display: none; }

.sps .sps__dims { font-size: 0.96rem; opacity: 0.72; }
.sps .sps__desc { line-height: 1.55; }

/* "How do people use their Swim Spa?" — heading + the use-case icon list, divided off
   from the product copy above it. */
.sps__usecases {
  padding: 20px 0 0;
  border-top: 1px solid rgba(20, 30, 40, 0.12);
  display: grid;
  gap: 14px;
}
.sps .sps__usecases-head {
  font-family: var(--ff-accent), Arial;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.25;
}
.sps__features {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 16px;
}
.sps .sps__feature { display: flex; gap: 14px; align-items: flex-start; }
.sps .sps__ficon { flex: 0 0 44px; }
.sps .sps__ficon svg { width: 44px; height: 44px; display: block; }
.sps .sps__ftext { display: grid; gap: 3px; }
.sps .sps__ftitle { font-size: 1.02rem; }
.sps .sps__fblurb { line-height: 1.45; }

.sps__actions { display: grid; gap: 12px; justify-items: start; padding-top: 6px; }
.sps .sps__cta {
  display: inline-block;
  background: var(--sps-accent, #1b74c4);
  color: #fff;
  text-decoration: none;
  /* v1.3.2 sec.3 UNIFORM BY DEFAULT: every geometry property is one of the
     THEME'S OWN button tokens, never a literal. POWER ships --br-btn/--ff-btn/
     --fs-btn/--fw-btn/--ls-btn and hardcodes padding:15px 21px, which is why
     --pad-btn carries that literal as its fallback. */
  border-radius: var(--br-btn, 3px);
  padding: var(--pad-btn, 15px 21px);
  font-family: var(--ff-btn), Arial;
  font-size: var(--fs-btn, 13px);
  font-weight: var(--fw-btn, 800);
  letter-spacing: var(--ls-btn, 0px);
}
@media (hover: hover) {
  .sps .sps__cta { transition: filter 0.2s ease; }
  .sps .sps__cta:hover { filter: brightness(1.12); }
}
.sps .sps__cta:focus-visible { outline: 3px solid var(--sps-ink, #313638); outline-offset: 2px; }
.sps .sps__sheet { color: inherit; font-size: 0.92rem; }

/* ---------- lightbox ---------- */

.sps__lb {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(10, 14, 18, 0.92);
  display: grid; place-items: center;
}
.sps .sps__lb-img {
  max-width: min(92vw, 1200px);
  max-height: 84vh;
  width: auto; height: auto;
  border-radius: 8px;
}
.sps .sps__lb-count {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  color: #fff; font-size: 0.9rem;
}
.sps .sps__lb-btn {
  position: fixed;
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff; cursor: pointer;
}
.sps .sps__lb-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.sps .sps__lb-btn--close { top: 18px; right: 18px; }
.sps .sps__lb-btn--prev { left: 14px; top: 50%; transform: translateY(-50%); }
.sps .sps__lb-btn--next { right: 14px; top: 50%; transform: translateY(-50%); }
.sps-noscroll { overflow: hidden; }

/* ---------- screen-reader live region (visually hidden, never display:none) ---------- */

.sps .sps__sr-live {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- desktop ---------- */

@media (min-width: 900px) {
  .sps {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 44px;
  }
  .sps__panel { padding: 34px 34px 38px; }
  /* title size is handled by the clamp() above — no desktop override needed */
}

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

@media (max-width: 640px) {
  .sps { gap: 20px; padding-bottom: 66px; }
  .sps__thumbs { gap: 10px; }
  .sps .sps__chip { padding: 7px 14px; font-size: 0.9rem; }
  .sps__panel { padding: 20px 16px 24px; }
  /* mirrors the hot tub hero's mobile title step (.scspd__model @767px) */
  .sps .sps__title { font-size: clamp(1.6rem, 8vw, 2.1rem); }
  .sps__thumbs { gap: 8px; }
}

/* v2.1.2 (Charles): swim mobile centering covers PHONE + TABLET — the whole
   single-column range (< 900px, where the 2-col desktop layout collapses), not the
   phone-only 640px breakpoint. Centers subtitle, the two-line dimensions, the
   use-case heading and the CTA on swim spas; the body description + icon list stay
   left-aligned; cold plunge keeps its left layout (never gets .sps--swim). */
@media (max-width: 899px) {
  .sps--swim .sps__subtitle,
  .sps--swim .sps__dims,
  .sps--swim .sps__usecases-head { text-align: center; }
  .sps--swim .sps__dim-line { display: block; }
  .sps--swim .sps__actions { justify-items: center; }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .sps .sps__main--ghost { transition: none; }
  .sps .sps__thumb img, .sps .sps__cta { transition: none; }
}