/* carousel block deltas (spec pmo/specs/2026-07-07-carousel-block-design.md,
 * bead cwt.34) — web-only chrome for the paged DeckLang band. @layer web so it
 * sorts above the SDS layers; SDS tokens for every colour. The server-rendered
 * (no-JS) state needs almost nothing: pages stack in document order. All
 * one-at-a-time styling keys off .carousel--js, added by the island. */
@layer web {
  .carousel__head {
    margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
  }
  .carousel__heading {
    font-family: var(--sph-font-display);
    font-weight: var(--sph-weight-extrabold);
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    line-height: 1.08;
    letter-spacing: var(--sph-tracking-tight);
    color: var(--sph-text);
    margin: 0.75rem 0 0;
  }
  .carousel__heading .sph-accent { color: var(--sph-primary); }

  /* no-JS: breathing room between stacked pages */
  .carousel:not(.carousel--js) .carousel__page + .carousel__page {
    margin-top: clamp(1.5rem, 4vw, 2.5rem);
  }

  /* JS: grid-stack all pages in one cell — the tallest page sets the height,
     so the band never jumps while flipping. Inactive pages stay in the grid
     (visibility, NOT display:none) and are inert + aria-hidden via the island. */
  .carousel--js .carousel__pages { display: grid; }
  .carousel--js .carousel__page {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    transform: translateX(0.75rem);
    transition: opacity 0.45s ease, transform 0.45s ease, visibility 0s linear 0.45s;
    touch-action: pan-y;
  }
  .carousel--js .carousel__page--active {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.45s ease, transform 0.45s ease, visibility 0s;
  }

  .carousel__controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-top: 1px solid var(--sph-border);
    margin-top: clamp(1rem, 3vw, 1.75rem);
    padding-top: 0.5rem;
  }
  .carousel__dots { display: flex; align-items: center; }

  /* 44px hit targets throughout; the dot is an 8px visual inside a 44px button */
  .carousel__dot,
  .carousel__prev,
  .carousel__next {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--sph-text);
  }
  .carousel__dot::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--sph-border);
    transition: width 0.3s ease, background-color 0.3s ease;
  }
  .carousel__dot:hover::before { background: var(--sph-primary); }
  .carousel__dot[aria-current="true"]::before {
    width: 22px;
    background: var(--sph-primary);
  }

  .carousel__prev,
  .carousel__next {
    border: 1px solid var(--sph-border);
    border-radius: 2px;
    font-size: 1rem;
    line-height: 1;
  }
  .carousel__prev:hover,
  .carousel__next:hover { border-color: var(--sph-text); }

  .carousel__actions { display: flex; align-items: center; gap: 0.5rem; }

  .carousel__pause {
    height: 44px;
    padding: 0 0.75rem;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--sph-font-display);
    font-size: 0.75rem;
    font-weight: var(--sph-weight-bold);
    letter-spacing: var(--sph-tracking-wide);
    text-transform: uppercase;
    color: var(--sph-text);
  }
  .carousel__pause:hover { color: var(--sph-primary); }

  .carousel__dot:focus-visible,
  .carousel__prev:focus-visible,
  .carousel__next:focus-visible,
  .carousel__pause:focus-visible {
    outline: 2px solid var(--sph-primary);
    outline-offset: 2px;
  }

  /* Phone widths: the dot rail (one 44px hit target per page) plus the
     pause/prev/next cluster can exceed the viewport — let both rows wrap
     instead of pushing the page wider (bead vqt.4 QA finding). */
  @media (max-width: 44rem) {
    .carousel__controls,
    .carousel__dots {
      flex-wrap: wrap;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .carousel--js .carousel__page,
    .carousel--js .carousel__page--active,
    .carousel__dot::before { transition: none; }
  }
}