@layer super-banner {
  /*
    Contratto light-DOM (server-first):
      <super-banner>
        <ol class="sb-stack">
          <li class="sb-item">  … un banner accessibile …  </li>
        </ol>
      </super-banner>

    Senza JavaScript lo stack e' l'intero contenuto: una colonna di banner reali,
    ognuno un link (hasCTA=false) o un pannello con pulsanti (hasCTA=true).
    Con JavaScript e spazio orizzontale, il componente diventa racconto + stage.
  */

  super-banner {
    box-sizing: border-box;
    display: block;
    inline-size: 100%;
    min-inline-size: 0;
    max-inline-size: 100%;
    --sb-gap: 1rem;
    --sb-radius: 1rem;
    --sb-line: color-mix(in srgb, var(--pagina-testo) 20%, transparent);
    --sb-surface: var(--panel);
    --sb-min-tap: 2.75rem; /* 44px */
    --super-banner-height: 40dvh;
  }

  /* Il link copre l'intero banner senza avvolgerne il markup: anche un documento
     legacy che contiene gia' <a> resta HTML valido e porta alla propria pagina. */
  .sb-stage-link {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 2;
    color: inherit;
    text-decoration: none;
  }

  .sb-stack {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-inline-size: 0;
    max-inline-size: 100%;
    gap: var(--sb-gap);
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: clip;
  }

  .sb-item {
    position: relative;
    min-inline-size: 0;
    max-inline-size: 100%;
    overflow: clip;
    overflow-wrap: anywhere;
  }

  .sb-item:not([data-has-cta]) > site-banner {
    pointer-events: none;
  }

  .sb-item:has(> .sb-stage-link:focus-visible) {
    outline: 3px solid var(--accent-color);
    outline-offset: -3px;
  }

  /* --- La card di un banner (stato base = stack, e stage in modalita' larga) --- */

  .sb-card {
    color: inherit;
    text-decoration: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid var(--sb-line);
    border-radius: var(--sb-radius);
    background: var(--sb-surface);
    overflow: clip;
  }

  a.sb-card {
    transition: background-color 0.2s ease;
  }

  a.sb-card:hover {
    background: color-mix(in srgb, var(--accent-color) 8%, var(--sb-surface));
  }

  .sb-media {
    display: none;
    aspect-ratio: 16 / 9;
    border-radius: calc(var(--sb-radius) - 0.4rem);
    background-color: color-mix(in srgb, var(--sb-accent, var(--accent-color)) 22%, var(--sb-surface));
    background-image: var(--sb-thumb, none);
    background-size: cover;
    background-position: center;
  }

  .sb-item[data-has-thumb] .sb-media {
    display: block;
  }

  .sb-kicker {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: baseline;
    font-family: var(--font-tag, var(--font-interface));
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: color-mix(in srgb, var(--pagina-testo) 72%, transparent);
  }

  .sb-type {
    font-weight: 700;
    color: var(--sb-accent, var(--accent-color));
  }

  .sb-title {
    margin: 0;
    font-family: var(--font-heading-primary);
    font-size: 1.25rem;
    line-height: 1.2;
    overflow-wrap: anywhere;
  }

  .sb-desc {
    margin: 0;
    color: color-mix(in srgb, var(--pagina-testo) 82%, transparent);
    line-height: 1.4;
  }

  /* --- Azioni (hasCTA=true) --- */

  .sb-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.35rem;
  }

  .sb-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-block-size: var(--sb-min-tap);
    padding: 0.4rem 1.1rem;
    border-radius: 4em;
    border: 1px solid var(--sb-accent, var(--accent-color));
    color: inherit;
    text-decoration: none;
    font-family: var(--font-interface);
    font-size: 0.95rem;
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  .sb-btn:hover {
    background: color-mix(in srgb, var(--sb-accent, var(--accent-color)) 12%, transparent);
  }

  .sb-btn--primary {
    background: var(--sb-accent, var(--accent-color));
    color: light-dark(#fff, #111);
    border-color: transparent;
  }

  .sb-btn--primary:hover {
    background: color-mix(in srgb, var(--sb-accent, var(--accent-color)) 85%, #000);
  }

  .sb-ext {
    font-size: 0.85em;
  }

  /* --- Focus visibile, coerente con la shell --- */

  :is(a.sb-card, .sb-btn, .sb-pick):focus-visible {
    outline: 3px solid var(--accent-color);
    outline-offset: 2px;
  }

  /* =========================================================
     MODALITA' LARGA (data-mode="wide"): racconto + stage.
     Il JavaScript la attiva solo dove c'e' spazio orizzontale.
     ========================================================= */

  super-banner[data-mode="wide"] .sb-stack {
    gap: 1.25rem;
  }

  /* Il racconto: indice auto-descrittivo pulito con tratti a sinistra e riempimento leggero animato */
  .sb-picker {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: stretch;
    gap:0;
    list-style: none;
    margin: .5rem auto 0 auto;
    padding: 0 1.5rem;
    max-width: var(--col-center-max, 82rem);
  }

  .sb-picker > li {
    display: flex;
    flex: 0 1 24ch;
    min-width: 12ch;
    max-width: 24ch;
  }

  .sb-pick {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
    height: 100%;
    padding: 0.45rem 0.75rem 0.45rem 0.85rem;
    border: none;
    border-left: 2px solid var(--sb-line, light-dark(rgb(220 220 220), rgb(86 86 86)));
    border-radius: 0;
    background: transparent;
    color: inherit;
    text-align: start;
    text-decoration: none;
    font: inherit;
    cursor: pointer;
    opacity: 0.6;
    overflow: hidden;
    transition: opacity 0.2s ease, border-color 0.2s ease;
  }

  /* Riempimento leggero di sfondo */
  .sb-pick::before {
    content: "";
    position: absolute;
    inset: 0;
    inline-size: 0%;
    background: color-mix(in srgb, var(--item-color, var(--pagina-testo)) 8%, transparent);
    z-index: 0;
    pointer-events: none;
    border-radius: inherit;
  }

  .sb-pick:hover {
    opacity: 0.9;
    border-left-color: color-mix(in srgb, var(--item-color, var(--pagina-testo)) 60%, var(--sb-line));
  }

  .sb-pick:hover::before {
    inline-size: 100%;
    opacity: 0.5;
    transition: inline-size 0.2s ease;
  }

  .sb-pick[aria-current="true"] {
    opacity: 1;
    border-left-color: var(--item-color, currentColor);
  }

  .sb-pick[aria-current="true"]::before {
    inline-size: 100%;
    background: color-mix(in srgb, var(--item-color, var(--pagina-testo)) 10%, transparent);
  }

  /* Animazione progressiva di riempimento leggero continuo per l'intera durata (senza stop):
     prende tutto il tempo definito da 0% a 100% -> al cambio slide si ritrae veloce (.5s) mentre il successivo avanza */
  super-banner[data-autoplay="true"] .sb-pick[aria-current="true"]::before {
    animation: sb-fill-progress var(--sb-duration, 6s) linear 1 forwards;
  }

  super-banner[data-paused="true"] .sb-pick[aria-current="true"]::before {
    animation-play-state: paused;
  }

  @keyframes sb-fill-progress {
    0% {
      inline-size: 0%;
    }
    100% {
      inline-size: 100%;
    }
  }

  /* Quando il banner esce dallo stato attivo, il riempimento si ritrae veloce in 0.5s mentre il nuovo cresce */
  .sb-pick[data-leaving="true"]::before {
    animation: sb-fill-retract 2.5s cubic-bezier(0.2, 0.8, 0.2, 1) 1 forwards !important;
  }

  @keyframes sb-fill-retract {
    0% {
      inline-size: 100%;
      opacity: 1;
    }
    100% {
      inline-size: 0%;
      opacity: 0;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .sb-pick[aria-current="true"]::before,
    .sb-pick[data-leaving="true"]::before {
      animation: none !important;
      inline-size: 100% !important;
    }
  }

  .sb-pick-dot {
    display: none;
  }

  /* Testo: massimo 2 righe con troncamento '...' per i titoli più lunghi su desktop */
  .sb-pick-title {
    position: relative;
    z-index: 1;
    font-size: 0.84rem;
    line-height: 1.35;
    font-weight: 500;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    letter-spacing: -0.01em;
  }

  /* Versione Mobile (width <= 48rem): navigazione classica a pallini compatti e accessibili */
  @media (width <= 48rem) {
    .sb-picker {
      --pick-size: 48px;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      gap: 1em;
      box-sizing: border-box;
      inline-size: 100%;
      min-inline-size: 0;
      margin: .5rem auto;
      padding: 0;
      max-width: 100%;
    }

    .sb-picker > li {
      display: inline-flex;
      flex: 0 0 var(--pick-size);
      inline-size: var(--pick-size);
      block-size: var(--pick-size);
      min-inline-size: 0;
      max-inline-size: var(--pick-size);
    }

    .sb-pick {
      box-sizing: border-box;
      display: grid;
      flex: 0 0 var(--pick-size);
      place-items: center;
      min-inline-size: var(--pick-size);
      min-block-size: var(--pick-size);
      inline-size: var(--pick-size);
      block-size: var(--pick-size);
      max-inline-size: var(--pick-size);
      max-block-size: var(--pick-size);
      padding: 0;
      border: none;
      background: transparent;
      opacity: 1;
      overflow: visible;
      cursor: pointer;
    }

    .sb-pick::before {
      display: none;
    }

    .sb-pick-title {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    .sb-pick-dot {
      display: block;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: color-mix(in srgb, var(--item-color, var(--pagina-testo)) 40%, transparent);
      border: 1.5px solid var(--sb-line, light-dark(rgb(200 200 200), rgb(90 90 90)));
      transform-origin: center;
      transition: transform 0.2s ease;
    }

    .sb-pick:hover .sb-pick-dot {
      background: color-mix(in srgb, var(--item-color, var(--pagina-testo)) 70%, transparent);
      transform: scale(1.2);
    }

    /* 1. Il pallino attivo A cresce progressivamente durante il timer da cerchio (10px) a pillola (32px) */
    super-banner[data-autoplay="true"] .sb-pick[aria-current="true"] .sb-pick-dot {
      animation: sb-dot-progress var(--sb-duration, 6s) linear 1 forwards;
    }

    /* Se l'autoplay è fermo, il pallino attivo resta a pillola piena */
    super-banner:not([data-autoplay="true"]) .sb-pick[aria-current="true"] .sb-pick-dot,
    super-banner[data-paused="true"] .sb-pick[aria-current="true"] .sb-pick-dot {
      width: 32px;
      border-radius: 6px;
      background: var(--item-color, var(--accent-color));
      border-color: transparent;
      box-shadow: 0 2px 6px color-mix(in srgb, var(--item-color, #000) 35%, transparent);
    }

    /* 3. Subito parte B mentre A si ritrae morbidamente in 1.4s tornando cerchio */
    .sb-pick[data-leaving="true"] .sb-pick-dot {
      animation: sb-dot-retract 1.4s cubic-bezier(0.22, 0.61, 0.36, 1) 1 forwards !important;
    }
  }

  @keyframes sb-dot-progress {
    0% {
      width: 10px;
      border-radius: 6px;
      background: var(--item-color, var(--accent-color));
      border-color: transparent;
      box-shadow: 0 1px 3px color-mix(in srgb, var(--item-color, #000) 25%, transparent);
    }
    100% {
      width: 32px;
      border-radius: 6px;
      background: var(--item-color, var(--accent-color));
      border-color: transparent;
      box-shadow: 0 2px 6px color-mix(in srgb, var(--item-color, #000) 35%, transparent);
    }
  }

  @keyframes sb-dot-retract {
    0% {
      width: 32px;
      border-radius: 6px;
      background: var(--item-color, var(--accent-color));
      border-color: transparent;
      box-shadow: 0 2px 6px color-mix(in srgb, var(--item-color, #000) 25%, transparent);
    }
    100% {
      width: 10px;
      border-radius: 50%;
      background: color-mix(in srgb, var(--item-color, var(--pagina-testo)) 40%, transparent);
      border-color: var(--sb-line, light-dark(rgb(200 200 200), rgb(90 90 90)));
      box-shadow: none;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .sb-pick[aria-current="true"] .sb-pick-dot,
    .sb-pick[data-leaving="true"] .sb-pick-dot {
      animation: none !important;
      width: 32px !important;
      border-radius: 6px !important;
    }
  }

  /* Lo stage: solo il banner corrente (o il banner singolo fisso), ingrandito.
     Gli altri restano nel DOM nascosti. */
  super-banner[data-mode="wide"] .sb-item {
    display: none;
  }

  super-banner[data-mode="single"] .sb-item,
  super-banner[data-mode="wide"] .sb-item[data-current] {
    display: block;
  }

  super-banner[data-mode="single"] site-banner,
  super-banner[data-mode="wide"] .sb-item[data-current] site-banner {
    overflow: hidden;
    height: var(--super-banner-height, 50dvh);
    min-height: var(--super-banner-height, 50dvh);
    max-height: var(--super-banner-height, 50dvh);
  }

  super-banner[data-mode="wide"] .sb-card {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    padding: clamp(1.25rem, 3vw, 2.5rem);
    min-block-size: 15rem;
    align-content: center;
  }

  super-banner[data-mode="wide"] .sb-item[data-has-thumb] .sb-card {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    align-items: center;
  }

  super-banner[data-mode="wide"] .sb-media {
    aspect-ratio: 4 / 3;
    align-self: stretch;
  }

  super-banner[data-mode="wide"] .sb-title {
    font-size: clamp(1.8rem, 4vw, 3rem);
    letter-spacing: -0.01em;
  }

  super-banner[data-mode="wide"] .sb-desc {
    font-size: 1.1rem;
  }

  /* Comandi che esistono solo col JavaScript: nascosti finche' non li mostra lo script. */
  .sb-picker[hidden] {
    display: none;
  }

  @media (prefers-reduced-motion: reduce) {
    a.sb-card,
    .sb-btn,
    .sb-pick {
      transition: none;
    }
  }
}