/*
 * AI Calabria · rifiniture mobile
 * Caricato per ultimo: tutte le regole sono confinate agli schermi mobili
 * per non modificare l'esperienza desktop.
 */

@media (max-width: 767.98px) {
    :root {
        --mobile-gutter: .85rem;
        --mobile-radius: 16px;
        --chat-vv-top: 0px;
        --chat-vv-height: 100dvh;
    }

    html {
        width: 100%;
        overflow-x: clip;
        scroll-padding-top: 92px;
        -webkit-text-size-adjust: 100%;
    }

    body {
        width: 100%;
        min-width: 0;
        overflow-x: clip;
    }

    /* Mantiene l’header visibile durante lo scorrimento anche su mobile.
       overflow-x: clip evita di creare un contenitore che annulli sticky. */
    .site-header {
        position: sticky !important;
        top: 0;
        z-index: 1030;
    }

    main,
    main > section,
    .row,
    [class*="col-"] {
        min-width: 0;
    }

    img,
    video {
        max-width: 100%;
        height: auto;
    }

    /* Leaflet disegna i GeoJSON su canvas: non va forzato a height:auto. */
    .leaflet-container canvas {
        max-width: none;
    }

    .container-fluid.app-shell,
    .app-shell,
    .crus-shell,
    .imp-shell,
    .sqp-in,
    .ntf-in {
        padding-left: var(--mobile-gutter) !important;
        padding-right: var(--mobile-gutter) !important;
    }

    .section-space {
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
    }

    .section-space-sm {
        padding-top: 1.8rem;
        padding-bottom: 3.25rem;
    }

    .py-lg-6 {
        padding-top: 3.6rem !important;
        padding-bottom: 3.8rem !important;
    }

    /* Evita lo zoom automatico di Safari iOS quando un campo riceve il focus. */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea,
    .select2-container--default .select2-selection--single,
    .select2-search--dropdown .select2-search__field {
        font-size: 16px !important;
    }

    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea {
        max-width: 100%;
        min-height: 44px;
    }

    textarea {
        resize: vertical;
    }

    .btn,
    .nav-burger,
    .nav-user-btn,
    .nav-campana,
    .cookie-btn,
    .chat-pan-close,
    .chat-invio button,
    .g-modal-x,
    .cl-x {
        min-height: 44px;
        touch-action: manipulation;
    }

    /* Fascia gratuita e navigazione. */
    .free-forever-bar .app-shell {
        gap: .08rem;
        padding-top: .38rem !important;
        padding-bottom: .38rem !important;
        line-height: 1.25;
    }

    .free-forever-bar strong {
        font-size: .69rem;
        letter-spacing: .055em;
    }

    .free-forever-bar span {
        font-size: .68rem;
    }

    .site-header .navbar {
        padding-top: .45rem;
        padding-bottom: .45rem;
    }

    .brand-lockup {
        min-width: 0;
        gap: .55rem;
    }

    .brand-lockup .brand-mark {
        width: 36px;
        height: 36px;
        border-radius: 11px;
    }

    .brand-lockup strong {
        display: block;
        max-width: 58vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: .96rem;
    }

    .brand-lockup small {
        display: none !important;
    }

    .nav-burger {
        width: 44px;
        height: 44px;
        align-items: center;
        justify-content: center;
        padding: 0;
    }

    #main-navigation {
        max-height: calc(100dvh - 96px);
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        padding: .65rem !important;
        margin-top: .5rem !important;
        border-radius: var(--mobile-radius) !important;
    }

    .nav-links .nav-link,
    .nav-atlas,
    .nav-play,
    .nav-cta,
    .nav-user-btn,
    .nav-drop .dropdown-item {
        min-height: 44px;
    }

    .nav-links .nav-link {
        width: 100%;
        padding: .68rem .78rem !important;
    }

    .nav-actions {
        gap: .45rem;
        margin-top: .5rem;
        padding-top: .65rem;
    }

    .nav-atlas,
    .nav-play,
    .nav-cta,
    .nav-user-btn {
        width: 100%;
        justify-content: center;
        border-radius: 12px;
    }

    .nav-campana {
        width: 44px;
        height: 44px;
        margin: 0;
        align-self: flex-start;
    }

    .nav-drop {
        width: 100%;
        max-height: 46dvh;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    html.mobile-nav-open,
    body.mobile-nav-open,
    html.chat-mobile-open,
    body.chat-mobile-open {
        overflow: hidden;
        overscroll-behavior: none;
    }

    /* Hero e testi principali più leggibili sugli schermi stretti. */
    .campaign-hero h1,
    .campaign-title,
    .hero-section h1,
    .compact-hero h1,
    .errore-hero h1 {
        max-width: 100%;
        overflow-wrap: anywhere;
        font-size: clamp(2.35rem, 11.5vw, 3.25rem) !important;
        line-height: .98 !important;
        letter-spacing: -.045em !important;
    }

    .campaign-copy,
    .campaign-lead,
    .hero-copy,
    .compact-hero p,
    .errore-hero > .app-shell > p {
        max-width: 100%;
        font-size: 1rem !important;
        line-height: 1.58;
    }

    .campaign-heading {
        margin-bottom: 1.75rem;
    }

    .campaign-heading h2,
    .section-heading h2,
    .challenge-home-head h2,
    .footer-impact-call h2 {
        overflow-wrap: anywhere;
        font-size: clamp(2rem, 9.5vw, 2.9rem) !important;
        line-height: 1.02;
    }

    .campaign-trust-row {
        gap: .45rem;
    }

    .campaign-trust-row span {
        padding: .58rem .72rem;
        border-radius: 12px;
        line-height: 1.35;
    }

    .ai-memory-core {
        width: min(360px, 100%);
    }

    .hero-unity-card {
        margin-top: -1rem;
        border-radius: 16px;
    }

    /* Griglie che risultavano troppo compresse in due colonne su telefono. */
    .ai-pipeline,
    .promise-band__grid,
    .project-numbers__grid,
    .double-impact-grid,
    .growth-rule-grid,
    .roadmap-grid--five,
    .book-level-grid,
    .community-book-network__inner,
    .maxibook-section__inner,
    .maxibook-call__inner,
    .project-final-card,
    .team-challenge-card,
    .footer-impact-call {
        grid-template-columns: 1fr !important;
    }

    .ai-pipeline {
        gap: .75rem;
    }

    .ai-pipeline > i {
        display: none;
    }

    .promise-band article,
    .ai-pipeline article,
    .project-pact-grid article,
    .community-role-grid article,
    .recognition-detail-grid article,
    .competition-card,
    .league-card,
    .mission-card,
    .feature-card,
    .book-level-card,
    .privacy-card {
        padding: 1.2rem;
        border-radius: var(--mobile-radius);
    }

    .language-tree-preview,
    .atlas-manifesto-card,
    .challenge-final-card,
    .join-call-card,
    .project-final-card,
    .team-challenge-card,
    .footer-impact-call,
    .community-call__inner,
    .local-team__inner,
    .maxibook-call__inner,
    .maxibook-section__inner,
    .ai-destination__inner,
    .contribution-double-impact__inner,
    .community-book-network__inner {
        padding: 1.25rem;
        border-radius: 18px;
    }

    .language-ai-output {
        grid-template-columns: 1fr;
        gap: .65rem;
    }

    .language-ai-output > span {
        grid-row: auto;
    }

    .sant-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .qp-grid,
    .qp-grid-sub {
        grid-template-columns: 1fr;
    }

    /* Mappe, grafici e contenuti orizzontali. */
    .territory-map {
        height: 55dvh;
        min-height: 350px;
        max-height: 560px;
    }

    .sqp-mappa {
        min-height: 300px;
    }

    .leaflet-popup-content {
        min-width: 0 !important;
        width: min(250px, 70vw);
        margin: 12px;
    }

    .chart-wrap,
    .crus-graf-body {
        min-height: 180px;
    }

    .sfida-tavola-wrap,
    .privacy-table-wrap,
    .admin-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .admin-table,
    .privacy-table,
    .sfida-tavola table {
        min-width: 640px;
    }

    /* Pannelli e modali: altezza basata sul viewport realmente disponibile. */
    .g-modal,
    .cl-modal,
    .cookie-modal {
        align-items: flex-end;
        padding: .65rem;
        padding-bottom: calc(.65rem + env(safe-area-inset-bottom));
    }

    .g-modal-card,
    .cl-card,
    .cookie-modal-card {
        width: 100%;
        max-height: calc(100dvh - 1.3rem - env(safe-area-inset-bottom));
        border-radius: 18px 18px 12px 12px;
    }

    .g-modal-testa,
    .cl-testa,
    .cookie-modal-head {
        padding: .85rem .9rem;
    }

    .g-modal-corpo,
    .cl-corpo,
    .cookie-options {
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .cl-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .cl-tab {
        flex: 0 0 auto;
        min-height: 38px;
    }

    /* HUD della modalità gioco: più compatto e rispettoso della safe area. */
    .p-hud {
        gap: .42rem;
        row-gap: .38rem;
        padding: .52rem .65rem calc(.52rem + env(safe-area-inset-bottom));
        max-height: 40dvh;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .p-hud-prog {
        min-width: 0;
        flex-basis: 100%;
    }

    .p-hud-item {
        padding: .42rem .58rem;
        font-size: .76rem;
    }

    .p-hud-cta {
        flex: 1 1 auto;
        min-height: 42px;
        justify-content: center;
        padding: .5rem .68rem;
        font-size: .78rem;
    }

    .p-hud-spacer {
        height: 132px;
    }

    .p-toast {
        bottom: calc(142px + env(safe-area-inset-bottom));
        width: calc(100vw - 1.4rem);
        border-radius: 14px;
    }

    /* Footer e consenso cookie. */
    .footer-cta,
    .footer-grid,
    .footer-bottom {
        min-width: 0;
    }

    .footer-cta {
        padding: 1.15rem;
        margin-bottom: 1.8rem;
        border-radius: var(--mobile-radius);
    }

    .footer-bottom {
        text-align: center;
    }

    .cookie-banner {
        right: .65rem;
        bottom: calc(.65rem + env(safe-area-inset-bottom));
        width: calc(100vw - 1.3rem);
        max-height: calc(100dvh - 1.3rem - env(safe-area-inset-bottom));
        overflow-y: auto;
        overscroll-behavior: contain;
        border-radius: var(--mobile-radius);
    }

    /* Chat globale: usa il viewport visibile, non quello coperto dalla tastiera. */
    #chat-widget {
        --chat-vv-top: 0px;
        --chat-vv-height: 100dvh;
    }

    .chat-linguetta {
        top: auto;
        right: max(.65rem, env(safe-area-inset-right));
        bottom: calc(.8rem + env(safe-area-inset-bottom));
        transform: none;
        flex-direction: row;
        gap: .45rem;
        padding: .72rem .9rem;
        border-radius: 999px;
        box-shadow: 0 12px 32px rgba(37, 99, 235, .34);
    }

    #chat-widget.has-mobile-hud .chat-linguetta {
        bottom: calc(142px + env(safe-area-inset-bottom));
    }

    .chat-linguetta:hover {
        padding-right: .9rem;
    }

    .chat-linguetta-txt {
        writing-mode: horizontal-tb;
        text-orientation: mixed;
        transform: none;
        letter-spacing: .08em;
    }

    .chat-linguetta-dot {
        top: -.15rem;
        left: -.15rem;
    }

    .chat-pannello {
        right: 0;
        bottom: auto;
        top: var(--chat-vv-top);
        width: 100vw;
        max-width: 100vw;
        height: var(--chat-vv-height);
        max-height: var(--chat-vv-height);
        border-radius: 0;
        box-shadow: none;
        overflow: hidden;
    }

    .chat-pan-head {
        flex: 0 0 auto;
        min-height: 52px;
        padding: calc(.62rem + env(safe-area-inset-top)) .8rem .62rem;
    }

    .chat-pan-tit {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: .94rem;
    }

    .chat-pan-close {
        flex: 0 0 44px;
        width: 44px;
        padding: 0;
        border-radius: 12px;
        background: rgba(255,255,255,.1);
    }

    .chat-pan-body {
        min-height: 0;
        overflow: hidden;
    }

    .chat-avviso-mod {
        flex: 0 0 auto;
        padding: .36rem .65rem;
        font-size: .66rem;
        line-height: 1.3;
    }

    .chat-membri {
        flex: 0 0 auto;
        padding: .42rem .65rem;
    }

    #chat-widget.is-keyboard .chat-avviso-mod,
    #chat-widget.is-keyboard .chat-membri {
        display: none;
    }

    .chat-membri-tit {
        margin-bottom: .3rem;
    }

    .chat-membri-lista {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: .12rem;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .chat-membri-lista::-webkit-scrollbar,
    .cl-tabs::-webkit-scrollbar {
        display: none;
    }

    .chat-membro {
        flex: 0 0 auto;
    }

    .chat-flusso {
        min-height: 0;
        padding: .65rem .7rem;
        gap: .48rem;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        scroll-padding-bottom: 1rem;
    }

    .chat-msg {
        max-width: 90%;
        padding: .48rem .62rem;
    }

    .chat-msg:not(.mio):not(.moderazione) {
        padding-right: 2rem;
    }

    .chat-msg-txt {
        font-size: .9rem;
        line-height: 1.42;
        overflow-wrap: anywhere;
    }

    .chat-msg-flag {
        top: .05rem;
        right: .05rem;
        width: 32px;
        height: 32px;
        display: grid;
        place-items: center;
        opacity: .58;
    }

    .chat-invio {
        flex: 0 0 auto;
        gap: .42rem;
        padding: .5rem max(.62rem, env(safe-area-inset-right)) calc(.5rem + env(safe-area-inset-bottom)) max(.62rem, env(safe-area-inset-left));
        background: #fff;
    }

    .chat-invio input[type="text"] {
        min-width: 0;
        min-height: 44px;
        padding: .65rem .72rem;
        border-radius: 12px;
    }

    .chat-invio button {
        flex: 0 0 44px;
        width: 44px;
        padding: 0;
        border-radius: 12px;
    }

    .chat-vuoto {
        overflow-y: auto;
        padding: 1.4rem 1rem calc(1.4rem + env(safe-area-inset-bottom));
    }
}

@media (max-width: 380px) {
    :root {
        --mobile-gutter: .65rem;
    }

    .campaign-hero h1,
    .campaign-title,
    .hero-section h1,
    .compact-hero h1,
    .errore-hero h1 {
        font-size: 2.2rem !important;
    }

    .campaign-heading h2,
    .section-heading h2,
    .challenge-home-head h2,
    .footer-impact-call h2 {
        font-size: 1.9rem !important;
    }

    .crus-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .chat-msg {
        max-width: 94%;
    }
}

/* Menu utente su mobile: il sottomenu deve restare dentro il pannello
   scrollabile della navigazione e contribuire alla sua altezza. */
@media (max-width: 767.98px) {
    #main-navigation .nav-user {
        position: relative;
        width: 100%;
    }

    #main-navigation .nav-user > .dropdown-menu {
        position: static !important;
        inset: auto !important;
        transform: none !important;
        float: none;
        width: 100%;
        min-width: 0;
        max-height: none;
        margin: .45rem 0 0 !important;
        overflow: visible;
        z-index: auto;
    }

    #main-navigation .nav-user > .dropdown-menu.show {
        display: block;
    }

    #main-navigation .nav-user-btn[aria-expanded="true"] {
        border-color: var(--vision-blue);
        background: rgba(37, 99, 235, .07);
        box-shadow: 0 0 0 3px rgba(37, 99, 235, .1);
    }
}

/* ================================================================
   Partecipa mobile — pannelli laterali a linguetta e HUD selezionabile
   ================================================================ */
@media (max-width: 767.98px) {
    body.pl-mobile-panel-open {
        overflow: hidden !important;
    }

    /* Barra inferiore: il toggle non viene più tagliato dall'overflow. */
    .p-hud {
        display: block !important;
        padding: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        z-index: 900 !important;
        pointer-events: auto !important;
    }

    .p-hud-body {
        display: flex !important;
        align-items: center !important;
        gap: .42rem !important;
        row-gap: .38rem !important;
        max-height: 40dvh;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: .52rem .65rem calc(.52rem + env(safe-area-inset-bottom)) !important;
        -webkit-overflow-scrolling: touch;
    }

    .p-hud-toggle {
        top: -28px !important;
        width: 52px !important;
        height: 30px !important;
        border-radius: 14px 14px 0 0 !important;
        z-index: 3 !important;
        pointer-events: auto !important;
        touch-action: manipulation;
    }

    .p-hud.is-chiuso {
        transform: translateY(calc(100% - 8px));
    }

    /* Le colonne laterali diventano due drawer indipendenti. */
    .pl-sx,
    .pl-dx {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        width: min(92vw, 390px) !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        margin: 0 !important;
        padding: 0 .85rem calc(1rem + env(safe-area-inset-bottom)) !important;
        display: flex !important;
        flex-direction: column !important;
        gap: .75rem !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        background: #f7faff;
        box-shadow: 0 0 42px rgba(5, 24, 50, .34);
        z-index: 9100 !important;
        transition: transform .24s ease, visibility .24s ease;
        visibility: hidden;
    }

    .pl-sx {
        left: 0 !important;
        right: auto !important;
        transform: translateX(-105%);
        border-radius: 0 22px 22px 0;
    }

    .pl-dx {
        right: 0 !important;
        left: auto !important;
        transform: translateX(105%);
        border-radius: 22px 0 0 22px;
    }

    .pl-sx.is-mobile-open,
    .pl-dx.is-mobile-open {
        transform: translateX(0);
        visibility: visible;
    }

    .pl-mobile-panel-head {
        position: sticky;
        top: 0;
        z-index: 4;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        min-height: 62px;
        margin: 0 -.85rem .15rem;
        padding: calc(.72rem + env(safe-area-inset-top)) .9rem .72rem;
        color: #fff;
        box-shadow: 0 10px 24px rgba(5, 24, 50, .16);
    }

    .pl-mobile-panel-head--gloria {
        background: linear-gradient(135deg, #7a4c00, #c98a1e 58%, #f2c75c);
    }

    .pl-mobile-panel-head--contributi {
        background: linear-gradient(135deg, #075f48, #059669 55%, #34d399);
    }

    .pl-mobile-panel-head strong {
        font-size: .96rem;
        font-weight: 900;
        letter-spacing: .02em;
    }

    .pl-mobile-panel-head button {
        display: grid;
        place-items: center;
        width: 42px;
        height: 42px;
        flex: 0 0 42px;
        border: 1px solid rgba(255,255,255,.38);
        border-radius: 13px;
        background: rgba(0,0,0,.12);
        color: #fff;
        font-size: 1.55rem;
        line-height: 1;
        cursor: pointer;
        touch-action: manipulation;
    }

    .pl-mobile-panel-backdrop {
        position: fixed;
        inset: 0;
        display: block;
        z-index: 9050;
        background: rgba(3, 17, 36, .58);
        backdrop-filter: blur(3px);
    }

    .pl-mobile-panel-backdrop[hidden] {
        display: none !important;
    }

    /* Linguette mobile: unica colonna sul lato destro, dal basso verso l'alto. */
    .pl-mobile-tab {
        position: fixed;
        right: 0;
        left: auto;
        z-index: 9001;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 132px;
        min-height: 132px;
        padding: .72rem .42rem;
        border: 0;
        color: #fff;
        box-shadow: -8px 10px 24px rgba(5, 24, 50, .24);
        cursor: pointer;
        touch-action: manipulation;
    }

    .pl-mobile-tab span {
        writing-mode: vertical-rl;
        text-orientation: mixed;
        transform: rotate(180deg);
        font-size: .65rem;
        font-weight: 900;
        letter-spacing: .08em;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .pl-mobile-tab--gloria {
        top: auto;
        bottom: calc(290px + env(safe-area-inset-bottom));
        border-radius: 15px 0 0 0;
        background: linear-gradient(180deg, #f2c75c, #c98a1e 62%, #845400);
    }

    .pl-mobile-tab--contributi {
        top: auto;
        bottom: calc(158px + env(safe-area-inset-bottom));
        border-radius: 0;
        border-top: 1px solid rgba(255,255,255,.24);
        border-bottom: 1px solid rgba(255,255,255,.24);
        background: linear-gradient(180deg, #34d399, #059669 58%, #075f48);
    }

    .pl-mobile-tab[aria-expanded="true"] {
        opacity: 0;
        pointer-events: none;
    }

    /* Chat: prima linguetta dal basso, collegata alle altre due. */
    .chat-linguetta {
        top: auto !important;
        right: 0 !important;
        bottom: calc(54px + env(safe-area-inset-bottom)) !important;
        width: 42px !important;
        min-width: 42px !important;
        height: 104px !important;
        min-height: 104px !important;
        padding: .72rem .42rem !important;
        border-radius: 0 0 0 15px !important;
        transform: none !important;
        flex-direction: column !important;
        gap: .35rem !important;
        z-index: 9001 !important;
        box-shadow: -8px 10px 24px rgba(5, 24, 50, .24) !important;
    }

    .chat-pannello {
        z-index: 9200 !important;
    }

    #chat-widget.has-mobile-hud .chat-linguetta {
        bottom: calc(54px + env(safe-area-inset-bottom)) !important;
    }

    .chat-linguetta:hover {
        padding-right: .42rem !important;
    }

    .chat-linguetta-txt {
        writing-mode: vertical-rl !important;
        text-orientation: mixed !important;
        transform: rotate(180deg) !important;
        font-size: .65rem !important;
        letter-spacing: .1em !important;
    }

    .chat-linguetta-dot {
        top: .35rem !important;
        left: -.22rem !important;
    }

    /* L'azione sotto categorie e sottocategorie non viene mai nascosta. */
    .contrib-nuova-inline--sempre {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

@media (max-width: 390px) {
    .pl-mobile-tab {
        width: 38px;
    }

    .chat-linguetta {
        width: 38px !important;
        min-width: 38px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pl-sx,
    .pl-dx {
        transition: none !important;
    }
}

/* ================================================================
   Navigazione mobile — ripristino CTA e ordine del menu
   ================================================================ */

/* CTA Contribuisci esterna al menu: resta visibile quando il menu è chiuso. */
@media (max-width: 1199.98px) {
    .site-header .navbar > .app-shell {
        flex-wrap: nowrap;
    }

    .nav-mobile-tools {
        flex: 0 0 auto;
    }

    .nav-play--persistent {
        width: auto !important;
        min-height: 42px;
        margin: 0;
        border-radius: 999px;
        white-space: nowrap;
    }
}

@media (max-width: 575.98px) {
    .site-header .navbar > .app-shell {
        gap: .38rem;
    }

    .brand-lockup {
        flex: 1 1 auto;
        max-width: calc(100% - 175px);
    }

    .brand-lockup > span:last-child {
        min-width: 0;
    }

    .brand-lockup strong {
        max-width: 100%;
        font-size: .88rem;
    }

    .nav-mobile-tools {
        gap: .28rem;
    }

    .nav-play--persistent {
        min-height: 40px;
        padding: .48rem .68rem;
        font-size: .68rem;
        letter-spacing: .02em;
    }

    .nav-play--persistent .icn {
        width: .9rem;
        height: .9rem;
    }

    .nav-burger {
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 359.98px) {
    .brand-lockup {
        max-width: calc(100% - 151px);
    }

    .brand-lockup .brand-mark {
        width: 32px;
        height: 32px;
        font-size: .78rem;
    }

    .brand-lockup strong {
        font-size: .78rem;
    }

    .nav-play--persistent {
        padding: .45rem .52rem;
        font-size: .61rem;
    }
}

/* Menu aperto: la CTA esterna scompare e Contribuisci entra come prima voce. */
@media (max-width: 1199.98px) {
    .nav-play--menu {
        display: inline-flex;
        width: 100% !important;
        min-height: 50px;
        align-items: center;
        justify-content: center;
        gap: .55rem;
        margin: 0 0 .72rem;
        padding: .78rem 1rem;
        border-radius: 14px;
        font-size: .86rem;
        font-weight: 900;
        letter-spacing: .055em;
        text-align: center;
    }

    .nav-play--menu .icn {
        width: 1.08rem;
        height: 1.08rem;
        flex: 0 0 auto;
    }

    .site-header.is-mobile-menu-open .navbar > .app-shell {
        flex-wrap: wrap;
    }

    .site-header.is-mobile-menu-open .nav-play--persistent {
        display: none !important;
    }

    .site-header.is-mobile-menu-open .nav-mobile-tools {
        margin-left: auto;
    }
}

@media (max-width: 575.98px) {
    .site-header.is-mobile-menu-open .brand-lockup {
        max-width: calc(100% - 54px);
    }
}

@media (max-width: 359.98px) {
    .site-header.is-mobile-menu-open .brand-lockup {
        max-width: calc(100% - 48px);
    }
}

/* Ordine del menu collassato: Contribuisci, utente, navigazione. */
.nav-user--mobile-order {
    display: none;
}

@media (max-width: 1199.98px) {
    #main-navigation .nav-user--mobile-order {
        display: block;
        width: 100%;
        margin: 0 0 .72rem;
        padding: .62rem;
        border: 1px solid rgba(37, 99, 235, .14);
        border-radius: 14px;
        background: linear-gradient(135deg, rgba(37, 99, 235, .07), rgba(14, 165, 233, .035));
    }

    #main-navigation .nav-user--mobile-order .nav-user-btn {
        min-height: 48px;
        padding: .42rem .75rem .42rem .42rem;
        background: #fff;
        border-color: rgba(37, 99, 235, .18);
        box-shadow: 0 8px 22px rgba(11, 31, 58, .08);
    }

    #main-navigation .nav-user--mobile-order .nav-user-nome {
        max-width: calc(100% - 58px);
        font-size: .98rem;
    }

    #main-navigation .nav-user--desktop-order {
        display: none !important;
    }
}

@media (min-width: 1200px) {
    #main-navigation .nav-user--mobile-order {
        display: none !important;
    }

    #main-navigation .nav-user--desktop-order {
        display: block;
    }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
    #main-navigation .nav-user--mobile-order > .dropdown-menu {
        position: static !important;
        inset: auto !important;
        transform: none !important;
        float: none;
        width: 100%;
        min-width: 0;
        margin: .45rem 0 0 !important;
    }
}

/* ================================================================
   Navigazione responsive — visibilità univoca della CTA Contribuisci
   Correzione regressione: i due comandi mobile non devono comparire
   nella navigazione desktop.
   ================================================================ */
@media (min-width: 1200px) {
    .site-header .nav-mobile-tools,
    .site-header .nav-play--menu,
    .site-header .nav-user--mobile-order {
        display: none !important;
    }

    .site-header .nav-play--desktop {
        display: inline-flex !important;
    }

    .site-header .nav-user--desktop-order {
        display: block !important;
    }
}

@media (max-width: 1199.98px) {
    .site-header .nav-mobile-tools {
        display: flex !important;
    }

    .site-header .nav-play--persistent,
    .site-header .nav-play--menu {
        display: inline-flex !important;
    }

    .site-header .nav-play--desktop,
    .site-header .nav-user--desktop-order {
        display: none !important;
    }

    #main-navigation .nav-user--mobile-order {
        display: block !important;
    }

    .site-header.is-mobile-menu-open .nav-play--persistent {
        display: none !important;
    }
}

/* ========================================================================
   PARTECIPA MOBILE — linguette verticali impilate sul bordo destro
   CHAT in basso, sopra I tuoi contributi, sopra La tua gloria.
   Le linguette restano sotto backdrop e pannelli aperti.
   ======================================================================== */
@media (max-width: 767.98px) {
    .pl-mobile-tab,
    .chat-linguetta {
        position: fixed !important;
        top: auto !important;
        right: 0 !important;
        left: auto !important;
        width: 40px !important;
        min-width: 40px !important;
        padding: .48rem .28rem !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: 1px solid rgba(255, 255, 255, .28) !important;
        border-right: 0 !important;
        border-radius: 12px 0 0 12px !important;
        box-shadow: -7px 7px 18px rgba(5, 24, 50, .20) !important;
        opacity: .94 !important;
        filter: saturate(.9) !important;
        transform: none !important;
        overflow: visible !important;
        transition: opacity .16s ease, filter .16s ease, box-shadow .16s ease !important;
        z-index: 9001 !important;
    }

    .pl-mobile-tab:hover,
    .pl-mobile-tab:focus-visible,
    .chat-linguetta:hover,
    .chat-linguetta:focus-visible {
        opacity: 1 !important;
        filter: saturate(1) !important;
        transform: none !important;
        box-shadow: -9px 8px 22px rgba(5, 24, 50, .26) !important;
    }

    .pl-mobile-tab span,
    .chat-linguetta-txt {
        display: block !important;
        writing-mode: vertical-rl !important;
        text-orientation: mixed !important;
        transform: rotate(180deg) !important;
        max-width: none !important;
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: nowrap !important;
        font-size: .62rem !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        letter-spacing: .04em !important;
        text-transform: uppercase !important;
    }

    /* 1. CHAT: linguetta più bassa. */
    .chat-linguetta,
    #chat-widget.has-mobile-hud .chat-linguetta {
        bottom: calc(58px + env(safe-area-inset-bottom)) !important;
        height: 72px !important;
        min-height: 72px !important;
        flex-direction: column !important;
        gap: .18rem !important;
        background: linear-gradient(180deg, #5876b8, #294779) !important;
    }

    /* 2. I tuoi contributi: 6px sopra CHAT. */
    .pl-mobile-tab--contributi {
        bottom: calc(136px + env(safe-area-inset-bottom)) !important;
        height: 142px !important;
        min-height: 142px !important;
        background: linear-gradient(180deg, #45a789, #087259) !important;
    }

    /* 3. La tua gloria: 6px sopra I tuoi contributi. */
    .pl-mobile-tab--gloria {
        bottom: calc(284px + env(safe-area-inset-bottom)) !important;
        height: 112px !important;
        min-height: 112px !important;
        background: linear-gradient(180deg, #d6b45f, #a87318) !important;
    }

    /* I pannelli e il loro backdrop devono coprire le linguette. */
    .pl-mobile-panel-backdrop {
        z-index: 9050 !important;
    }

    .pl-sx,
    .pl-dx {
        z-index: 9100 !important;
    }

    .chat-pannello {
        z-index: 9200 !important;
    }

    .chat-linguetta-dot {
        top: .28rem !important;
        left: -.18rem !important;
        width: 9px !important;
        height: 9px !important;
    }
}

@media (max-width: 359.98px) {
    .pl-mobile-tab,
    .chat-linguetta {
        width: 37px !important;
        min-width: 37px !important;
    }

    .pl-mobile-tab span,
    .chat-linguetta-txt {
        font-size: .56rem !important;
        letter-spacing: .025em !important;
    }

    .chat-linguetta,
    #chat-widget.has-mobile-hud .chat-linguetta {
        bottom: calc(56px + env(safe-area-inset-bottom)) !important;
        height: 68px !important;
        min-height: 68px !important;
    }

    .pl-mobile-tab--contributi {
        bottom: calc(130px + env(safe-area-inset-bottom)) !important;
        height: 134px !important;
        min-height: 134px !important;
    }

    .pl-mobile-tab--gloria {
        bottom: calc(270px + env(safe-area-inset-bottom)) !important;
        height: 106px !important;
        min-height: 106px !important;
    }
}

/* ========================================================================
   PARTECIPA MOBILE — linguette più discrete e sempre sotto i pannelli aperti
   ======================================================================== */
@media (max-width: 767.98px) {
    /* Una piccola parte della linguetta resta fuori viewport: riduce
       l'ingombro sull'area di lavoro ma conserva una zona touch comoda. */
    .pl-mobile-tab,
    .chat-linguetta,
    #chat-widget.has-mobile-hud .chat-linguetta {
        right: -9px !important;
    }

    /* Quando la chat è aperta, le linguette della plancia non devono
       comparire né intercettare tocchi sopra il pannello a tutto schermo. */
    body.chat-mobile-open .pl-mobile-tab {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        z-index: 1 !important;
    }

    /* Stesso comportamento quando è aperto uno dei due drawer laterali. */
    body.pl-mobile-panel-open .pl-mobile-tab,
    body.pl-mobile-panel-open .chat-linguetta {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        z-index: 1 !important;
    }
}

/* Partecipa razionalizzata: un solo drawer e gioco a tutta larghezza. */
@media (max-width: 767.98px) {
    .plancia.plancia--semplice {
        display: flex !important;
        flex-direction: column;
        height: auto;
        min-height: 0;
        padding: .65rem;
    }
    .plancia--semplice .pl-testa { order: 0; margin-bottom: .65rem; padding: .8rem; }
    .plancia--semplice .pl-centro { order: 1; width: 100%; margin-bottom: 0; overflow: visible; padding: 0; }
    .plancia--semplice .pl-sx { order: 2; }
    .pl-testa-main { grid-template-columns: 1fr; gap: .6rem; }
    .pl-testa--razionale .pl-saluto { font-size: 1rem; line-height: 1.28; }
    .pl-hero-sicurezza { padding: .7rem; }
    .pl-hero-compagnia { grid-template-columns: auto minmax(0,1fr); }
    .pl-hero-compagnia-stats { grid-template-columns: repeat(2,minmax(0,1fr)); row-gap: .45rem; }
    .pl-hero-compagnia-kpi:nth-child(odd) { border-left: 0; }
    .pl-hero-compagnia-kpi:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.10); padding-top: .4rem; }
    .pl-hero-actions { grid-template-columns: repeat(2,minmax(0,1fr)); gap: .45rem; }
    .pl-hero-actions > button { min-height: 54px; padding: .55rem .62rem; }
    .pl-hero-actions > button:last-child { grid-column: 1 / -1; }
    .pl-fronti--hero { overflow-x: auto; flex-wrap: nowrap; padding-bottom: .15rem; scrollbar-width: none; }
    .pl-fronti--hero::-webkit-scrollbar { display: none; }
    .pl-fronti--hero .q-fronte { flex: 0 0 auto; }

    .pl-mobile-tab--gloria {
        bottom: calc(136px + env(safe-area-inset-bottom)) !important;
        height: 128px !important;
        min-height: 128px !important;
    }
    .pl-mobile-tab--contributi { display: none !important; }

    .pl-info-modal { padding: 0; align-items: end; }
    .pl-info-modal-card,
    .pl-info-modal-card--wide,
    .pl-info-modal-card--contributi {
        width: 100%;
        max-height: 92dvh;
        border-radius: 22px 22px 0 0;
    }
    .pl-info-modal-head { padding: .85rem; }
    .pl-info-modal-head p { display: none; }
    .pl-info-modal-body { padding: .8rem; }
    .pl-info-modal-body--chart { grid-template-columns: 1fr; gap: .7rem; }
    .pl-modal-dough { height: 230px; }
    .pl-missioni-modal-list { grid-template-columns: 1fr; }
    .pl-contributi-filtri { grid-template-columns: 1fr; gap: .55rem; }
    .pl-info-modal-count { display: none; }
    body.pl-info-modal-aperta .pl-mobile-tab,
    body.pl-info-modal-aperta .chat-linguetta { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
}

/* Partecipa — hero collassabile su tablet e smartphone. */
@media (max-width: 767.98px) {
    .plancia--semplice .pl-testa.pl-testa--razionale {
        margin-bottom: 3.5rem;
        padding: .72rem;
    }
    .pl-hero-collapse-toggle {
        position: absolute;
        left: 50%;
        bottom: -48px;
        width: calc(100% - 1.2rem);
        min-width: 0;
        min-height: 48px;
        margin: 0;
        padding: .48rem .62rem;
        border-radius: 0 0 19px 19px;
        transform: translateX(-50%);
    }
    .pl-hero-collapse-toggle:hover,
    .pl-hero-collapse-toggle:focus-visible { transform: translateX(-50%) translateY(2px); }
    .pl-hero-collapse-toggle__copy { flex: 1; }
    .pl-hero-collapse-toggle__copy small { font-size: .56rem; }
    .pl-hero-collapsible { max-height: 1800px; }
    .pl-testa--razionale.is-hero-collapsed {
        min-height: 0;
        margin-bottom: 3.5rem;
        padding: .58rem !important;
    }
    .pl-testa--razionale.is-hero-collapsed .pl-hero-collapse-toggle { margin-bottom: 0; }
}
@media (max-width: 420px) {
    .pl-hero-collapse-toggle__copy small { display: none; }
    .pl-hero-collapse-toggle__copy b { font-size: .68rem; }
}

/* Partecipa mobile — la linguetta resta interamente sotto la hero. */
@media (max-width: 767.98px) {
    .plancia--semplice .pl-testa.pl-testa--razionale,
    .plancia--semplice .pl-testa.pl-testa--razionale.is-hero-collapsed {
        margin-bottom: 4.8rem;
    }
    .plancia--semplice .pl-hero-collapse-toggle {
        top: calc(100% + 10px);
        bottom: auto;
        border-radius: 8px 8px 19px 19px;
    }
}

/* Partecipa mobile — linguetta aderente al bordo blu, senza distacco. */
@media (max-width: 767.98px) {
    .plancia--semplice .pl-testa.pl-testa--razionale,
    .plancia--semplice .pl-testa.pl-testa--razionale.is-hero-collapsed {
        margin-bottom: 3.55rem;
    }
    .plancia--semplice .pl-hero-collapse-toggle {
        top: 100%;
        bottom: auto;
        border-top: 0;
        border-radius: 0 0 19px 19px;
    }
}

/* Audio dei contributi su mobile: touch target grande e player non ritagliato. */
@media (max-width: 767.98px) {
    .voce-audio-toggle { display: flex; }
    .voce-audio-wrap .voce-audio {
        display: block;
        width: 100% !important;
        max-width: none !important;
        min-height: 46px !important;
        height: 46px !important;
        margin: 0 !important;
    }
    .voce-audio-wrap {
        width: 100%;
        padding: .15rem 0;
    }
}

/* ========================================================================
   PARTECIPA — collapse mobile integrato e sempre leggibile
   La linguetta non resta più sospesa fuori dalla hero: vive dentro la barra,
   conserva nome utente/Comune ed è interamente raggiungibile con il pollice.
   ======================================================================== */
@media (max-width: 767.98px) {
  .plancia--semplice .pl-testa.pl-testa--razionale,
  .plancia--semplice .pl-testa.pl-testa--razionale.is-hero-collapsed {
    min-height: 0;
    margin-bottom: .7rem !important;
    padding: .65rem !important;
    border-radius: 17px;
  }

  .plancia--semplice .pl-hero-collapse-toggle,
  .plancia--semplice .pl-testa.pl-testa--razionale.is-hero-collapsed .pl-hero-collapse-toggle {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    min-width: 0;
    min-height: 54px;
    margin: .55rem 0 0;
    padding: .48rem .58rem;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 14px;
    color: #fff;
    background: rgba(255,255,255,.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
    transform: none !important;
  }
  .plancia--semplice .pl-hero-collapse-toggle:hover,
  .plancia--semplice .pl-hero-collapse-toggle:focus-visible,
  .plancia--semplice .pl-testa.pl-testa--razionale.is-hero-collapsed .pl-hero-collapse-toggle:hover,
  .plancia--semplice .pl-testa.pl-testa--razionale.is-hero-collapsed .pl-hero-collapse-toggle:focus-visible {
    transform: none !important;
  }
  .plancia--semplice .pl-hero-collapse-toggle::before { display: none !important; }
  .plancia--semplice .pl-hero-collapse-toggle__copy { min-width: 0; text-align: left; }
  .plancia--semplice .pl-hero-collapse-toggle__copy b { display: block; font-size: .72rem; line-height: 1.2; }
  .plancia--semplice .pl-hero-collapse-toggle__copy small {
    display: block !important;
    max-width: 100%;
    margin-top: .12rem;
    overflow: hidden;
    color: rgba(234,242,255,.72);
    font-size: .56rem;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .plancia--semplice .pl-hero-collapse-toggle__icon,
  .plancia--semplice .pl-hero-collapse-toggle__chevron {
    flex: 0 0 auto;
  }

  .plancia--semplice .pl-testa.pl-testa--razionale.is-hero-collapsed {
    padding: .48rem !important;
    background: radial-gradient(circle at 88% 0, rgba(37,99,235,.5), transparent 45%), linear-gradient(120deg,#081b35,#0f3364 72%,#1e4fb0);
    box-shadow: 0 10px 24px rgba(8,27,53,.22);
  }
  .plancia--semplice .pl-testa.pl-testa--razionale.is-hero-collapsed .pl-hero-collapse-toggle {
    min-height: 58px;
    margin-top: 0;
    background: rgba(255,255,255,.075);
  }
  .plancia--semplice .pl-testa.pl-testa--razionale.is-hero-collapsed .pl-hero-collapse-toggle__icon,
  .plancia--semplice .pl-testa.pl-testa--razionale.is-hero-collapsed .pl-hero-collapse-toggle__chevron {
    color: #081b35;
    background: #f2c75c;
  }
}

/* ========================================================================
   HEADER MOBILE SEMPRE VISIBILE
   Il menu principale non si nasconde mai durante scroll, click, apertura
   dei dropdown o navigazione tra pagine. La composizione GPU evita inoltre
   le sparizioni intermittenti di position: sticky su Safari iOS.
   ======================================================================== */
@media (max-width: 1199.98px) {
    .site-header,
    .site-header.sticky-top {
        position: -webkit-sticky !important;
        position: sticky !important;
        top: 0 !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        z-index: 1050 !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: translate3d(0, 0, 0) !important;
        translate: none !important;
        will-change: transform;
        transition-property: background-color, border-color, box-shadow !important;
    }
}