/*
 * Pagina evento — layout v2 (2026-09-29)
 *
 * Desktop (>=992px): due colonne. A sinistra il racconto (perché venire,
 * descrizione, dettagli, mappa, FAQ, contatti); a destra la colonna
 * d'acquisto (.ev-buy) che resta visibile mentre si scorre, con il totale e
 * il bottone dentro la colonna invece che nella barra fissa in fondo.
 * Mobile: ordine e barra fissa invariati (biglietti prima, poi il resto).
 *
 * Carica dopo event-page.css: alcune regole della barra usano !important
 * per battere quelle (anch'esse !important) di event-page.css.
 */

/* Titoli di sezione: più spazio sopra, icona senza riquadro */
.ev-layout .section-label .ico {
    background: none !important;
    border: 0 !important;
    width: auto !important;
    height: auto !important;
    color: var(--accent);
}

@media (min-width: 992px) {
    .ev-layout:has(.ev-buy > *) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 400px;
        column-gap: 64px;
        align-items: start;
        width: 100%;
        max-width: 1320px;
        margin: 0 auto;
        padding: 0 var(--gut, 40px);
    }
    .ev-layout:has(.ev-buy > *) .ev-main { grid-column: 1; grid-row: 1; min-width: 0; }
    .ev-layout:has(.ev-buy > *) .ev-buy {
        grid-column: 2;
        grid-row: 1;
        padding-bottom: 8px;
    }
    /* Ferma solo se entra tutta nello schermo (classe messa da event-page-new.js):
       col modulo dati aperto o tanti biglietti scorre con la pagina, niente
       scroll dentro lo scroll. */
    .ev-layout:has(.ev-buy > *) .ev-buy.is-sticky { position: sticky; top: 92px; }

    /* Dentro le colonne i contenitori non ricentrano più a 760px */
    .ev-layout:has(.ev-buy > *) .shell { max-width: none; padding-left: 0; padding-right: 0; }
    .ev-layout:has(.ev-buy > *) :is(.body-prose, .event-detail-block, .event-map, .section-label, .section-sublabel,
        .tickets-card, .event-contacts__text, .event-faq .shell > *, .ai-bullets-section .shell > *) {
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .ev-layout:has(.ev-buy > *) .ev-main > section:last-child { padding-bottom: var(--section-gap); }

    /* Colonna acquisto */
    .ev-buy .tickets-section { padding-top: var(--section-gap); }
    .ev-buy .tickets-section + .tickets-section { padding-top: 16px; }
    .ev-buy .tickets-card { box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 12px 32px -18px rgba(0,0,0,.18); }

    /* La barra fissa diventa il piede della colonna acquisto */
    .ev-buy .sticky-cta {
        position: static !important;
        box-shadow: none !important;
        border: 1px solid var(--rule) !important;
        border-radius: 18px;
        margin-top: 14px;
        padding: 16px 18px !important;
        justify-content: space-between !important;
        background: var(--paper) !important;
    }
    .ev-buy .sticky-cta::after { display: none !important; }
    .ev-buy #stickyCta .btn-cta,
    .ev-buy .sticky-cta .btn-cta#stickyCtaBtn {
        min-width: 0 !important;
        flex: 1 1 auto !important;
        max-width: 220px !important;
        padding: 14px 20px !important;
    }
    body:has(.ev-buy .sticky-cta) { padding-bottom: 0 !important; }
}

/* Altre date: stesse schede della vetrina */
.related-events .sf-grid { margin-top: 8px; }
.related-events .sf-card-title { font-size: 1.3rem !important; }

@media (min-width: 992px) {
    .ev-buy .tickets-card > .payment-mode-pill { width: 100%; }
}
.related-events .section-label .ico { background: none !important; border: 0 !important; width: auto !important; height: auto !important; color: var(--accent); }

/* ============================================================
   Prima schermata (critica impeccable 2026-09-29)
============================================================ */


/* Barra acquisto a riposo: "da 45 € a persona" invece di "Totale € 0,00" */
#stickyCta:has(.sticky-cta__rest):not(.has-sel) .sticky-cta__price .from,
#stickyCta:has(.sticky-cta__rest):not(.has-sel) #stickyTotal { display: none !important; }
#stickyCta.has-sel .sticky-cta__rest { display: none; }
.sticky-cta__rest {
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1.1;
    color: var(--cat-color, var(--ink));
    white-space: nowrap;
}
.sticky-cta__rest small { display: block; font-size: 12px; font-weight: 500; color: var(--ink-soft, #5f5a55); }

/* Il bottone a riposo non sembra spento: è attivo e porta ai biglietti */
.sticky-cta #stickyCtaBtn.btn-cta.is-disabled,
#stickyCta #stickyCtaBtn.is-disabled {
    background: var(--cat-color, var(--ink)) !important;
    color: var(--paper, #fff) !important;
}

/* Esaurito: lista d'attesa al posto dell'acquisto */
.sticky-cta .sticky-cta__waitlist {
    background: var(--cat-color, var(--ink)) !important;
    color: var(--paper, #fff) !important;
    text-align: center;
    text-decoration: none;
    margin-left: auto;
    padding: 14px 22px;
    border-radius: 999px;
    font-weight: 700;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sticky-cta__price[hidden] { display: none !important; }



/* ============================================================
   SCHEDA-BIGLIETTO (2026-09-29)
   La foto resta atmosfera; tutto ciò che serve per decidere sta in una
   scheda a forma di biglietto che sale sul bordo della foto: data grande
   nel talloncino, titolo, luogo, prezzo/stato e azione.
============================================================ */

.hero { height: min(56vh, 560px); min-height: 380px !important; }
.hero .hero__content { padding-bottom: 170px; }
@media (max-width: 760px) {
    .hero { height: 46vh; min-height: 300px !important; }
    .hero .hero__content { padding-bottom: 96px; }
}

.meta-bar.stub-wrap {
    background: transparent;
    color: var(--ink);
    padding: 0;
    font-size: 16px;
    font-weight: 400;
    position: relative;
    z-index: 3;
}
.stub-wrap .shell.inner { display: block; }

.stub {
    --stub-notch: 14px;
    --stub-col: 190px;
    position: relative;
    display: grid;
    grid-template-columns: var(--stub-col) minmax(0, 1fr);
    margin-top: -150px;
    background: var(--paper, #fff);
    color: var(--ink);
    border-radius: 20px;
    /* tacche del biglietto sulla linea di strappo */
    -webkit-mask: radial-gradient(circle var(--stub-notch) at var(--stub-col) 0, #0000 98%, #000) top / 100% 51% no-repeat,
                  radial-gradient(circle var(--stub-notch) at var(--stub-col) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
            mask: radial-gradient(circle var(--stub-notch) at var(--stub-col) 0, #0000 98%, #000) top / 100% 51% no-repeat,
                  radial-gradient(circle var(--stub-notch) at var(--stub-col) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
}
/* La mask taglierebbe box-shadow: contorno e ombra stanno sul contenitore
   (drop-shadow segue anche le tacche). Stessa resa di .tickets-card. */
.stub-wrap .shell.inner {
    filter: drop-shadow(0 0 .5px rgba(20, 12, 8, .28)) drop-shadow(0 14px 18px rgba(20, 12, 8, .10));
}

/* Talloncino con la data */
.stub__date {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 28px 24px;
    border-right: 2px dashed color-mix(in srgb, var(--accent) 30%, transparent);
    color: var(--accent);
}
.stub__day {
    font-family: var(--display);
    font-weight: 800;
    font-size: 5rem;
    line-height: .85;
    letter-spacing: -0.05em;
}
.stub__month {
    font-family: var(--display);
    font-weight: 800;
    font-size: 1.6rem;
    letter-spacing: -0.02em;
    margin-top: 4px;
}
.stub__when {
    margin-top: 12px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-soft, #4b4540);
    line-height: 1.35;
}

/* Corpo del biglietto */
.stub__main { padding: 30px 34px 26px; min-width: 0; }
.stub__title {
    font-family: var(--display) !important;
    font-weight: 800 !important;
    font-size: clamp(2rem, 3.6vw, 3.4rem) !important;
    line-height: 1 !important;
    letter-spacing: -0.035em;
    color: var(--ink);
    margin: 0 0 12px !important;
    text-wrap: balance;
    max-width: 22ch;
}
.stub__title--mid { font-size: clamp(1.8rem, 3vw, 2.8rem) !important; }
.stub__title--long { font-size: clamp(1.6rem, 2.4vw, 2.2rem) !important; max-width: 30ch; }
.stub__lead {
    margin: 0 0 14px;
    max-width: 62ch;
    font-size: 16px;
    line-height: 1.5;
    color: var(--ink-soft, #4b4540);
}
.stub__place {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    font-size: 16px;
    font-weight: 500;
}
.stub__place svg { width: 18px; height: 18px; flex: none; margin-top: 3px; fill: none; stroke: var(--accent); stroke-width: 1.8; }
.stub__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.stub__chips .meta-chip { background: color-mix(in srgb, var(--accent) 9%, transparent); color: var(--ink); border: 0; }
.stub__chips .meta-chip svg { stroke: var(--accent); }

.stub__foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 16px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--rule);
}
.stub__offer { display: flex; align-items: center; gap: 10px; margin-right: auto; }
.stub__price {
    font-family: var(--display);
    font-weight: 800;
    font-size: 1.7rem;
    letter-spacing: -0.02em;
    color: var(--ink);
    white-space: nowrap;
}
.stub__state {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent);
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
}
.stub__state--out { background: var(--ink); color: var(--paper, #fff); }
.stub__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 0 26px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--paper, #fff) !important;
    font-family: var(--display);
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    border: 0;
    transition: transform .15s ease-out, background .15s;
}
.stub__cta:hover { transform: translateY(-1px); background: var(--accent-deep, var(--accent)); }
.stub__cta:focus-visible, .stub__share:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.stub__share {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid var(--rule);
    color: var(--ink);
    background: transparent;
}
.stub__share:hover { border-color: var(--accent); color: var(--accent); }

/* Sulla foto resta solo l'atmosfera: la sfumatura serve meno */
.hero .hero__media::after { opacity: .55; }

@media (max-width: 991.98px) {
    .stub { --stub-col: 150px; }
    .stub__day { font-size: 4rem; }
    .stub__main { padding: 24px 24px 22px; }
}

/* Mobile: talloncino in alto, strappo orizzontale */
@media (max-width: 640px) {
    .stub {
        grid-template-columns: minmax(0, 1fr);
        margin-top: -84px;
        border-radius: 18px;
        -webkit-mask: radial-gradient(circle 12px at 0 var(--stub-cut, 92px), #0000 98%, #000) left / 51% 100% no-repeat,
                      radial-gradient(circle 12px at 100% var(--stub-cut, 92px), #0000 98%, #000) right / 51% 100% no-repeat;
                mask: radial-gradient(circle 12px at 0 var(--stub-cut, 92px), #0000 98%, #000) left / 51% 100% no-repeat,
                      radial-gradient(circle 12px at 100% var(--stub-cut, 92px), #0000 98%, #000) right / 51% 100% no-repeat;
    }
    .stub__date {
        flex-direction: row;
        align-items: baseline;
        flex-wrap: wrap;
        gap: 4px 10px;
        min-height: 92px;
        padding: 20px 20px 16px;
        border-right: 0;
        border-bottom: 2px dashed color-mix(in srgb, var(--accent) 30%, transparent);
    }
    .stub__day { font-size: 3.2rem; }
    .stub__month { font-size: 1.4rem; margin-top: 0; }
    .stub__when { margin-top: 0; flex-basis: 100%; font-size: 14px; }
    .stub__main { padding: 18px 20px 20px; }
    .stub__title { font-size: 2rem !important; }
    .stub__title--mid { font-size: 1.75rem !important; }
    .stub__title--long { font-size: 1.5rem !important; }
    .stub__lead { font-size: 15px; }
    .stub__place { font-size: 15px; }
    .stub__foot { margin-top: 16px; padding-top: 14px; }
    .stub__price { font-size: 1.45rem; }
    /* su mobile l'azione è già nella barra fissa in basso */
    .stub__cta { display: none; }
}

@media (prefers-reduced-motion: reduce) { .stub__cta { transition: none; } }
.stub__when > span { display: block; }
.stub__time { font-family: var(--display); font-weight: 700; color: var(--ink); font-size: 15px; }
.stub__lead { font-family: var(--sans); }
@media (max-width: 640px) {
    .stub__date { justify-content: flex-start; }
    .stub__when > span { display: inline; }
    .stub__when > span + span::before { content: "· "; color: var(--ink-soft, #4b4540); font-weight: 500; }
}

/* Esaurito su desktop: "Avvisami" è già nella scheda-biglietto e accanto al
   biglietto; il piede della colonna sarebbe il terzo doppione. */
@media (min-width: 992px) {
    .ev-buy .sticky-cta:has(.sticky-cta__waitlist, .sticky-cta__soldout) { display: none !important; }
}

/* ============================================================
   Barra acquisto mobile: bilanciata in ogni stato
   - con prezzo: prezzo a sinistra, bottone che riempie il resto
   - senza prezzo (esaurito): bottone a tutta larghezza, centrato
   - esaurito senza lista: scritta centrata, non un finto bottone
   - gratuito: resta "Gratis", mai "€ 0,00"
============================================================ */
@media (max-width: 991.98px) {
    #stickyCta .btn-cta,
    .sticky-cta .btn-cta#stickyCtaBtn {
        flex: 1 1 auto !important;
        max-width: none !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        padding: 14px 18px !important;
        justify-content: center;
        text-align: center;
    }
    #stickyCta .sticky-cta__price { flex: 0 0 auto; max-width: 46%; }
    .sticky-cta--soldout { justify-content: center !important; }
    .sticky-cta--soldout .sticky-cta__waitlist { flex: 1 1 100% !important; margin-left: 0 !important; }
}
.sticky-cta .sticky-cta__soldout {
    flex: 1 1 100%;
    margin: 0;
    padding: 12px 0;
    text-align: center;
    font-family: var(--display);
    font-weight: 700;
    font-size: 16px;
    color: var(--ink);
}
/* gratuito: niente totale a zero, resta "Gratis" anche dopo la scelta */
#stickyCta.sticky-cta--free .sticky-cta__price .from,
#stickyCta.sticky-cta--free #stickyTotal { display: none !important; }
#stickyCta.sticky-cta--free.has-sel .sticky-cta__rest { display: block; }