/* ==========================================================================
   Bay La Sun — layout
   Slide deck stage, per-slide grid shells, navigation chrome.
   ========================================================================== */

.bls-deck {
  position: relative;
  height: 100vh;
  height: 100dvh;
  width: 100vw;
  overflow: hidden;
}

.bls-slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-6) var(--stage-padding-inline);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Outgoing slide is cut instantly (no CSS transition here) and the
   incoming slide's fade-in is driven entirely by GSAP in main.js.
   Only ever one slide is mid-animation, never two crossfading at once,
   which is what keeps this smooth. */
.bls-slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  will-change: opacity;
}

.bls-slide__inner {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
}

.bls-slide--teal {
  background: var(--surface-page);
  color: var(--text-on-teal);
}

.bls-slide--panel {
  background: var(--surface-panel);
  color: var(--text-on-panel);
}

.bls-slide--center {
  align-items: center;
  text-align: center;
}

/* Cover and closing slides */
.bls-cover__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 70%;
}

.bls-cover__wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(35, 57, 58, 0.94) 0%,
    rgba(35, 57, 58, 0.86) 45%,
    rgba(35, 57, 58, 0.94) 100%
  );
}

.bls-cover__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

/* Divider slides (three-band composition) */
.bls-divider {
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  height: 100%;
  width: 100%;
}

.bls-divider__band {
  background: var(--surface-panel-alt);
}

.bls-divider__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  background: var(--surface-panel);
  text-align: center;
  padding: var(--space-5) var(--stage-padding-inline);
}

/* Content slide shell: header band + body */
.bls-slide__header {
  margin-bottom: var(--space-4);
}

.bls-slide__kicker {
  display: block;
  margin-bottom: var(--space-1);
}

.bls-slide__rule {
  margin-top: var(--space-2);
  height: 2px;
  width: 64px;
  background: var(--bls-gold-500);
}

.bls-slide__body {
  display: grid;
  gap: var(--space-4);
}

.bls-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

.bls-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

.bls-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
}

/* Navigation chrome */
.bls-nav-arrow {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(254, 253, 251, 0.1);
  border: 1px solid var(--border-on-teal);
  color: var(--text-on-teal);
  cursor: pointer;
  z-index: 20;
  transition: background var(--duration-micro) var(--ease-out),
    transform var(--duration-micro) var(--ease-out);
}

.bls-nav-arrow:hover {
  background: var(--bls-gold-500);
  color: var(--text-on-gold);
  border-color: var(--bls-gold-500);
}

.bls-nav-arrow:active {
  transform: translateY(-50%) scale(0.94);
}

.bls-nav-arrow--prev {
  left: clamp(0.75rem, 2vw, 2.5rem);
}

.bls-nav-arrow--next {
  right: clamp(0.75rem, 2vw, 2.5rem);
}

.bls-nav-arrow[disabled] {
  opacity: 0.3;
  pointer-events: none;
}

/* Nav chrome (arrows, dots, progress label) adapts to the active slide's
   theme so it always has contrast, set via [data-theme] on .bls-deck. */
.bls-deck[data-theme="panel"] .bls-nav-arrow {
  background: rgba(28, 26, 22, 0.06);
  border-color: var(--border-on-panel);
  color: var(--text-on-panel);
}

.bls-dots {
  position: absolute;
  left: 50%;
  bottom: clamp(0.75rem, 3vh, 1.75rem);
  translate: -50% 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  z-index: 20;
}

.bls-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(254, 253, 251, 0.35);
  cursor: pointer;
  padding: 6px;
  background-clip: content-box;
  transition: background var(--duration-micro) var(--ease-out),
    width var(--duration-micro) var(--ease-out);
}

.bls-dot.is-active {
  background: var(--bls-gold-500);
  width: 18px;
  border-radius: var(--radius-pill);
}

.bls-deck[data-theme="panel"] .bls-dot {
  background: rgba(28, 26, 22, 0.2);
}

.bls-deck[data-theme="panel"] .bls-dot.is-active {
  background: var(--bls-gold-500);
}

.bls-progress-label {
  position: absolute;
  right: clamp(1rem, 3vw, 2.5rem);
  top: clamp(1rem, 3vh, 1.75rem);
  font-family: var(--font-heading);
  font-size: var(--step-caption);
  letter-spacing: 0.08em;
  z-index: 20;
  font-variant-numeric: tabular-nums;
  color: var(--text-on-teal);
}

.bls-deck[data-theme="panel"] .bls-progress-label {
  color: var(--text-muted-on-panel);
}

@media (max-width: 780px) {
  .bls-grid-2,
  .bls-grid-3,
  .bls-grid-4 {
    grid-template-columns: 1fr;
  }

  .bls-nav-arrow {
    width: 38px;
    height: 38px;
  }

  .bls-slide {
    padding: var(--space-5) var(--stage-padding-inline);
  }
}