/* spa-jet-system static styles — externalized from inline <style> for caching/minification (v1.3.2 perf pass). Dynamic --sjs-src-base stays inline in module.html due to  scoping. */
.sjs { color: var(--sjs-txt); font-family: var(--sjs-ff-b); padding: var(--sjs-pt) 16px var(--sjs-pb); }
.sjs *, .sjs *::before, .sjs *::after { box-sizing: border-box; }
.sjs__inner { max-width: 1200px; margin: 0 auto; }
.sjs__heading { font-family: var(--sjs-ff-h); text-align: center; font-size: clamp(1.6rem, 3vw, 2.4rem); margin: 0 0 .4rem; }

.sjs__grid {
  display: grid; gap: clamp(16px, 3vw, 40px); align-items: start;
  /* equal side columns keep the overhead column page-centered under the heading */
  grid-template-columns: 1fr 1.4fr 1fr;
  grid-template-areas: "text overhead body";
}
.sjs--img-right .sjs__grid { grid-template-areas: "body overhead text"; }
.sjs__zone--overhead { grid-area: overhead; }
.sjs__zone--body { grid-area: body; }
.sjs__zone--text { grid-area: text; }

/* ZONE 1 overhead stage — square, iOS-safe */
.sjs__stage { position: relative; width: 100%; }
.sjs__stage::before { content: ""; display: block; padding-top: 100%; }
@supports (aspect-ratio: 1 / 1) {
  .sjs__stage { aspect-ratio: 1 / 1; }
  .sjs__stage::before { display: none; }
}
.sjs__overhead, .sjs__sil { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }

/* ZONE 2 body — natural portrait height (SVG is 171x461); the base image sets the size */
.sjs__bodystage { position: relative; width: 100%; max-width: 168px; margin: 0 auto; }
.sjs__bodybase { display: block; width: 100%; height: auto; }
.sjs__bodyseat, .sjs__bodyoverlay { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }

.sjs__sil, .sjs__bodyseat, .sjs__bodyoverlay { opacity: 0; }
.sjs:not([data-transition="none"]) .sjs__sil,
.sjs:not([data-transition="none"]) .sjs__bodyseat,
.sjs:not([data-transition="none"]) .sjs__bodyoverlay { transition: opacity var(--sjs-ms) ease; }
.sjs__sil.is-on, .sjs__bodyseat.is-on, .sjs__bodyoverlay.is-on { opacity: 1; }

.sjs__markers { position: absolute; inset: 0; }
.sjs__marker {
  position: absolute; width: var(--sjs-sw); height: var(--sjs-sw);
  transform: translate(-50%, -50%); border-radius: 50%; border: none; cursor: pointer; padding: 0;
  background: var(--sjs-acc);
  background: color-mix(in srgb, var(--sjs-acc) 72%, transparent);
  color: #fff; display: grid; place-items: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.sjs__marker::before { content: "+"; font-size: calc(var(--sjs-sw) * 0.6); line-height: 1; font-weight: 400; }
.sjs__marker:hover { transform: translate(-50%, -50%) scale(1.04); }
.sjs__marker.is-active { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--sjs-acc); }
.sjs__marker:focus-visible { outline: 3px solid var(--sjs-acc); outline-offset: 3px; }

.sjs__helper { text-align: center; font-size: clamp(.95rem, 1.6vw, 1.1rem); opacity: .7; margin: 0 0 1.8rem; }

/* ZONE 3 text */
.sjs__seat-title { font-family: var(--sjs-ff-h); font-size: clamp(1.2rem, 2vw, 1.6rem); margin: 0 0 .5rem; }
.sjs__seat-desc { margin: 0 0 1.2rem; line-height: 1.5; }
.sjs__jets { border-top: 1px solid rgba(0,0,0,.12); }
.sjs__jet { border-bottom: 1px solid rgba(0,0,0,.12); }
.sjs__jet-head {
  width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 4px; font: inherit; font-weight: 600; color: inherit;
}
.sjs__jet-head:focus-visible { outline: 2px solid var(--sjs-acc); outline-offset: 2px; }
.sjs__jet-head .sjs__chev { transition: transform var(--sjs-ms) ease; flex: 0 0 auto; }
.sjs__jet.is-open .sjs__chev { transform: rotate(180deg); }
.sjs__jet-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--sjs-ms) ease; }
.sjs__jet.is-open .sjs__jet-body { grid-template-rows: 1fr; }
.sjs__jet-body-inner { overflow: hidden; min-height: 0; }
.sjs__jet-body-inner > p { margin: 0; padding: 2px 4px 16px; line-height: 1.5; }

/* CTA */
.sjs__cta-wrap { margin-top: 1.4rem; }
.sjs__btn {
  display: inline-block; background: var(--sjs-acc); color: var(--sjs-btn-txt-lt,#fff);
  border: none; border-radius: var(--sjs-r); padding: 12px 22px; font: inherit; font-weight: 600;
  cursor: pointer; text-decoration: none;
}
.sjs__btn:focus-visible { outline: 3px solid var(--sjs-acc); outline-offset: 3px; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .sjs__sil, .sjs__bodyseat, .sjs__bodyoverlay, .sjs__chev, .sjs__jet-body, .sjs__marker { transition: none !important; }
}

/* MOBILE */
@media (max-width: 767px) {
  .sjs { --sjs-sw: 24px !important; }
  .sjs__grid,
  .sjs--img-right .sjs__grid {
    grid-template-columns: 2fr 1fr !important;
    grid-template-areas: "overhead body" "text text" !important;
    gap: 10px;
    align-items: center;
  }
  .sjs__zone--body { max-width: none; margin: 0; justify-self: end; }
  .sjs__bodystage { max-width: 95px; }
  .sjs__seat-title, .sjs__seat-desc, .sjs__helper { text-align: center; }
  .sjs__jet-head { text-align: left; }
  .sjs__cta-wrap { text-align: center; }
  .sjs__btn { display: block; width: 100%; }
}

/* Live region (visually hidden) */
.sjs__live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Lightbox (video + form) */
.sjs-lb { position: fixed; inset: 0; z-index: 99999; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,.7); padding: 20px; }
.sjs-lb.is-open { display: flex; }
.sjs-lb__panel { position: relative; width: min(880px, 96vw); background: #fff; border-radius: 14px; overflow: hidden; }
.sjs-lb__panel--form { padding: 28px; max-height: 88vh; overflow: auto; }
.sjs-lb__panel--form iframe { width: 100%; border: 0; min-height: min(70vh, 640px); }
.sjs-lb__close { position: absolute; top: 8px; right: 8px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(0,0,0,.55); color: #fff; font-size: 22px; cursor: pointer; }
.sjs-lb__close:focus-visible { outline: 3px solid var(--sjs-acc,#007681); outline-offset: 2px; }
.sjs-lb__head { margin: 0 0 14px; font-size: 1.3rem; }