/* ==========================================================================
   La fascia hero (A-36): un contenitore con la veste — sfondo e onda — in cui
   si posano gli oggetti. Gloria, 19-10-2026: «facciamo A».

   ⛔ Lo stile di base sta qui, nel plugin, ed è voluto: la fascia deve vedersi
   bene sia su BsItalia sia su Canvas, quindi non dipende dal foglio di un tema.
   I colori di partenza sono quelli di Bootstrap, che i due temi hanno; un tema o
   un figlio li cambia con le variabili `--acme-hero-*` (lympha:
   `LymphaTech/webroot/css/lympha-brand.css`), e le scelte fatte nella fascia
   arrivano nello `style` in linea, che vince su tutti e due.

   Va caricato in DUE posti: sul sito (`ItemsPluginEvent::getCss()`) e nel canvas
   (lo aggiunge il componente, `hero_band.js`).
   ========================================================================== */

.acme-hero {
    position: relative;
    overflow: hidden;
    padding-block: var(--acme-hero-padding, clamp(2rem, 5vw, 3.5rem));
    /* Senza la veste del tema, il primario del sito molto schiarito, come il «Call to action» (Gloria, 21-10-2026: «si,
       fallo anche per la fascia»): prima era il grigio di `--bs-tertiary-bg`, che BsItalia non ha, quindi `#f8f9fa`, e
       la fascia non seguiva i colori del sito mentre le onde sì. */
    background: var(--acme-hero-theme-bg, color-mix(in srgb, var(--bs-primary, #0066cc) 10%, #fff));
}

/* L'altezza: spazio verticale piccolo, medio (la partenza) o grande. */
.acme-hero--h-sm { --acme-hero-padding: clamp(1.25rem, 3vw, 2rem); }
.acme-hero--h-lg { --acme-hero-padding: clamp(3rem, 8vw, 6rem); }

/* Lo sfondo scelto: un colore, una sfumatura, oppure un'immagine con la velatura. */
.acme-hero--bg-color { background: var(--acme-hero-bg, #ffffff); }

/* La sfumatura (A-36 § IV.5, Gloria, 20-10-2026: «vorrei poter scegliere anche i colori della sfumatura»): la struttura
   della nebbia di lympha — un fondo e due aloni, in alto a destra e in basso a sinistra — coi colori scelti nella fascia.
   L'intensità degli aloni è quella di lympha (40% e 18%), resa con `color-mix()` così i colori restano `#rrggbb`. */
.acme-hero--bg-gradient {
    background:
        radial-gradient(90% 120% at 92% 8%, color-mix(in srgb, var(--acme-hero-glow-a, #5bb6bf) 40%, transparent) 0%, transparent 55%),
        radial-gradient(80% 120% at 0% 100%, color-mix(in srgb, var(--acme-hero-glow-b, #d86010) 18%, transparent) 0%, transparent 50%),
        var(--acme-hero-gradient-base, #eef6f7);
}
.acme-hero--bg-image {
    background-color: var(--acme-hero-bg, #1a1a1a);
    background-image: var(--acme-hero-image, none);
    background-size: cover;
    background-position: center;
}
.acme-hero--bg-image::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: #000;
    opacity: var(--acme-hero-overlay, .45);
}
.acme-hero--overlay-light::before { background: #fff; }

/* L'onda: decorativa, a tutta fascia, dietro il contenuto. */
.acme-hero__wave {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}
.acme-hero__wave .acme-hero__wave-a {
    fill: var(--acme-hero-wave-a, var(--bs-primary, #0066cc));
    fill-opacity: var(--acme-hero-wave-a-opacity, .16);
}
.acme-hero__wave .acme-hero__wave-b {
    fill: var(--acme-hero-wave-b, var(--bs-primary, #0066cc));
    fill-opacity: var(--acme-hero-wave-b-opacity, .09);
}
.acme-hero--wave-none .acme-hero__wave { display: none; }

/* Il contenuto sta sopra l'onda e la velatura. */
.acme-hero__content {
    position: relative;
    z-index: 1;
}

/* Il respiro fra un oggetto e l'altro posati nella fascia (A-36 § IV.3, Gloria, 20-10-2026: «fra breadcrumb e categoria
   c'è pochissimo spazio», poi «si, va bene»): le briciole hanno `mb-0` e il primo pezzo dell'intestazione perde il
   margine sopra, quindi senza questa regola si toccano. Un tema lo cambia con `--acme-hero-gap`. */
.acme-hero__content > * + * {
    margin-top: var(--acme-hero-gap, 1.5rem);
}

/* Il bottone «Ferma l'animazione» (WCAG 2.2.2): lo mette il runtime, solo con l'onda animata. */
.acme-hero__pause {
    position: absolute;
    right: .75rem;
    bottom: .75rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, .25);
    border-radius: 50%;
    background: rgba(255, 255, 255, .85);
    color: #1a1a1a;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
}
.acme-hero__pause:focus-visible {
    outline: 3px solid var(--bs-primary, #0066cc);
    outline-offset: 2px;
}
.acme-hero__pause-icon::before { content: "\275A\275A"; font-size: .7rem; letter-spacing: -.1em; }
.acme-hero__pause[aria-pressed="true"] .acme-hero__pause-icon::before { content: "\25B6"; font-size: .8rem; }

/* L'avviso del contrasto, solo nel canvas. */
.acme-hero__warning {
    position: relative;
    z-index: 2;
    margin: 0 0 1rem;
    padding: .5rem .75rem;
    background: #fff3cd;
    color: #664d03;
    border-radius: .375rem;
    font-size: .875rem;
}