/* ===================================================================
   Sliding Panels V2 — Nested Swiper architecture
   Parent Swiper (1 slide per stack) + Child Swipers (multi-panel stacks)
   =================================================================== */

/* --- Component wrapper --- */
.sp2-component {
  position: relative;
}

/* --- Swiper container: locked to viewport height --- */
.sp2-component .sp2-swiper {
  overflow: hidden;
  position: relative;
  width: 100%;
}

@media (min-width: 992px) {
  .sp2-component .sp2-swiper {
    height: 100vh;
    height: 100dvh;
  }
}

/* --- Slides: let Swiper set height via inline styles.
      Do NOT override with !important — it breaks Swiper's
      translate calculations. Use 100% to fill the container. --- */
.sp2-component .sp2-swiper .swiper-slide {
  height: auto;
  width: 100%;
}

/* --- Card: fills slide --- */
.sp2-component .sp2-card {
  width: 100%;
}

@media (min-width: 992px) {
  .sp2-component .sp2-card {
    height: 100%;
  }
}

/* --- Stage: container-constrained grid (matches v1 structure) --- */
.sp2-component .sp2-card .stage {
  width: 100%;
}

@media (min-width: 992px) {
  .sp2-component .sp2-card .stage {
    height: 100%;
    grid-template-rows: 1fr;
  }

  /* Media column: fill grid cell.
     overflow: visible allows the bg bleed to extend past the column edge
     to the viewport edge; sp2-card (overflow:hidden, full-width) clips it. */
  .sp2-component .sp2-card .stage > .media {
    height: 100%;
    min-height: 0;
    overflow: visible;
  }

  /* Content column: fill grid cell, internal scroll */
  .sp2-component .sp2-card .stage > .content {
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }
}

/* --- Content scroll area (desktop) --- */
@media (min-width: 992px) {
  .sp2-component .sp2-content-scroll {
    overflow-y: auto;
    height: 100%;
    max-height: 100%;
    scrollbar-width: none;
    -ms-overflow-style: none;
    flex: 1 1 auto;
  }

  /* Padding only when content actually overflows (class toggled by JS).
     Provides breathing room so content clears the sticky nav at top
     and has space at the bottom during scroll. */
  .sp2-component .sp2-content-scroll.is-scrollable {
    padding-top: 25rem;
    padding-bottom: 5rem;
  }

  .sp2-component .sp2-content-scroll::-webkit-scrollbar {
    display: none;
  }
}

/* --- Static/mobile mode: stacked column --- */
.sp2-component .sp2-swiper.sp2-static {
  height: auto !important;
  overflow: visible;
}

.sp2-component .sp2-swiper.sp2-static .swiper-wrapper {
  display: flex;
  flex-direction: column;
  transform: none !important;
}

.sp2-component .sp2-swiper.sp2-static .swiper-slide {
  height: auto !important;
}

.sp2-component .sp2-swiper.sp2-static .sp2-card {
  height: auto;
  max-height: none;
}

/* --- Unsnapped stacks: normal scrollable flow outside the Swiper --- */
.sp2-unsnapped-stack {
  position: relative;
  width: 100%;
  height: auto;
}

.sp2-unsnapped-stack .sp2-card {
  height: auto;
}

.sp2-unsnapped-stack .sp2-card .stage {
  height: auto;
}

@media (min-width: 992px) {
  .sp2-unsnapped-stack .sp2-card .stage {
    height: auto;
    grid-template-rows: auto;
  }

  .sp2-unsnapped-stack .sp2-card .stage > .media {
    height: auto;
    min-height: 400px;
  }

  .sp2-unsnapped-stack .sp2-card .stage > .content {
    height: auto;
    overflow: visible;
  }

  .sp2-unsnapped-stack .sp2-content-scroll {
    overflow-y: visible;
    height: auto;
    max-height: none;
  }
}

/* Multi-panel unsnapped: show all child slides stacked, no swiper behavior */
.sp2-unsnapped-stack .sp2-child-swiper,
.sp2-unsnapped-stack .sp2-child-swiper .swiper-wrapper {
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  transform: none !important;
}

.sp2-unsnapped-stack .sp2-child-swiper .swiper-slide {
  height: auto !important;
  width: 100% !important;
}

.sp2-unsnapped-stack .sp2-child-pagination {
  display: none;
}

/* All media layers visible and stacked for unsnapped */
.sp2-unsnapped-stack .sp2-media-layer {
  position: relative !important;
  opacity: 1 !important;
  transform: none !important;
}

/* --- Image title sticky overlay (inside media column, matches v1) --- */
.sp2-component .image-title-sticky {
  z-index: 10;
}

/* ---------------------------------------------------------------
   Mobile + Tablet: image-title-sticky appears ABOVE the image
   (not overlaid); media column becomes flex column for ordering
   --------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .sp2-component .media {
    display: flex;
    flex-direction: column;
    max-height: none;
  }

  /* image container second visually */
  .sp2-component .media .bg {
    order: 2;
    flex-shrink: 0;
  }

  /* title/description block first visually, static flow */
  .sp2-component .image-title-sticky {
    order: 1;
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* ---------------------------------------------------------------
   Mobile: 1:1 (square) aspect ratio for the image
   --------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .sp2-component .media .bg {
    aspect-ratio: 1 / 1;
    position: relative;
    overflow: hidden;
  }

  .sp2-component .media .bg picture,
  .sp2-component .media .bg video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .sp2-component .media .bg img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* ---------------------------------------------------------------
   Tablet: 16:9 aspect ratio for the image
   --------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 991.98px) {
  .sp2-component .media .bg {
    aspect-ratio: 16 / 9;
    position: relative;
    overflow: hidden;
  }

  .sp2-component .media .bg picture,
  .sp2-component .media .bg video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .sp2-component .media .bg img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}


/* ===================================================================
   Multi-panel stack: media layers + child Swiper
   =================================================================== */

/* --- Stack multi wrapper --- */
.sp2-stack-multi {
  width: 100%;
  height: 100%;
}

/* --- Multi-panel stacks: hide shared media column on mobile/tablet --- */
/* Per-panel mobile media is rendered inside each child slide instead. */
.sp2-stack-multi .media {
  display: none;
}

/* --- Per-panel media layers (crossfade on child slide change) --- */
/* Mobile: show only first layer (fallback for non-multi stacks) */
.sp2-media-layer:not(:first-child) {
  display: none;
}

@media (min-width: 992px) {
  .sp2-media-layer {
    display: block !important;
    position: absolute;
    inset: 0;
    transform: translateY(100%);
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 0;
    /* overflow: visible — bleed is clipped by sp2-card (overflow:hidden, full-width);
       vertical clipping of translateY layers is also handled by sp2-card. */
    overflow: visible;
  }

  /* Layers behind the active one: pinned at origin, lower z */
  .sp2-media-layer.is-prev {
    transform: translateY(0);
    z-index: 1;
  }

  /* Active layer: visible at origin, on top */
  .sp2-media-layer.is-active {
    transform: translateY(0);
    z-index: 2;
  }

  /* Media column: positioning context for layers.
     overflow: visible so the bleed extends to sp2-card boundary. */
  .sp2-stack-multi .media {
    display: block;
    position: relative;
    overflow: visible;
  }

  /* image-title-sticky floats above all media layers */
  .sp2-stack-multi .image-title-sticky {
    z-index: 30;
  }
}

/* --- Child Swiper (vertical, inside content column) --- */
.sp2-child-swiper {
  width: 100%;
  overflow: hidden;
  position: relative;
}

@media (min-width: 992px) {
  .sp2-child-swiper {
    height: 100%;
  }

  .sp2-child-swiper .swiper-slide {
    height: 100%;
    overflow-y: auto;
  }
}

/* --- Child Swiper: static/mobile mode (stacked) --- */
.sp2-swiper.sp2-static .sp2-child-swiper .swiper-wrapper {
  display: flex;
  flex-direction: column;
  transform: none !important;
}

.sp2-swiper.sp2-static .sp2-child-swiper .swiper-slide {
  height: auto !important;
}

/* --- Vertical pagination dots (child Swiper) --- */
/* Pagination is position:absolute inside .stage (which is position:relative and
   max-width-constrained). right values are stage-relative, not card/viewport-relative,
   so they correctly track the container edge at every breakpoint. */
.sp2-child-pagination {
  position: absolute;
  right: 16px; /* mobile: inside stage px-6 (24px) padding */
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@media (min-width: 992px) {
  /* tabletlg–desktop: stage has px-10 (40px) right padding; sit near the edge */
  .sp2-child-pagination {
    right: 16px !important;
  }
}

@media (min-width: 1440px) {
  /* desktop+: stage has px-0; overflow: visible lets bullets sit 12px
     outside the container boundary (in the viewport gutter).
     .sp2-card overflow:hidden won't clip — gutter is ~84px on a 1440px screen. */
  .sp2-child-pagination {
    right: -30px !important;
  }
}

/* Left-side variant: content on left (media_right layout) */
.sp2-child-pagination--left {
  right: auto;
  left: 16px;
  width: 12px;
}

@media (min-width: 992px) {
  .sp2-child-pagination--left {
    right: auto;
    left: 16px !important;
  }
}

@media (min-width: 1440px) {
  .sp2-child-pagination--left {
    right: auto;
    left: -30px !important;
  }
}

/* WCAG 2.5.8 — 24×24px minimum touch target for all pointer types.
   Visual dot is rendered via ::before; outer button provides the hit area. */
.sp2-child-bullet {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  border: none;
  padding: 0;
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sp2-child-bullet::before {
  content: '';
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgb(var(--primitive-blue-1) / 0.4);
  transition: background 0.3s ease, transform 0.3s ease;
  flex-shrink: 0;
}

.sp2-child-pagination {
  gap: 0; /* 24px elements already provide visual spacing between 12px dots */
}

/* Expand to 44×44px on touch/coarse-pointer devices for comfort */
@media (pointer: coarse) {
  .sp2-child-bullet {
    width: 44px;
    height: 44px;
  }

  .sp2-child-bullet::before {
    width: 16px;
    height: 16px;
  }
}

.sp2-child-bullet-active::before {
  background: rgb(var(--primitive-blue-3));
  transform: scale(1.3);
}

/* Dark theme bullet variants — orange (sand) */
[data-sp2-theme="dark"] .sp2-child-bullet::before,
[data-sp2-theme="seaweed"] .sp2-child-bullet::before {
  background: rgb(var(--primitive-orange-1) / 0.4);
}

[data-sp2-theme="dark"] .sp2-child-bullet-active::before,
[data-sp2-theme="seaweed"] .sp2-child-bullet-active::before {
  background: rgb(var(--primitive-orange-3));
}

/* Hide pagination dots in static/mobile mode */
.sp2-swiper.sp2-static .sp2-child-pagination {
  display: none;
}


/* --- Rich text lists --- */
.sp2-component :where(ul) {
  list-style-type: disc;
  padding-left: 1.5rem;
}

.sp2-component :where(ol) {
  list-style-type: decimal;
  padding-left: 1.5rem;
}

.sp2-component :where(li) {
  display: list-item;
}

/* === Hide global nav while the panels sticky nav is active === */
body.has-sp2-nav .header-menu {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* === Hide global nav while in a single-stack sp2 section (no internal nav), desktop only === */
@media (min-width: 992px) {
  body.has-sp2-no-nav .header-menu {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }
}

/* === Slide navigation bar === */

.sp2-slide-nav {
  /* Stay below the site header (z-100 / z-index:100) at all times */
  z-index: 90;
  padding: 24px 0px;
  padding-top: 12px;
}

/* Desktop: nav floats absolutely — sits above the slides before pinning,
   then overlays them once stuck. Keeping it absolute (never in flow) means
   the Swiper stays at full 100dvh and backdrop-blur always has content behind it. */
@media (min-width: 992px) {
  /* Padding-top creates visual space for the nav bar before it sticks.
     Removed once is-stuck so the Swiper fills the full viewport again. */
  .sp2-component:has(.sp2-slide-nav) {
    padding-top: 80px;
    transition: padding-top 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .sp2-component:has(.sp2-slide-nav.is-stuck) {
    padding-top: 0;
  }

  .sp2-slide-nav {
    position: absolute !important;
    top:-28px;
    left: 0;
    width: 100%;
    transition: top 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .sp2-slide-nav.is-stuck {
    top: 0;
  }
}

.sp2-slide-nav-tabs {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

@media (min-width: 992px) {
  .sp2-slide-nav-tabs {
    gap: 12px;
    flex-direction: row;
    align-items: center;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .sp2-slide-nav-tabs::-webkit-scrollbar {
    display: none;
  }
}

/* Mobile default: vertical collapse via max-height + spacing */
.sp2-slide-nav-tab {
  overflow: hidden;
  border: 2px solid transparent;
  max-height: 200px;
  background-color: rgba(255, 255, 255, 0.55);
  transition:
    max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    margin-top 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    padding-top 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    padding-bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    border-width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.3s ease,
    border-color 0.2s ease,
    background-color 0.2s ease;
}

.sp2-slide-nav-tabs .sp2-slide-nav-tab + .sp2-slide-nav-tab {
  margin-top: 10px;
}

/* Active pill: always tracks current slide — no is-stuck gate */
.sp2-slide-nav-tab[aria-current="true"] {
  background-color: #ffffff;
  border-color: #1b1b1b;
}

/* Mobile collapse */
.sp2-slide-nav.is-collapsed .sp2-slide-nav-tab:not([aria-current="true"]) {
  max-height: 0;
  min-height: 0;
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-width: 0;
  opacity: 0;
  pointer-events: none;
}

.sp2-slide-nav.is-collapsed .sp2-slide-nav-tab[aria-current="true"] {
  margin-top: 0;
}

/* Desktop: horizontal max-width collapse */
@media (min-width: 992px) {
  .sp2-slide-nav-tab {
    max-height: none;
    max-width: 600px;
    transition:
      max-width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
      opacity 0.3s ease,
      padding-left 0.4s cubic-bezier(0.4, 0, 0.2, 1),
      padding-right 0.4s cubic-bezier(0.4, 0, 0.2, 1),
      border-color 0.2s ease,
      background-color 0.2s ease;
  }

  .sp2-slide-nav-tabs .sp2-slide-nav-tab + .sp2-slide-nav-tab {
    margin-top: 0;
  }

  .sp2-slide-nav.is-collapsed .sp2-slide-nav-tab:not([aria-current="true"]) {
    max-width: 0;
    max-height: none;
    margin-top: 0;
    opacity: 0;
    padding-left: 0;
    padding-right: 0;
    pointer-events: none;
  }
}

/* Expand / collapse button */
.sp2-slide-nav-expand {
  background: linear-gradient(268.96deg, rgb(220, 231, 234) 4.67%, rgb(163, 186, 191) 99.25%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, filter 0.2s ease;
}

.sp2-slide-nav-track {
  position: relative;
}

@media (max-width: 991.98px) {
  .sp2-slide-nav:not(.is-stuck) .sp2-slide-nav-expand {
    position: absolute;
    top: 10px;
    right: 10px;
    margin-left: 0;
  }

  .sp2-slide-nav.is-stuck .sp2-slide-nav-expand {
    position: relative;
    top: auto;
    right: auto;
  }
}

.sp2-slide-nav.is-stuck .sp2-slide-nav-expand {
  opacity: 1;
  pointer-events: auto;
}

.sp2-slide-nav-expand:hover {
  filter: brightness(0.9);
}

/* Desktop: no expand/collapse button — nav always stays open */
@media (min-width: 992px) {
  .sp2-slide-nav-expand {
    display: none !important;
  }
}

/* Icon: show minus when expanded, plus when collapsed */
.sp2-slide-nav-expand .nav-expand-plus  { display: none; }
.sp2-slide-nav-expand .nav-expand-minus { display: block; }

.sp2-slide-nav.is-collapsed .sp2-slide-nav-expand .nav-expand-plus  { display: block; }
.sp2-slide-nav.is-collapsed .sp2-slide-nav-expand .nav-expand-minus { display: none; }

/* Static swiper: hide slide nav when not interactive */
.sp2-component .sp2-swiper.sp2-static ~ .sp2-slide-nav {
  display: none !important;
}