/* sauna-showcase.module v1.1.1 — all rules scoped under .sps ; no HubL in this file
   v1.1.0 (Charles round 6): centered header (eyebrow + title + size switcher) above the
   gallery; new constant "Tylö Saunas" eyebrow.
   v1.1.1 (Charles): gallery 3-across to match Endless Pools (kills trailing white space);
   Get Pricing button center-justified on PHONE only (tablet stays left, Charles's call). */

.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 + size switcher, centered above the gallery ---------- */
/* v1.1.0 (Charles round 6): the header spans both grid columns and centers, so the
   "Tylö Saunas" eyebrow, the sauna name and the size switcher sit above the gallery on
   desktop, tablet and phone alike (viewport-agnostic — no breakpoint needed). Saunas
   had no eyebrow before, so its type is defined here to match the estate accent label. */
.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 {
  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);
  margin: 0;
}

/* ---------- 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;
  /* v1.1.1 (Charles): 3-across to match the Endless Pools gallery — 6 images fall into
     two rows of three, so the media column stops out-stretching the text column and the
     trailing white space under the icon list + CTA is gone. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.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; }

.sps .sps__dims { font-size: 1.02rem; }
.sps .sps__desc { line-height: 1.55; }

.sps__features {
  list-style: none;
  padding: 18px 0 0;
  border-top: 1px solid rgba(20, 30, 40, 0.12);
  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; }
  /* v1.1.1 (Charles): center the Get Pricing button on PHONE only. Deliberate exception
     to the "mobile covers tablet" rule — Charles's call: centered on phone reads right,
     but on tablet (641-899px) a centered button looks out of place, so it stays left. */
  .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; }
}