/* ═══════════════════════════════════════════════════════════════════════
   SEZIONE INFORMATIVA — menu, elenchi e schede
   ═══════════════════════════════════════════════════════════════════════
   Stili della parte "Scopri": il menu che si apre dall'hamburger, gli
   elenchi dei trattamenti e dei corsi, le schede di dettaglio.

   I testi stanno in contenuti.js, la logica in info.js.
   Usa le stesse variabili di colore di style.css, quindi cambiando il tema
   li' cambia anche qui.
   ═══════════════════════════════════════════════════════════════════════ */

/* L'attributo hidden deve vincere sulle regole di display qui sotto. */
[hidden] {
    display: none !important;
}

/* ─── Pulsante hamburger ─────────────────────────────────────────────── */
/* Misure e tempi ripresi dal sito di riferimento (ariayogaboutique.com):
   due righe da 1px larghe 35px, distanti 5.5px dal centro; all'apertura
   ruotano di 135 gradi e si accorciano a 28px, formando la X.
   Transizione: transform e width, 0.25s, cubic-bezier(0.2, 0.6, 0.3, 1). */
.btn-hamburger {
    position: absolute;
    top: 14px;
    right: 14px;
    /* Sopra alla coperta del menu: e' lo stesso pulsante a chiudere. */
    z-index: 1001;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
}

/* A menu aperto la pagina non scorre piu': il pulsante passa a fixed per
   restare al suo posto anche se si era scesi lungo la pagina. Il calcolo
   tiene conto della colonna centrata da 480px. */
body.menu-aperto .btn-hamburger {
    position: fixed;
    top: 14px;
    right: max(14px, calc(50% - 240px + 14px));
}

.hamburger-box {
    position: relative;
    display: block;
    width: 35px;
    height: 12px;
}

.hamburger-linea {
    position: absolute;
    left: 0;
    top: 50%;
    display: block;
    width: 35px;
    height: 1px;
    background: var(--text-main);
    transition: transform 0.25s cubic-bezier(0.2, 0.6, 0.3, 1),
                width 0.25s cubic-bezier(0.2, 0.6, 0.3, 1);
}

.hamburger-linea--alta {
    transform: translateY(-5.5px);
}

.hamburger-linea--bassa {
    transform: translateY(5.5px);
}

.btn-hamburger.is-attivo .hamburger-linea {
    width: 28px;
}

.btn-hamburger.is-attivo .hamburger-linea--alta {
    transform: translateX(3.5px) rotate(-135deg);
}

.btn-hamburger.is-attivo .hamburger-linea--bassa {
    transform: translateX(3.5px) rotate(135deg);
}

/* ─── Coperta del menu ───────────────────────────────────────────────── */
.menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    padding: 22px 24px calc(22px + env(safe-area-inset-bottom));
    background: rgba(6, 4, 6, 0.97);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    opacity: 0;
    /* Stessa dissolvenza del sito di riferimento. */
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
}

.menu-overlay.is-aperto {
    opacity: 1;
}

body.menu-aperto {
    overflow: hidden;
}

/* Lo sfondo scuro copre tutto lo schermo, ma il contenuto resta incolonnato
   come il resto dell'app (480px): senza questo, su monitor larghi le scritte
   finiscono contro il bordo sinistro mentre la X resta sulla colonna. */
.menu-overlay-testa,
.menu-voci,
.menu-overlay-piede {
    width: 100%;
    max-width: 432px;
    margin-left: auto;
    margin-right: auto;
}

.menu-overlay-testa {
    display: flex;
    align-items: center;
    /* Lascia spazio all'hamburger, che ora sta sopra alla coperta. */
    padding-right: 46px;
    margin-bottom: 34px;
}

.menu-overlay-titolo {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* ─── Voci del menu ──────────────────────────────────────────────────── */
/* Le voci scorrono insieme come un blocco unico, non una alla volta:
   e' il comportamento del sito di riferimento (transform 0.6s). */
.menu-voci {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 26px;
    flex: 1;
    transform: translateY(24px);
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.menu-overlay.is-aperto .menu-voci {
    transform: translateY(0);
}

/* Solo icona e testo grande: niente sfondo, niente bordo, niente freccia. */
.menu-voce {
    display: flex;
    align-items: center;
    /* Il foglio di stile dell'app centra il contenuto di tutti i button:
       qui serve allineato a sinistra. */
    justify-content: flex-start;
    gap: 16px;
    width: 100%;
    padding: 4px 0;
    background: none;
    border: none;
    color: var(--text-main);
    text-align: left;
    cursor: pointer;
    transition: color 0.25s cubic-bezier(0.2, 0.6, 0.3, 1),
                transform 0.25s cubic-bezier(0.2, 0.6, 0.3, 1);
}

.menu-voce > .ph {
    flex-shrink: 0;
    font-size: 26px;
    color: var(--primary-accent);
    transition: color 0.25s cubic-bezier(0.2, 0.6, 0.3, 1);
}

.menu-voce-titolo {
    font-size: clamp(25px, 7.2vw, 32px);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.5px;
    /* Distribuisce le righe dei titoli lunghi invece di lasciarne una monca. */
    text-wrap: balance;
}

.menu-voce:active {
    transform: translateX(4px);
    color: var(--primary-accent);
}

@media (hover: hover) {
    .menu-voce:hover {
        color: var(--primary-accent);
    }
}

.menu-overlay-piede {
    margin-top: 30px;
}

.menu-whatsapp {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 0 4px;
    border-top: 1px solid var(--border-subtle);
    color: #25D366;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
}

.menu-whatsapp .ph {
    font-size: 21px;
}

/* ─── Testata delle schermate informative ────────────────────────────── */
.info-sottotitolo {
    margin: -4px 0 30px;
    font-size: 16px;
    line-height: 1.5;
    color: var(--text-muted);
}

/* ─── Elenco dei trattamenti / corsi ─────────────────────────────────── */
/* Impaginazione ad ampio respiro, sul modello del sito di riferimento:
   foto a tutta larghezza in rapporto 3:2, titolo grande, testo 16px con
   interlinea 1.5, e molto spazio fra un blocco e l'altro. Niente riquadri:
   il ritmo lo danno le immagini e i vuoti. */
.info-elenco {
    display: flex;
    flex-direction: column;
    gap: 46px;
    margin-top: 4px;
}

.info-voce {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    /* Il foglio di stile dell'app centra il contenuto di tutti i button. */
    justify-content: flex-start;
    width: 100%;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    color: var(--text-main);
    font-weight: 400;
    text-align: left;
    cursor: pointer;
}

.info-voce-foto {
    width: 100%;
    aspect-ratio: 3 / 2;
    margin-bottom: 18px;
    overflow: hidden;
    /* Angoli appena smussati: il sito di riferimento li ha vivi, ma qui
       stonerebbero col resto dell'app. */
    border-radius: 4px;
    transition: opacity 0.3s cubic-bezier(0.2, 0.6, 0.3, 1);
}

.info-voce-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.info-voce:active .info-voce-foto {
    opacity: 0.72;
}

.info-voce-nome {
    font-size: 26px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.4px;
}

.info-voce-durata {
    margin-top: 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--primary-accent);
}

.info-voce-sintesi {
    margin-top: 12px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #b9b9b9;
}

@media (hover: hover) {
    .info-voce:hover .info-voce-foto {
        opacity: 0.85;
    }
}

/* ─── Scheda di dettaglio ────────────────────────────────────────────── */
.info-hero {
    width: 100%;
    aspect-ratio: 3 / 2;
    margin-bottom: 20px;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.info-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Sfondo decorativo usato quando la foto manca o non si carica: cosi' la
   pagina resta presentabile anche prima che arrivino le immagini vere. */
.senza-immagine {
    background:
        radial-gradient(circle at 30% 25%, var(--primary-accent-subtle), transparent 60%),
        radial-gradient(circle at 75% 80%, var(--secondary-accent-subtle), transparent 55%),
        var(--card-bg-2);
    border: 1px solid var(--border-subtle);
}

.info-dettaglio-titolo {
    margin-bottom: 8px;
    font-size: 23px;
    font-weight: 600;
    line-height: 1.25;
}

.info-dettaglio-durata {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 20px;
    font-size: 13px;
    font-weight: 500;
    color: var(--primary-accent);
}

.info-paragrafo {
    margin-bottom: 14px;
    font-size: 14.5px;
    line-height: 1.7;
    color: #d4d4d4;
}

.info-punti {
    margin: 20px 0 4px;
    padding: 16px;
    list-style: none;
    background: var(--card-bg);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}

.info-punti li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13.5px;
    line-height: 1.55;
    color: #d4d4d4;
}

.info-punti li+li {
    margin-top: 12px;
}

.info-punti .ph {
    flex-shrink: 0;
    margin-top: 1px;
    font-size: 16px;
    color: var(--secondary-accent);
}

/* ─── Riquadri della pagina "Chi sono" ───────────────────────────────── */
.info-riquadri {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin: 20px 0 4px;
}

.info-riquadro {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 16px 14px;
    background: var(--card-bg);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}

.info-riquadro .ph {
    margin-bottom: 3px;
    font-size: 20px;
    color: var(--primary-accent);
}

.info-riquadro-titolo {
    font-size: 13.5px;
    font-weight: 600;
}

.info-riquadro-testo {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--text-muted);
}

/* ─── Sedi ───────────────────────────────────────────────────────────── */
.info-sedi {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.info-sede {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 16px;
    background: var(--card-bg);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}

.info-sede-nome {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
}

.info-sede-nome .ph {
    font-size: 18px;
    color: var(--primary-accent);
}

.info-sede-indirizzo {
    font-size: 13.5px;
    line-height: 1.55;
    color: #d4d4d4;
}

.info-sede-nota {
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-muted);
}

/* Riquadro della mappa: prima il pulsante, poi l'iframe che lo sostituisce. */
.info-sede-mappa {
    margin-top: 14px;
    border-radius: 10px;
    overflow: hidden;
}

.info-sede-mostra-mappa {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    padding: 26px 16px;
    background: var(--card-bg-2);
    border: 1px dashed var(--border-subtle);
    border-radius: 10px;
    color: var(--text-muted);
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-base);
}

.info-sede-mostra-mappa .ph {
    font-size: 19px;
    color: var(--primary-accent);
}

.info-sede-mostra-mappa:active {
    transform: scale(0.985);
    color: var(--text-main);
}

.info-sede-iframe {
    display: block;
    width: 100%;
    height: 210px;
    border: 0;
    /* La mappa di Google e' chiara: nel tema scuro la smorzo un po' cosi'
       non abbaglia, e la riporto piena quando ci si passa sopra. */
    filter: saturate(0.9) brightness(0.92);
}

.info-sede-indicazioni {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary-accent);
    text-decoration: none;
}

/* ─── Pulsanti in fondo alle schede ──────────────────────────────────── */
.info-azioni {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 26px;
}

.info-btn-whatsapp {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
}

.info-btn-whatsapp .ph {
    font-size: 18px;
}

/* ─── Schermi larghi ─────────────────────────────────────────────────── */
@media (min-width: 560px) {
    .info-azioni {
        flex-direction: row;
    }

    .info-azioni>* {
        flex: 1;
    }
}

/* Chi preferisce meno movimento non deve subire le animazioni di entrata. */
@media (prefers-reduced-motion: reduce) {

    .menu-overlay,
    .menu-voci,
    .menu-voce,
    .hamburger-linea {
        transition: none;
    }

    .menu-voci {
        transform: none;
    }
}

/* ─── Contatti rapidi nella testata ──────────────────────────────────── */
/* Al posto del pulsante largo: due icone affiancate, WhatsApp e Instagram.
   Restano da 44px, la misura minima per essere toccate comodamente. */
.contatti-rapidi {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 16px;
}

.btn-contatto {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 21px;
    text-decoration: none;
    transition: transform 0.25s cubic-bezier(0.2, 0.6, 0.3, 1),
                background-color 0.25s cubic-bezier(0.2, 0.6, 0.3, 1),
                color 0.25s cubic-bezier(0.2, 0.6, 0.3, 1);
}

.btn-contatto:active {
    transform: scale(0.92);
}

.btn-contatto--whatsapp {
    background: rgba(37, 211, 102, 0.1);
    border: 1px solid rgba(37, 211, 102, 0.3);
    color: #25D366;
}

.btn-contatto--instagram {
    background: rgba(207, 126, 179, 0.1);
    border: 1px solid rgba(207, 126, 179, 0.32);
    color: var(--primary-accent);
}

@media (hover: hover) {
    .btn-contatto--whatsapp:hover {
        background: #25D366;
        color: #082814;
    }

    .btn-contatto--instagram:hover {
        background: var(--primary-accent);
        color: #1a0d16;
    }
}