/*
 * Slider block stylesheet (260920-opb).
 *
 * The component emits ONLY data attributes; this sheet owns every visual
 * decision, including the cross-fade between slides and the dots' current-
 * state paint - see the countdown/poll precedent for why: a stylesheet that
 * reacts to attributes is the only way `noon-slider.js` can stay attribute-
 * only (never a text-node write, never DOM it has to build).
 *
 * Every rule is in the `noon` cascade layer, so operator `customCss`
 * (unlayered) beats it regardless of specificity and of hoist order - the FULL
 * rationale lives ONCE, in `noon-theme.css`.
 */

/*
 * SPACING KNOBS: every spacing value below reads a `--noon-slider-*` custom
 * property, with the built-in value as the var() fallback. Nothing declares
 * the properties, so a theme or operator `customCss` sets only the one it
 * wants to move (on `:root`, or on any ancestor of one slider) and never has
 * to restate a whole rule:
 *
 *   --noon-slider-margin         the block's vertical margin
 *   --noon-slider-slide-padding  padding inside each slide
 *   --noon-slider-heading-gap    space under a slide heading
 *   --noon-slider-gap            space between the text, image and link
 *   --noon-slider-dots-offset    space between the slides and the dots
 *   --noon-slider-dot-size       diameter of one dot
 *   --noon-slider-dot-gap        space between two dots
 */

@layer noon {
  /* `[data-slider-count]` doubles the specificity on purpose: noon-theme.css
   * also sets this margin (its rhythm rule may only name theme tokens), and
   * this rule must win whatever order the two sheets hoist in. */
  [data-block="Slider"][data-slider-count] {
    margin: var(--noon-slider-margin, calc(var(--noon-spacing-unit, 8px) * 4)) 0;
    position: relative;
  }

  /* GRID, NOT ABSOLUTE POSITIONING: every `[data-slider-slide]` shares grid
   * area 1/1, so the slides stack in one cell and the track's own height is
   * the TALLEST slide's height - the thing that stops a jump on every swap. */
  [data-slider-track] {
    display: grid;
  }

  [data-slider-slide] {
    grid-area: 1 / 1;
    padding: var(--noon-slider-slide-padding, 0);
    opacity: 0;
    visibility: hidden;
    transition:
      opacity 500ms ease,
      visibility 500ms;
  }

  /* TWELVE visibility rules, index 0 through 11 - one per slide position,
   * matching SLIDER_MAX_SLIDES (`packages/schema/src/components/slider.ts`).
   * Written out literally: growing that bound without growing this sheet
   * would silently stop showing the new highest-index slide. */
  [data-block="Slider"][data-slider-active="0"] [data-slider-slide="0"] {
    opacity: 1;
    visibility: visible;
  }
  [data-block="Slider"][data-slider-active="1"] [data-slider-slide="1"] {
    opacity: 1;
    visibility: visible;
  }
  [data-block="Slider"][data-slider-active="2"] [data-slider-slide="2"] {
    opacity: 1;
    visibility: visible;
  }
  [data-block="Slider"][data-slider-active="3"] [data-slider-slide="3"] {
    opacity: 1;
    visibility: visible;
  }
  [data-block="Slider"][data-slider-active="4"] [data-slider-slide="4"] {
    opacity: 1;
    visibility: visible;
  }
  [data-block="Slider"][data-slider-active="5"] [data-slider-slide="5"] {
    opacity: 1;
    visibility: visible;
  }
  [data-block="Slider"][data-slider-active="6"] [data-slider-slide="6"] {
    opacity: 1;
    visibility: visible;
  }
  [data-block="Slider"][data-slider-active="7"] [data-slider-slide="7"] {
    opacity: 1;
    visibility: visible;
  }
  [data-block="Slider"][data-slider-active="8"] [data-slider-slide="8"] {
    opacity: 1;
    visibility: visible;
  }
  [data-block="Slider"][data-slider-active="9"] [data-slider-slide="9"] {
    opacity: 1;
    visibility: visible;
  }
  [data-block="Slider"][data-slider-active="10"] [data-slider-slide="10"] {
    opacity: 1;
    visibility: visible;
  }
  [data-block="Slider"][data-slider-active="11"] [data-slider-slide="11"] {
    opacity: 1;
    visibility: visible;
  }

  [data-slider-heading] {
    margin: 0 0 var(--noon-slider-heading-gap, calc(var(--noon-spacing-unit, 8px) * 1));
  }

  [data-slider-text],
  [data-slider-image] {
    margin: 0 0 var(--noon-slider-gap, calc(var(--noon-spacing-unit, 8px) * 2));
  }

  /* The last thing in a slide carries no bottom margin: a text-only slide
   * would otherwise end in dead space above the dots, and the dots' own
   * offset is the one place that gap is set. */
  [data-slider-slide] > :last-child {
    margin-bottom: 0;
  }

  [data-slider-link] {
    display: inline-block;
  }

  /* ── DOTS ── */
  [data-slider-dots] {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: var(--noon-slider-dot-gap, calc(var(--noon-spacing-unit, 8px) * 1));
    margin: var(--noon-slider-dots-offset, calc(var(--noon-spacing-unit, 8px) * 2)) 0 0;
  }

  /* A small round button, no border - the dots are the ONLY focusable
   * control this block has, so their `:focus-visible` rule below is not
   * optional. */
  [data-slider-dot] {
    width: var(--noon-slider-dot-size, calc(var(--noon-spacing-unit, 8px) * 1.25));
    height: var(--noon-slider-dot-size, calc(var(--noon-spacing-unit, 8px) * 1.25));
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--noon-border, #ddd);
    cursor: pointer;
  }

  [data-slider-dot][aria-current="true"] {
    background: var(--noon-accent, #0b5fff);
  }

  [data-slider-dot]:focus-visible {
    outline: 2px solid var(--noon-accent, #0b5fff);
    outline-offset: 2px;
  }

  /* Reduced motion (D3, orchestrator call): no cross-fade. The script
   * separately refuses to start a timer, so this rule covers only the swap -
   * the dots still work, they just cut instead of fading. */
  @media (prefers-reduced-motion: reduce) {
    [data-slider-slide] {
      transition: none;
    }
  }

  /* ── close of @layer noon ── */
}