/* sauna-experience.module v1.0.0 — all rules scoped under .sxp ; no HubL in this file
   Card visual follows spa-accessories: image on top, title and copy below.
   Horizontal scroll row with scroll-snap — CSS only, no JS file needed. */

.sxp {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  color: var(--sxp-ink, #313638);
  font-family: var(--ff-base), Arial;
  background: var(--sxp-bg, transparent);
  /* v1.1.0 UNIFORM BLOCK RHYTHM — same value in all four sauna blocks. */
  padding: 56px 0;
}

/* v1.1.1: 1280 to match sauna-showcase and sauna-specs — the three boxed
   sauna blocks share one container width so their edges align. */
.sxp__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 12px;
}

.sxp__inner > * { min-width: 0; max-width: 100%; }
.sxp img { max-width: 100%; height: auto; display: block; }

.sxp h2, .sxp h3, .sxp p, .sxp ul, .sxp li {
  line-height: 1.4;
  margin: 0;
}

/* v1.1.0: matched to the estate's section headings. The theme defines
   --ff-h2 (Poppins) / --fw-h2 (700) / --ls-h2 (-1px) and wires them to its
   options panel; this was rendering at weight 400, which is why it read as a
   different family from every other heading on the page. */
.sxp .sxp__title {
  font-family: var(--ff-h2), var(--ff-accent), Arial;
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  font-weight: var(--fw-h2, 700);
  line-height: 1.15;
  letter-spacing: var(--ls-h2, -0.01em);
}

.sxp .sxp__intro {
  margin-top: 12px;
  max-width: 56ch;
  font-size: 1.02rem;
  line-height: 1.6;
  opacity: 0.9;
}

/* ---------- card row ---------- */

.sxp .sxp__row {
  list-style: none;
  padding: 0;
  /* .sxp__row alone is (0,1,0) and LOSES to the typography pin ".sxp ul" (0,1,1),
     which sets margin:0 -- so this spacing silently never applied and the cards
     rendered flush against the intro. Measured 0px on the live page 2026-07-27.
     The .sxp prefix raises this to (0,2,0). */
  margin-top: 56px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 1fr);
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* room for the scrollbar so it never overlaps the card */
  padding-bottom: 14px;
  overscroll-behavior-x: contain;
}

.sxp .sxp__card {
  scroll-snap-align: start;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 14px;
}

.sxp__media {
  position: relative;
  aspect-ratio: 4 / 3;
  /* image corners match the buttons, per Charles 2026-07-27 */
  border-radius: var(--br-btn, 3px);
  overflow: hidden;
  background: rgba(0, 0, 0, 0.04);
}
@supports not (aspect-ratio: 4 / 3) {
  .sxp__media { height: 0; padding-bottom: 75%; }
}
.sxp .sxp__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

.sxp__body { display: grid; gap: 7px; align-content: start; }
.sxp .sxp__card-title { font-family: var(--ff-accent), Arial; font-size: 1.06rem; font-weight: 700; }
.sxp .sxp__card-copy { line-height: 1.55; opacity: 0.88; }

/* ---------- desktop: all four visible, no scrolling ---------- */

@media (min-width: 900px) {
  .sxp .sxp__row {
    grid-auto-flow: row;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow-x: visible;
    padding-bottom: 0;
  }
}

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

@media (max-width: 640px) {
  .sxp { padding: 36px 0; }
  .sxp .sxp__row { grid-auto-columns: minmax(220px, 78vw); gap: 16px; margin-top: 36px; }
}

/* ---------- v1.2.0 (Charles swim revision): accordion cards + >4 carousel ---------- */

/* Native <details> accordion — swim spa / cold plunge only (sauna keeps h3 + p).
   The blurb is collapsed behind the title; a chevron rotates open. No JS. */
.sxp .sxp__acc { gap: 0; }
.sxp .sxp__acc-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
}
.sxp .sxp__acc-summary::-webkit-details-marker { display: none; }
.sxp .sxp__acc-summary::after {
  content: "";
  flex: 0 0 auto;
  width: 9px; height: 9px;
  margin-right: 2px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  opacity: 0.55;
}
.sxp .sxp__acc[open] .sxp__acc-summary::after { transform: rotate(-135deg); }
.sxp .sxp__acc .sxp__card-copy { padding-top: 8px; }
.sxp .sxp__acc-summary:focus-visible { outline: 3px solid var(--sxp-ink, #313638); outline-offset: 3px; }

/* Carousel viewport + arrows (>4 cards: E2000 / X2000's 5th dual-temp card). Cards are
   a FIXED 1/4 width so exactly 4 show and the rest overflow into a horizontal scroll.
   (minmax(0,..) let the cards SHRINK to fit all 5 = a static 5-col grid — the bug Charles
   caught.) The arrows scroll it; JS hides prev at the start / next at the end. */
.sxp__viewport { position: relative; }
.sxp .sxp__arrow {
  position: absolute;
  top: 30%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 3px 14px rgba(20, 30, 40, 0.22);
  color: var(--sxp-ink, #313638);
  cursor: pointer;
}
.sxp .sxp__arrow--prev { left: 4px; }
.sxp .sxp__arrow--next { right: 4px; }
.sxp .sxp__arrow[hidden] { display: none; }
.sxp .sxp__arrow:focus-visible { outline: 3px solid var(--sxp-ink, #313638); outline-offset: 2px; }
@media (hover: hover) {
  .sxp .sxp__arrow { transition: filter 0.15s ease; }
  .sxp .sxp__arrow:hover { filter: brightness(0.94); }
}

@media (min-width: 900px) {
  .sxp--carousel .sxp__row {
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: calc((100% - 3 * 20px) / 4);
    overflow-x: auto;
    padding-bottom: 14px;
    scroll-behavior: smooth;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sxp .sxp__acc-summary::after { transition: none; }
  .sxp--carousel .sxp__row { scroll-behavior: auto; }
}