/* ============================================================ */
/* TuttoSagra — variabili globali                               */
/* Palette semantica: i file consumano queste, non hex liberi.  */
/* ============================================================ */

:root {
    /* ---- Superfici e testo ---- */
    --bg: #f5f1eb;
    --surface: #faf8f5;
    --surface-hover: #ede8e1;
    --card: #f4efe8;
    --text: #3d2b1f;
    --text-soft: #5f5145;
    --muted: #8a7b6f;
    --muted-strong: #6b6258;
    --border: #e5ddd3;
    --border-strong: #d9cec2;
    --border-muted: #ece5db;

    /* ---- Colori di marca ---- */
    --green: #688d69;
    --green-dark: #557454;
    --orange: #b3562f;
    --orange-dark: #9a4a28;
    --orange-soft: #fff5ec;
    --brown: #4a2c14;
    --gold: #c08a2e;
    --gold-soft: #e8d9b8;
    /* blu informativo: note, avvisi neutri (tono desaturato come --green) */
    --info: #5b7fa6;
    --info-bg-light: #eef4f9;

    --accent: var(--green);
    --accent-bg-light: #eaf2ea;

    /* ---- Stati semantici (alert, flash, badge) ---- */
    /* warning / giallo */
    --warning: #d4a843;
    --warning-border: #f1c40f;
    --warning-bg: #fff8e1;
    --warning-text: #7d6608;
    /* success / verde */
    --success: #1a6c3c;
    --success-bg: #d4edda;
    /* danger / rosso */
    --danger: #c0392b;
    --danger-bg: #fde8e6;
    --danger-dark: #a93226;
    /* azione secondaria forte / arancio acceso */
    --hot: #e67e22;
    --hot-dark: #ca6f1e;

    /* ---- Toni su fondo scuro (pannello promo, overlay) ---- */
    --on-dark-90: rgba(255, 255, 255, 0.9);
    --on-dark-70: rgba(255, 255, 255, 0.7);
    --on-dark-55: rgba(255, 255, 255, 0.55);
    --on-dark-30: rgba(255, 255, 255, 0.3);
    --on-dark-15: rgba(255, 255, 255, 0.15);
    --on-dark-12: rgba(255, 255, 255, 0.12);
    --on-dark-08: rgba(255, 255, 255, 0.08);
    --on-dark-04: rgba(255, 255, 255, 0.04);

    /* ---- Pannello scuro caldo (footer, promo, notice) ---- */
    /* Due livelli: --dark-bg fondo profondo, --dark-panel pannello  */
    /* galleggiante un gradino piu' chiaro.                          */
    --dark-panel: #2a2318;
    --dark-accent: #c4553e;
    --dark-accent-strong: #a84d30;

    /* ---- Marker mappa per categoria (spec 55) ---- */
    /* Placeholder: da agganciare ai token reali del design system    */
    /* prima del merge. Nessuno e' rosso (riservato al brand).        */
    --marker-sagra: #d99a3b;
    --marker-fiera: #3b6fd9;
    --marker-rievocazione: #7d4fb3;
    --marker-concerto: #2a9d8f;
    --marker-spettacolo: #c23b8e;
    --marker-cluster: var(--dark-bg);

    /* ---- Forma ---- */
    --radius-sm: 6px;
    --radius: 12px;
    --radius-lg: 20px;
    --radius-pill: 999px;
    --shadow-sm: 0 8px 18px rgba(0, 0, 0, 0.05);
    --shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    --shadow-hover: 0 12px 28px rgba(0, 0, 0, 0.08);

    /* ---- Tipografia ---- */
    --font-display: "Newsreader", Georgia, serif;
    --font-body: "Google Sans", system-ui, -apple-system, sans-serif;
}
/* ============================================================ */
/* Font self-hosted                                             */
/* Woff2 variabili (roman + italic), subset italiano, in       */
/* /static/fonts/.                                              */
/* Newsreader serve solo per gli h1 (l'asse opsz lo gestisce il */
/* browser in base al font-size), Google Sans per il resto.     */
/* ============================================================ */

@font-face {
    font-family: "Newsreader";
    src: url("/static/fonts/newsreader-var.woff2") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Newsreader";
    src: url("/static/fonts/newsreader-italic-var.woff2") format("woff2");
    font-weight: 400 700;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Google Sans";
    src: url("/static/fonts/google-sans-var.woff2") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Google Sans";
    src: url("/static/fonts/google-sans-italic-var.woff2") format("woff2");
    font-weight: 400 700;
    font-style: italic;
    font-display: swap;
}
/* ============================================================ */
/* Reset minimo                                                 */
/* ============================================================ */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    background: var(--surface);
    color: var(--text);
    line-height: 1.5;

    display: flex;
    flex-direction: column;
    min-height: 100dvh;

    > main {
        flex: 1;
    }
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
    &:hover {
        text-decoration: underline;
    }
}

button,
input,
textarea,
select {
    font: inherit;
    color: inherit;
}

h1 {
    font-family: var(--font-display);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--text);
}

h2,
h3,
h4,
h5 {
    font-family: var(--font-body);
    font-weight: 600;
    line-height: 1.1;
    color: var(--text);
}

hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 2rem 0;
}

mark {
    background: var(--orange-soft);
    color: var(--orange);
    padding: 0 2px;
    border-radius: 3px;
}
/* ============================================================ */
/* Layout container                                             */
/* ============================================================ */

:root {
    /* Sito a tema chiaro: i widget nativi (dialog, controlli) devono
       seguire. Con "dark" il testo del <dialog> diventa bianco. */
    color-scheme: light;
}

html {
    background: var(--bg);
}

/* Fade-in di sviluppo: ammorbidisce il reload del live-reload.
   Attivo solo quando il body ha la classe .dev (DEV_MODE). */
body.dev {
    opacity: 0;
    animation: dev-fade-in 0.5s ease forwards;
}

@keyframes dev-fade-in {
    to {
        opacity: 1;
    }
}

.container {
    width: min(1120px, calc(100% - 48px));
    margin: 0 auto;

    &.narrow {
        width: min(720px, calc(100% - 48px));
    }
}

.muted {
    color: var(--muted);
}
.empty {
    color: var(--muted);
    font-style: italic;
    padding: 1.5rem 0;
    text-align: center;
}
/* ============================================================ */
/* Form — design system condiviso                              */
/* Stile sugli ELEMENTI dentro <form>: ogni input/label eredita */
/* da qui senza classi dedicate. La search-box e' esclusa       */
/* (form:not(.search-box)): e' una pill con input nudi, non un  */
/* form di campi, e si stila per conto suo in condivisi.css.    */
/* ============================================================ */

form:not(.search-box) {
    /* Unita' di raggruppamento label + campo. Unica classe          */
    /* strutturale: impila in verticale con respiro tra i gruppi.    */
    .form-group {
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
        margin-bottom: 1.25rem;
        /* relative: ancora i dropdown assoluti dentro il gruppo
           (es. autocomplete-results del campo comune). */
        position: relative;
    }

    /* I fieldset sono raggruppamenti logici, non riquadri: via il
       bordo/padding di default del browser. Niente display esplicito:
       alcuni fieldset (es. griglia categorie del wizard) sono grid. */
    fieldset {
        margin: 0;
        padding: 0;
        border: 0;
        min-width: 0;
    }

    legend {
        padding: 0;
        margin-bottom: 0.3rem;
        /* Le legend sono domande intere ("C'e' cibo?", "Che tipo di
           evento e'?"): tondo e peso pieno, non il maiuscoletto delle
           label di campo. */
        font-size: 1rem;
        font-weight: 600;
        color: var(--text);
    }

    label,
    .form-group > span:first-child {
        font-size: 0.78rem;
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: 0.06em;
        font-weight: 600;
    }

    /* Gli hint sotto l'etichetta sono frasi, non etichette:
       annullano l'uppercase ereditato dalla label. */
    label small {
        text-transform: none;
        letter-spacing: normal;
        font-weight: 400;
        font-size: 0.85rem;
        color: var(--muted-strong);
    }

    /* Le label che CONTENGONO una checkbox sono testo di consenso, non
       etichette di campo: niente uppercase, colore pieno, layout inline. */
    label:has(input[type="checkbox"]) {
        display: flex;
        align-items: flex-start;
        gap: 0.65rem;
        font-size: 1rem;
        color: var(--text);
        text-transform: none;
        letter-spacing: normal;
        font-weight: 400;
        cursor: pointer;
    }

    /* Checkbox custom: rendering identico su ogni browser/color-scheme. */
    input[type="checkbox"] {
        appearance: none;
        flex: none;
        width: 1.15rem;
        height: 1.15rem;
        margin-top: 0.15rem;
        border: 1.5px solid var(--border-strong);
        border-radius: 4px;
        background: white;
        cursor: pointer;

        &:checked {
            border-color: var(--green);
            background-color: var(--green);
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
            background-size: 0.8rem;
            background-position: center;
            background-repeat: no-repeat;
        }

        &:focus-visible {
            outline: 2px solid var(--orange);
            outline-offset: 1px;
        }
    }

    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="url"],
    input[type="date"],
    input[type="time"],
    input[type="number"],
    input[type="search"],
    textarea,
    select {
        width: 100%;
        padding: 0.75rem 0.9rem;
        border: 1px solid var(--border);
        border-radius: var(--radius);
        background: white;
        /* I form control non ereditano il font: senza questo restano
           al default del browser (~13px, font di sistema). 1rem evita
           anche lo zoom automatico di iOS al focus. */
        font: inherit;
        font-size: 1rem;

        &:focus {
            outline: 2px solid var(--orange);
            outline-offset: -1px;
            border-color: transparent;
        }
    }

    textarea {
        resize: vertical;
        min-height: 100px;
    }

    /* Testo di aiuto sotto un campo (es. "Almeno 8 caratteri"). */
    .form-hint {
        font-size: 0.78rem;
        color: var(--muted);
    }

    /* Neutralizza il background giallo/verde dell'autofill del browser:
           mantiene il fondo bianco e il testo leggibile. */
    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus {
        -webkit-text-fill-color: var(--text);
        -webkit-box-shadow: 0 0 0 100px white inset;
        caret-color: var(--text);
    }
}

/* Banner di errore in cima al form. Fuori dallo scope `form`    */
/* perche' a volte sta sopra il <form>, non dentro.              */
.form-error-banner {
    padding: 0.75rem 1rem;
    margin-bottom: 1.25rem;
    border-radius: var(--radius);
    background: var(--danger-bg);
    border: 1px solid var(--danger);
    color: var(--danger);
    font-size: 0.9rem;
}
/* ============================================================ */
/* Bottoni — modificatori riutilizzati ovunque                  */
/* ============================================================ */
.btn-primary,
.btn-ghost,
.btn-warning,
.btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55em;
    padding: 0.72em 1.6em;
    border-radius: var(--radius-pill);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    border: 1px solid transparent;
    transition:
        background 0.15s,
        color 0.15s,
        border-color 0.15s;
    text-decoration: none;

    /* icone dimensionate sul testo, cosi' non gonfiano il bottone
       e restano centrate col flex */
    svg {
        flex: none;
        width: 1.25em;
        height: 1.25em;
    }
}
.btn-primary {
    background: var(--orange);
    color: white;
    border-color: var(--orange);

    &:hover {
        background: var(--orange-dark);
        border-color: var(--orange-dark);
        color: white;
        text-decoration: none;
    }
    &:disabled {
        background: var(--border-strong);
        border-color: var(--border-strong);
        cursor: not-allowed;
    }
}
.btn-ghost {
    background: transparent;
    color: var(--orange);
    border-color: var(--orange);

    &:hover {
        background: var(--orange);
        color: white;
        text-decoration: none;
    }
}
.btn-warning {
    background: var(--hot);
    color: white;
    border-color: var(--hot);

    &:hover {
        background: var(--hot-dark);
        border-color: var(--hot-dark);
        color: white;
        text-decoration: none;
    }
}
.btn-danger {
    background: var(--danger);
    color: white;
    border-color: var(--danger);

    &:hover {
        background: var(--danger-dark);
        border-color: var(--danger-dark);
        color: white;
        text-decoration: none;
    }
}

.btn-small {
    padding: 0.375em 0.875em;
    font-size: 0.7rem;
}
.btn-link {
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    font: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    padding: 0;

    &:hover {
        color: var(--orange);
    }
}
/* ============================================================ */
/* Navbar                                                       */
/* ============================================================ */
.navbar {
    border-bottom: 1px solid var(--border);
    background: var(--bg);
    position: sticky;
    top: 0;
    z-index: 1000; /* sopra i layer Leaflet (tile ~400, popup ~600, controlli ~800) */

    .navbar-inner {
        width: min(100%, 1180px);
        margin-inline: auto;
        min-height: 72px;
        display: flex;
        align-items: center;
        gap: 1.5rem;
        padding: 0.6rem 1rem;
    }

    .logo {
        display: inline-flex;
        align-items: center;
        gap: 0.55rem;
        color: var(--orange);

        img {
            display: block;
            height: 3.1rem;
            width: auto;
        }

        svg {
            display: block;
            height: 2.1rem;
            width: auto;
            aspect-ratio: 180 / 57.47;
        }
    }

    .nav-links {
        display: flex;
        gap: 2rem;
        margin-left: 1rem;
        font-size: 0.78rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        font-weight: 600;

        a:hover { color: var(--orange); text-decoration: none; }
    }

    .user-area {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-left: auto;
    }

    .btn-pill {
        background: var(--orange);
        color: #fff;
        font-weight: 600;
        font-size: 0.82rem;
        padding: 0.6rem 1.3rem;
        border-radius: var(--radius-pill);
        border: 0;

        &:hover { background: var(--orange-dark); color: #fff; text-decoration: none; }
    }

    /* avatar: la sola classe che il contesto non identifica */
    .avatar {
        width: 2.1rem;
        height: 2.1rem;
        border-radius: 50%;
        background: var(--orange-soft);
        color: var(--orange);
        display: grid;
        place-items: center;
        font-weight: 700;
        font-size: 0.95rem;
        font-family: var(--font-display);
        flex: 0 0 auto;
    }

    /* badge "Solo admin": nested così non collide col .badge globale */
    .badge {
        margin-left: auto;
        font-size: 0.66rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--orange);
        background: var(--orange-soft);
        padding: 0.2rem 0.5rem;
        border-radius: var(--radius-pill);
        line-height: 1.4;
        white-space: nowrap;
    }

    /* ===== summary dei due menu (dropdown desktop + hamburger) ===== */
    details > summary {
        list-style: none;
        cursor: pointer;
        &::-webkit-details-marker { display: none; }
    }

    /* dropdown utente desktop */
    .nav-menu {
        position: relative;

        > summary {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.35rem 0.7rem 0.35rem 0.4rem;
            border: 1px solid var(--border-strong);
            border-radius: var(--radius-pill);
            background: var(--surface);
            font-weight: 600;
            font-size: 0.85rem;
            color: var(--text);

            /* il nome (text node tra avatar e chevron) non ha wrapper:
               l'ellissi la gestisce il summary stesso */
            overflow: hidden;

            /* chevron = ultima <svg> del summary */
            > svg:last-child {
                width: 1rem;
                height: 1rem;
                color: var(--muted);
                transition: transform 0.2s;
                flex: 0 0 auto;
            }
        }
        &[open] > summary > svg:last-child { transform: rotate(180deg); }
    }

    /* hamburger: nascosto su desktop */
    .mobile-menu > summary {
        display: none;
    }

    /* ===== pannello condiviso (desktop dropdown + mobile) ===== */
    .pannello {
        background: var(--surface);

        /* intestazione (avatar + nome + email) — solo dropdown desktop */
        .intestazione {
            display: flex;
            align-items: center;
            gap: 0.8rem;
            padding: 1rem;

            .avatar { width: 2.6rem; height: 2.6rem; font-size: 1.1rem; }
            b { display: block; font-size: 0.95rem; color: var(--text); }
            > div { font-size: 0.8rem; color: var(--muted); line-height: 1.4; }
        }

        /* etichette sezione (mobile: "Esplora" / "Area personale") */
        > p {
            font-size: 0.72rem;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--muted);
            font-weight: 700;
            margin: 1rem 0.5rem 0.4rem;
        }

        hr { border: 0; border-top: 1px solid var(--border); margin: 0; }

        /* voci (a + button), stesse regole per entrambi i menu */
        a,
        button {
            display: flex;
            align-items: center;
            gap: 0.7rem;
            width: 100%;
            padding: 0.7rem 1rem;
            background: none;
            border: 0;
            text-align: left;
            font-size: 0.9rem;
            color: var(--text);
            cursor: pointer;

            svg {
                width: 1.15rem;
                height: 1.15rem;
                color: var(--muted-strong);
                flex: 0 0 auto;
            }
            /* chevron-right delle categorie mobile: spinto a destra */
            svg:last-child:not(:first-child) { margin-left: auto; color: var(--muted); }

            &:hover {
                background: var(--orange-soft);
                color: var(--orange);
                text-decoration: none;
                svg { color: var(--orange); }
            }
        }

        /* Esci arancione (un solo punto, vale desktop e mobile) */
        .esci {
            color: var(--orange);
            svg { color: var(--orange); }
        }

        form { display: block; }
    }

    /* posizionamento pannello desktop (ancorato sotto il summary) */
    .nav-menu .pannello {
        position: absolute;
        right: 0;
        top: calc(100% + 0.55rem);
        width: 17rem;
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow);
        overflow: hidden;
        z-index: 90;
    }
}

/* ===== Mobile ===== */
@media (max-width: 860px) {
    .navbar {
        .nav-links { display: none; }
        .user-area .btn-pill { display: none; }
        .nav-menu { display: none; }
        .navbar-inner { gap: 0.75rem; }
        .logo { margin-inline: auto; }
        .user-area { margin-left: 0; }

        .mobile-menu > summary {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 2.6rem;
            height: 2.6rem;
            color: var(--text);
            order: -1;
        }

        /* pannello mobile full-height */
        .mobile-menu[open] .pannello {
            position: fixed;
            inset: 72px 0 0 0;
            overflow-y: auto;
            border-top: 1px solid var(--border);
            z-index: 70;
            padding: 1rem;

            a, button {
                padding: 0.8rem 0.5rem;
                font-size: 1rem;
                border-radius: var(--radius);
                svg { width: 1.2rem; height: 1.2rem; }
            }
            hr { margin: 0.6rem 0; }
        }
    }
}

@media (min-width: 861px) {
    .navbar .mobile-menu { display: none; }
}
/* ============================================================ */
/* Footer                                                       */
/* ============================================================ */
body > footer {
    background: var(--dark-panel);
    color: var(--on-dark-70);
    padding: 56px 0 24px;

    .footer-grid {
        display: grid;
        grid-template-columns: 1.8fr 0.9fr 0.9fr 1.6fr;
        gap: 0.4rem;
        margin-bottom: 2.5rem;

        @media (max-width: 900px) {
            grid-template-columns: 1fr 1fr;
            gap: 2rem;
        }
        @media (max-width: 560px) {
            grid-template-columns: 1fr;
        }

        nav {
            margin-top: 0.9em;

            a {
                display: block;
                margin-bottom: 0.55rem;
                color: inherit;
                font-size: 0.9rem;
                transition: color 0.2s;

                &:hover {
                    color: var(--accent);
                    text-decoration: none;
                }
            }
        }
    }

    .footer-logo {
        display: inline-flex;
        align-items: center;
        gap: 0.6rem;
        margin-bottom: 1rem;
        color: var(--surface);

        .footer-wordmark {
            display: block;
            height: 1.5rem;
            width: auto;
            aspect-ratio: 180 / 57.47;
        }

        .footer-logo-mark {
            flex: none;
            border-radius: 8px;
        }
    }

    p {
        font-size: 0.9rem;
        line-height: 1.65;
        max-width: 300px;
    }

    div:has(form) {
        margin-top: 0.9em;

        p {
            line-height: 1.5;
            margin-bottom: 1rem;
        }

        form {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;

            &[aria-disabled="true"] {
                opacity: 0.65;
            }

            input {
                flex: 1 1 15rem;
                min-width: 0;
                padding: 0.7rem 1rem;
                border: 1px solid var(--on-dark-15);
                border-radius: var(--radius);
                background: var(--on-dark-08);
                color: var(--text);
                font-family: inherit;
                font-size: 0.88rem;

                &::placeholder {
                    color: var(--on-dark-30);
                }
            }

            button {
                margin-left: auto;
                padding: 0.7rem 1.2rem;
                border: none;
                border-radius: var(--radius);
                background: var(--dark-accent);
                color: #fff;
                font-size: 0.85rem;
                font-weight: 600;
                white-space: nowrap;
                cursor: pointer;

                &:disabled {
                    cursor: not-allowed;
                }
            }
        }
    }
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--on-dark-08);

    @media (max-width: 700px) {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.8rem;
    }

    small {
        max-width: 720px;
        color: var(--on-dark-55);
        font-size: 0.75rem;
        line-height: 1.5;
    }

    nav {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem;
        white-space: nowrap;
        margin-top: -1.1em;

        a,
        button,
        span {
            line-height: 1;
        }

        a,
        button {
            color: var(--on-dark-55);
            font-size: 0.78rem;
            transition: color 0.2s;

            &:hover {
                color: var(--accent);
                text-decoration: none;
            }
        }

        button {
            padding: 0;
            border: none;
            background: none;
            font-family: inherit;
            font-size: 0.78rem;
            cursor: pointer;
        }

        span {
            font-size: 0.9em;
            color: var(--on-dark-30);
        }
    }
}
/* ============================================================ */
/* Chips (filtri categoria)                                     */
/* ============================================================ */
/* ============================================================ */
/* Search box (home hero)                                       */
/* ============================================================ */
.search-box {
    display: flex;
    align-items: center;
    height: 62px;
    max-width: 520px;
    margin-bottom: 1.75rem;
    padding: 0 0.625rem 0 1.375rem;
    border-radius: var(--radius-pill);
    background: white;
    box-shadow: var(--shadow-sm);

    /* gruppo icona + campo (evento / comune) */
    .search-campo {
        display: flex;
        align-items: center;
        flex: 1;
        min-width: 0;
        height: 100%;

        svg {
            flex-shrink: 0;
            margin-right: 0.75rem;
            color: var(--muted);
        }

        input {
            flex: 1;
            min-width: 0;
            height: 100%;
            width: 100%;
            border: none;
            background: transparent;
            color: var(--text);
            font-size: 0.95rem;

            &:focus {
                outline: none;
            }

            &::placeholder {
                color: var(--muted);
            }
        }
    }

    /* separatore verticale tra i due campi */
    i {
        flex-shrink: 0;
        width: 1px;
        height: 22px;
        margin: 0 1rem;
        background: var(--border);
    }

    .search-comune-wrap {
        position: relative;

        /* solo posizionamento: l'aspetto arriva da .autocomplete-results */
        .autocomplete-results {
            position: absolute;
            top: calc(100% + 8px);
            left: 0;
            right: 0;
            z-index: 10;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
        }
    }

    > button {
        flex-shrink: 0;
        width: 44px;
        height: 44px;
        margin-left: 0.5rem;
        border: none;
        border-radius: 50%;
        background: var(--green);
        color: white;
        font-size: 1rem;
        cursor: pointer;

        &:hover {
            background: var(--green-dark);
        }
    }
}

/* ============================================================ */
/* Autocomplete risultati (campo comune: search-box e wizard)   */
/* Aspetto condiviso; il posizionamento lo definisce il contesto*/
/* ============================================================ */
.autocomplete-results {
    display: flex;
    flex-direction: column;
    max-height: 250px;
    overflow-y: auto;
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--radius);

    &:empty {
        display: none;
    }

    button {
        padding: 0.6rem 0.8rem;
        border: none;
        border-bottom: 1px solid var(--border);
        background: transparent;
        color: var(--text);
        font-size: 0.95rem;
        text-align: left;
        cursor: pointer;

        &:hover {
            background: var(--card);
        }
        &:last-child {
            border-bottom: none;
        }
    }
}

.modale-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 100;
}

.modale {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--bg);
    border-radius: 8px;
    padding: 1.5rem 2rem;
    max-width: 90vw;
    width: 480px;
    max-height: 85vh;
    overflow-y: auto;
    z-index: 101;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.modale-chiudi {
    position: absolute;
    top: 0.5rem;
    right: 0.75rem;
    background: transparent;
    border: 0;
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
    color: var(--muted);

    &:hover {
        color: var(--text);
    }
}

.modale h2 {
    margin: 0 0 0.5rem;
    font-size: 1.2rem;
}

.modale-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: 1rem;
}

.evento-segnala {
    margin: 2rem 0 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    text-align: center;
}

.btn-segnala {
    font-size: 0.85rem;
    color: var(--muted);
}

.form-error {
    color: var(--orange);
    background: var(--orange-soft);
    border: 1px solid var(--orange);
    border-radius: 4px;
    padding: 0.5rem 0.75rem;
    margin: 0 0 1rem;
    font-size: 0.9rem;
}

.campo {
    display: block;
    margin-bottom: 1rem;

    & legend,
    & > span {
        display: block;
        margin-bottom: 0.35rem;
        font-size: 0.9rem;
        font-weight: 500;
    }

    & textarea {
        width: 100%;
        padding: 0.5rem 0.75rem;
        border: 1px solid var(--border);
        border-radius: 4px;
        background: var(--surface);
        font-family: inherit;
        font-size: 0.95rem;
        resize: vertical;
    }
}

.radio {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
    font-size: 0.95rem;
    cursor: pointer;

    & input {
        margin-top: 0.2rem;
        flex-shrink: 0;
    }
}

/* ---- Admin segnalazioni (doc 25) ----------------------------------------- */

.segnalazione-scheda {
    padding: 1.5rem;
    margin: 1.5rem 0;
}

.dati-segnalazione {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 0.5rem 1rem;
    font-size: 0.95rem;

    & dt {
        color: var(--muted);
        font-weight: 500;
    }
    & dd {
        margin: 0;
    }
}

.segnalazione-chiudi {
    padding: 1.5rem;
    margin: 1.5rem 0;

    & h2 {
        font-size: 1.1rem;
        margin: 0 0 0.5rem;
    }

    & textarea {
        width: 100%;
        padding: 0.5rem 0.75rem;
        border: 1px solid var(--border);
        border-radius: 4px;
        background: var(--surface);
        font-family: inherit;
        font-size: 0.95rem;
        resize: vertical;
        margin-bottom: 0.75rem;
    }
}

.altre-segnalazioni {
    margin: 1.5rem 0;

    & h2 {
        font-size: 1.1rem;
        margin: 0 0 0.75rem;
    }
    & ul {
        list-style: none;
        padding: 0;
    }
    & li {
        margin-bottom: 0.4rem;
        font-size: 0.9rem;
    }
}

/* ---- Wizard anteprima ---- */

/* ============================================================ */
/* Card con copertina                                           */
/* ============================================================ */

.chip-travel {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--success);
    background: var(--success-bg);
    border-radius: 999px;
    padding: 0.2rem 0.65rem;
    margin: 0;
    width: fit-content;
}

/* ============================================================ */
/* Copertina e galleria evento                                  */
/* ============================================================ */

.event-cover {
    margin: 0 0 2rem;

    img {
        width: 100%;
        max-height: 420px;
        object-fit: cover;
        display: block;
    }
}

.event-galleria {
    margin: 2rem 0;

    h3 {
        font-size: 1.1rem;
        margin: 0 0 0.75rem;
    }
}

.galleria-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.5rem;

    img {
        width: 100%;
        aspect-ratio: 4 / 3;
        object-fit: cover;
        border-radius: var(--radius);
    }
}

/* ============================================================ */
/* SortableJS drag states                                       */
/* ============================================================ */

.sortable-ghost {
    opacity: 0.4;
}
.sortable-chosen {
    cursor: grabbing;
}

/* ============================================================ */
/* Badge copertina (immagini wizard)                            */
/* ============================================================ */

.copertina-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    background: var(--green);
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.2rem 0.55rem;
    border-radius: var(--radius-pill);
    pointer-events: none;
}

.immagine-card {
    position: relative;
}

/* ============================================================ */
/* Badge inline (stato sospeso ecc.)                           */
/* ============================================================ */

.badge-warning {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: var(--radius-pill);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--warning-bg);
    border: 1px solid var(--warning-border);
    color: var(--warning-text);
}

/* ============================================================ */
/* "I miei eventi" — bozze                                     */
/* ============================================================ */

.miei-draft-card {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 1rem;
    margin: 0.5rem 0;
    overflow: hidden;
}

.miei-draft-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.75rem 1rem;
}

.miei-draft-img {
    flex: none;
    width: 200px;
    object-fit: contain;
    object-position: right center;
    align-self: center;
    padding: 0.5rem 0.75rem;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 35%);
    mask-image: linear-gradient(to right, transparent, #000 35%);

    @media (max-width: 560px) {
        display: none;
    }
}

.miei-draft-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* ============================================================ */
/* Checkbox con etichetta (newsletter, consensi)                */
/* ============================================================ */

.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.9rem;
    cursor: pointer;

    input[type="checkbox"] {
        margin-top: 0.15rem;
        flex-shrink: 0;
    }
}

/* ============================================================ */
/* Blockquote nell'editor e nel corpo evento                    */
/* ============================================================ */

.editor-mount .ProseMirror blockquote,
.event-body blockquote {
    border-left: 3px solid var(--border);
    margin: 0.75rem 0;
    padding: 0.5rem 1rem;
    color: var(--muted);
    font-style: italic;
}

/* ============================================================ */
/* app-dialog (conferme native via <dialog>)                    */
/* ============================================================ */

.app-dialog {
    /* il reset universale azzera i margini: ripristina la centratura
       nativa del dialog modale */
    margin: auto;
    /* il dialog non eredita dal body: colore testo esplicito */
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem 2rem;
    max-width: 420px;
    width: 90vw;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    background: var(--bg);

    &::backdrop {
        background: rgba(0, 0, 0, 0.45);
    }

    p {
        margin: 0 0 1rem;
    }
}

.dialog-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    margin-top: 1rem;
}

/* Etichettina sopra un titolo/contenuto (didascalia uppercase muted).
   Usata in card edizioni, serie passate, badge "gia' collegato". */
.eyebrow {
    display: inline-block;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
}

/* ============================================================ */
/* Messaggi globali: flash e banner (mostrati in _base e pagine) */
/* ============================================================ */
.flash {
    padding: 0.75rem 1rem;
    border-radius: 6px;
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
}
.flash-success {
    background: var(--success-bg);
    color: #155724;
    border: 1px solid #c3e6cb;
}
.flash-error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}
.flash-info {
    background: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}

/* Banner di avviso globale (es. "conferma la tua email" in _base) */
.banner-alert {
    padding: 0.75rem 1.25rem;
    background: var(--warning-bg);
    border: 1px solid var(--warning-border);
    border-radius: var(--radius);
    margin: 1rem auto 0;
    width: min(1120px, calc(100% - 48px));
    font-size: 0.95rem;

    a {
        font-weight: 600;
        color: var(--orange-dark);
    }
}

/* ============================================================ */
/* Card — tema piatto (superficie chiara, niente ombra).        */
/* Combinare con una classe-caso, come light-card/dark-card:    */
/* es. <div class="flat-card sidebar-card">                     */
/* ============================================================ */
.flat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

/* ============================================================ */
/* Nota informativa: box discreto icona + testo, per avvisi     */
/* statici non azionabili (es. "L'indirizzo email non è         */
/* modificabile", "L'evento sarà visibile dopo la revisione").  */
/* ============================================================ */
.nota-info {
    display: grid;
    gap: 0.7rem;
    padding: 1rem 1.2rem;
    border-radius: var(--radius-sm);
    background: var(--card);
    color: var(--text-soft);

    p {
        display: flex;
        align-items: center;
        gap: 0.65rem;
        margin: 0;
        line-height: 1.4;
    }

    svg {
        flex: 0 0 auto;
        width: 1.2rem;
        height: 1.2rem;
        color: var(--muted-strong);
    }
}
/* ============================================================ */
/* Hero                                                         */
/* ============================================================ */
.hero {
    padding: 5.6rem 0 3.5rem;
    background: var(--bg);

    /* flash (es. account cancellato) in testa alla hero: sale nel
       padding della sezione invece di spingere giù la griglia */
    .info-box {
        margin: -3.5rem 0 2rem;
    }

    .hero-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        gap: 3.75rem;
    }

    .hero-eyebrow {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        color: var(--orange);
        text-transform: uppercase;
        letter-spacing: 0.2em;
        font-size: 0.75rem;
        font-weight: 600;
        margin-bottom: 1.625rem;

        &::before {
            content: "";
            width: 48px;
            height: 1px;
            background: var(--orange);
        }
    }

    h1 {
        font-size: clamp(3rem, 7vw, 5.5rem);
        line-height: 0.92;
        margin-bottom: 2rem;
        max-width: 520px;

        span {
            color: var(--green);
            font-style: italic;
        }
    }

    p {
        max-width: 480px;
        color: var(--text-soft);
        font-size: 1.08rem;
        margin-bottom: 2.125rem;
    }

    .hero-visual {
        position: relative;
        display: flex;
        justify-content: center;
    }

    .card-back {
        position: absolute;
        width: 78%;
        height: 90%;
        background: #eadfd6;
        border-radius: 20px;
        right: 40px;
        top: 28px;
    }

    .photo-frame {
        position: relative;
        width: 82%;
        background: white;
        border-radius: 18px;
        padding: 0.75rem;
        transform: rotate(-2deg);
        box-shadow: var(--shadow);
        z-index: 2;

        img {
            border-radius: 12px;
            aspect-ratio: 4 / 5;
            object-fit: cover;
            width: 100%;
        }
    }

    .carousel {
        display: grid;
        border-radius: 12px;
        overflow: hidden;

        img {
            grid-area: 1 / 1;
            aspect-ratio: 4 / 5;
            object-fit: cover;
            width: 100%;
            opacity: 0;
            transition: opacity 0.6s ease;

            &.is-active {
                opacity: 1;
            }
        }

        > div {
            display: flex;
            justify-content: center;
            gap: 0.5rem;
            padding: 0.6rem 0 0.2rem;

            button {
                width: 8px;
                height: 8px;
                padding: 0;
                border: none;
                border-radius: 50%;
                background: var(--border);
                cursor: pointer;
                transition:
                    background 0.2s ease,
                    transform 0.2s ease;

                &.is-active {
                    background: var(--green);
                    transform: scale(1.3);
                }
            }
        }
    }

    .badge {
        position: absolute;
        right: 30px;
        bottom: -22px;
        width: 110px;
        height: 110px;
        border-radius: 50%;
        background: var(--orange);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: var(--font-display);
        text-align: center;
        font-size: 1.1rem;
        line-height: 1.1;
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);

        svg.lucide-heart {
            margin-left: -1em;
            margin-top: -2em;
        }
    }
}

/* ============================================================ */
/* Sezioni e listing                                            */
/* ============================================================ */
.section,
.events {
    padding: 2.5rem 0 3.75rem;
    background: #fcfbf9;
}

.section-head {
    text-align: center;
    margin-bottom: 3.75rem;

    h2 {
        font-size: 3rem;
        margin-bottom: 1.125rem;
    }
}

.section-line {
    width: 180px;
    height: 1px;
    background: var(--border-strong);
    margin: 0 auto;
    position: relative;

    &::after {
        content: "";
        position: absolute;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: var(--orange);
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
}

.listing-head {
    text-align: center;
    margin-bottom: 3.125rem;

    h1 {
        font-size: 3rem;
        margin-bottom: 1rem;
    }

    p {
        color: var(--muted);
        max-width: 540px;
        margin: 0 auto;
    }

    .listing-kicker {
        color: var(--orange);
        text-transform: uppercase;
        letter-spacing: 0.18em;
        font-size: 0.78rem;
        font-weight: 600;
        margin-bottom: 1.125rem;
    }
}

/* ============================================================ */
/* Event card (home + listing)                                  */
/* ============================================================ */
.cards {
    display: grid;
    /* .evento-card è un pannello largo (foto + testo affiancati), non più
       una tile compatta: una colonna piena per riga, non una grid auto-fit
       a celle strette. */
    grid-template-columns: 1fr;
    gap: 2rem;
}

/* ============================================================ */
/* Category chips (sezione Prossimi eventi)                     */
/* ============================================================ */
.category-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    margin: 0 0 3rem;

    a {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.6rem 1.1rem;
        border: 1px solid var(--border);
        border-radius: var(--radius-pill);
        background: white;
        color: var(--text);
        font-size: 0.85rem;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        font-weight: 600;
        transition:
            border-color 0.15s,
            color 0.15s,
            background 0.15s;

        &:hover {
            border-color: var(--orange);
            color: var(--orange);
            text-decoration: none;
        }

        svg {
            color: var(--green);
            flex-shrink: 0;
        }

        &:hover svg {
            color: var(--orange);
        }
    }
}
/* ============================================================ */
/* Promo mappa (home, utenti non loggati)                       */
/* Pannello scuro dentro .container; consuma la palette scura.   */
/* ============================================================ */
.mappa-promo {
    --promo-muted: var(--on-dark-70);

    background: var(--dark-panel);
    color: white;
    border-radius: 24px;
    padding: 3rem 4rem;
    margin: 4rem 0 5rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;

    .visual {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin: -3rem 0 0 -4rem;

        img {
            width: 100%;
            max-width: 560px;
            height: auto;
            filter: drop-shadow(-15px -10px 15px rgba(0, 0, 0, 0.6));
            margin-top: -5em;
            margin-left: -2em;
        }

        .cta {
            background: var(--on-dark-04);
            border: 1px solid var(--on-dark-12);
            border-radius: 0 16px 16px 0;
            padding: 2rem 2.5rem;
            text-align: center;
            max-width: 560px;

            p {
                font-size: 0.95rem;
                color: var(--promo-muted);
                margin-bottom: 1.5rem;
                text-align: left;
            }

            .etichetta {
                font-size: 1.05rem;
                font-weight: 600;
                color: var(--dark-accent);
                margin-bottom: 0.4rem;
                display: flex;
                align-items: center;
            }

            svg {
                margin-top: -2px;
                margin-right: 2px;
            }

            .bottoni {
                display: grid;
                grid-template-columns: 5fr 3fr;
                gap: 1rem;

                a {
                    padding: 1.15em 1.75em;
                    letter-spacing: unset;
                }

                /* Override scoped dei bottoni globali per il fondo scuro
                   e l'accento del pannello. */
                .btn-primary {
                    background: var(--dark-accent);
                    border-color: var(--dark-accent);

                    &:hover {
                        background: var(--dark-accent-strong);
                        border-color: var(--dark-accent-strong);
                    }
                }

                .btn-ghost {
                    color: white;
                    border-color: var(--on-dark-30);

                    &:hover {
                        background: var(--on-dark-08);
                        border-color: var(--on-dark-55);
                        color: white;
                    }
                }
            }
        }
    }

    .testo {
        padding-top: 1rem;

        h2 {
            font-family: var(--font-display);
            font-size: clamp(2.2rem, 4vw, 3.2rem);
            font-weight: 600;
            line-height: 1.15;
            margin-bottom: 1.2rem;
            color: white;

            em {
                color: var(--dark-accent);
                font-weight: 500;
            }
        }

        > p {
            font-size: 1.1rem;
            color: var(--promo-muted);
            margin-bottom: 2.5rem;
            line-height: 1.6;
        }

        ul {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            gap: 1.5rem;

            li {
                display: grid;
                grid-template-columns: 48px 1fr;
                column-gap: 1rem;

                /* Riquadro icona: lucide monocolore bianca su gradiente,
                   l'HTML porta solo la classe del vantaggio. */
                > svg {
                    grid-row: span 2;
                    width: 48px;
                    height: 48px;
                    padding: 0.75rem;
                    box-sizing: border-box;
                    border-radius: 12px;
                    color: white;
                    background: var(--orange);
                }

                h4 {
                    font-size: 1.05rem;
                    font-weight: 600;
                    margin-bottom: 0.3rem;
                    color: white;
                    font-family: var(--font-body);
                }

                p {
                    font-size: 0.92rem;
                    color: var(--promo-muted);
                    line-height: 1.4;
                }
            }
        }
    }

    @media (max-width: 900px) {
        grid-template-columns: 1fr;
        gap: 2rem;

        .testo {
            padding-top: 0;
        }
        .visual .cta {
            max-width: 100%;
        }
    }

    @media (max-width: 600px) {
        padding: 1.5rem 1.2rem;
        margin: 3rem 0 4rem;

        .visual {
            margin: -1rem -1.2rem 0 -1.2rem;

            .cta {
                border-radius: 0;

                .bottoni {
                    grid-template-columns: 1fr;
                }
            }
        }
    }
}
/* ============================================================ */
/* Card evento — pannello con giuntura curva (spec 64)           */
/* ============================================================ */

.evento-card {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: box-shadow 0.2s;

    --seam: 64px;

    figure {
        position: relative;
        margin: 0;

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

        figcaption {
            position: absolute;
            top: 1rem;
            left: 1rem;
            color: #fff;
            font-size: 0.68rem;
            font-weight: 600;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            padding: 0.4rem 0.85rem;
            border-radius: var(--radius-pill);
            background: var(--muted-strong);

            &[data-categoria="sagra"] {
                background: var(--marker-sagra);
            }
            &[data-categoria="fiera"] {
                background: var(--marker-fiera);
            }
            &[data-categoria="rievocazione"] {
                background: var(--marker-rievocazione);
            }
            &[data-categoria="concerto"] {
                background: var(--marker-concerto);
            }
            &[data-categoria="spettacolo"] {
                background: var(--marker-spettacolo);
            }
        }
    }

    .corpo {
        position: relative;
        padding: 1.7rem 1.8rem 1.7rem calc(var(--seam) + 0.6rem);
        display: flex;
        flex-direction: column;
        background: var(--surface);

        &::before {
            content: "";
            position: absolute;
            top: -2px;
            bottom: -2px;
            left: calc(-1 * var(--seam));
            width: calc(var(--seam) * 2);
            background: var(--surface);
            border-radius: 50% / 50%;
            clip-path: inset(0 0 0 50%);
        }
        &::after {
            content: "";
            position: absolute;
            top: 8%;
            bottom: 8%;
            left: calc(-1 * var(--seam) + 1px);
            width: var(--seam);
            border-left: 1.5px solid var(--gold);
            border-radius: 50%;
            opacity: 0.5;
            pointer-events: none;
        }
    }

    time {
        position: relative;
        z-index: 1;
        font-family: var(--font-display);
        font-size: 2.4rem;
        font-weight: 600;
        line-height: 1;
        color: var(--brown);
        text-transform: uppercase;

        .data-breve {
            display: none;
        }

        small {
            display: block;
            font-family: var(--font-display);
            font-size: 1.05rem;
            font-weight: 500;
            color: var(--muted);
            margin-top: 0.5rem;

            b {
                color: var(--text-soft);
                font-weight: 500;
            }
        }
    }

    hr {
        width: 100%;
        border: 0;
        border-top: 1px solid var(--border);
        margin: 1rem 0;
    }

    h3 {
        font-family: var(--font-display);
        font-size: 2rem;
        font-weight: 600;
        line-height: 1.05;
        margin: 0;
    }

    .luogo {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        color: var(--text-soft);
        font-size: 1.05rem;
        margin-top: 0.5rem;
        svg {
            color: var(--gold);
            flex-shrink: 0;
        }
    }

    .tratti {
        display: flex;
        flex-wrap: wrap;
        gap: 0.3rem 0.8rem;
        margin-top: 1rem;
        padding-top: 0.9rem;
        border-top: 1px solid var(--border);
        color: var(--muted);
        font-size: 0.68rem;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        span + span::before {
            content: "·";
            margin-right: 0.8rem;
            color: var(--border);
        }
    }

    .azione {
        margin-top: 1.1rem;
        align-self: flex-end;
        background: var(--orange);
        color: #fff;
        font-family: var(--font-display);
        font-size: 1.1rem;
        padding: 0.65rem 1.5rem;
        border-radius: var(--radius-pill);
        display: inline-flex;
        align-items: center;
        gap: 0.6rem;
        box-shadow: 0 6px 14px rgba(179, 86, 47, 0.25);
        text-decoration: none;
        transition:
            background 0.2s,
            transform 0.2s;

        &:hover {
            background: var(--orange-dark);
            transform: translateY(-1px);
        }
    }
}

@media (max-width: 600px) {
    .evento-card {
        grid-template-columns: 1fr;
        figure {
            aspect-ratio: 16/10;
        }
        .corpo {
            padding: 1.4rem;
            &::before,
            &::after {
                display: none;
            }
        }
        time {
            font-size: 2rem;
            .data-lunga {
                display: none;
            }
            .data-breve {
                display: inline;
            }
        }
        h3 {
            font-size: 1.6rem;
        }
        .azione {
            align-self: stretch;
            justify-content: center;
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    .evento-card .azione {
        transition: none;
    }
}
/* ============================================================ */
/* Pagina /cerca                                                */
/* ============================================================ */
.cerca-form {
    display: flex;
    gap: 0.6rem;
    margin: 1.5rem 0;

    input[type="search"] {
        flex: 1;
        padding: 0.85rem 1rem;
        border: 1px solid var(--border);
        border-radius: var(--radius);
        background: white;
        font-size: 1rem;

        &:focus {
            outline: 2px solid var(--orange);
            outline-offset: -1px;
            border-color: transparent;
        }
    }
}

.cerca-filtri {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 1.5rem;
    flex-wrap: wrap;
    font-size: 0.85rem;
}
.cerca-chip {
    background: var(--orange-soft);
    border: 1px solid var(--orange);
    border-radius: var(--radius-pill);
    padding: 0.3rem 0.85rem;
    font-size: 0.85rem;
    color: var(--orange);

    &:hover {
        background: var(--orange);
        color: white;
        text-decoration: none;
    }
}

.cerca-hits {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 1rem 0;

    li {
        background: white;
        border: 1px solid var(--border);
        border-radius: var(--radius);
        transition: border-color 0.15s;

        &:hover {
            border-color: var(--orange);
        }
    }

    a {
        display: block;
        padding: 1.2rem 1.4rem;
        color: inherit;

        &:hover {
            text-decoration: none;
        }
    }

    h3 {
        font-size: 1.6rem;
        margin: 0.3rem 0 0.4rem;
        line-height: 1.15;
    }

    .cerca-cat {
        color: var(--orange);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        font-size: 0.72rem;
        font-weight: 600;
    }
}


.risultati-passati {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid #ddd;
}

.passati-titolo {
    color: #666;
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

.passati-info {
    color: var(--muted-strong);
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
}

.lista-grigiata .card-passato {
    filter: grayscale(0.7);
    opacity: 0.7;
    transition: opacity 0.2s, filter 0.2s;

    &:hover {
        filter: grayscale(0.2);
        opacity: 0.95;
    }
}

.badge-passato {
    display: inline-block;
    font-size: 0.75rem;
    color: var(--muted);
    background: #f0f0f0;
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    margin-left: 0.5rem;
    vertical-align: middle;
}

/* ---- Serie di edizioni ---- */
.serie-box {
    margin: 2rem 0;
    padding: 1.25rem 1.5rem;
    background: #faf7f2;
    border-left: 4px solid var(--orange);
    border-radius: 4px;

    h3 {
        margin: 0 0 0.75rem 0;
        color: #555;
        font-size: 1.1rem;
    }
}
.serie-passate {
    ul {
        margin: 0;
        padding-left: 0;
        list-style: none;
    }

    li {
        padding: 0.25rem 0;
    }

    a {
        color: #777;
        text-decoration: none;

        &:hover {
            color: var(--orange);
            text-decoration: underline;
        }
    }
}

/* Suggestions dropdown (serie picker wizard + admin) */
.suggestions {
    position: relative;
    z-index: 100;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    margin-top: 0.25rem;

    &:empty {
        display: none;
    }

    .suggestion, .autocomplete-item {
        width: 100%;
        padding: 0.6rem 1rem;
        border: none;
        background: transparent;
        font: inherit;
        text-align: left;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        gap: 2px;

        &:hover, &:focus {
            background: var(--orange-soft);
            outline: none;
        }
    }

    .suggestion-meta {
        font-size: 0.85rem;
        color: var(--muted);
    }

    .suggestion-empty {
        padding: 0.6rem 1rem;
        color: var(--muted);
        font-size: 0.9rem;
    }
}

/* selected-prev box (wizard edizione precedente) */
.selected-prev {
    margin-top: 0.75rem;
    padding: 0.75rem 1rem;
    background: #f0ede9;
    border-radius: var(--radius);
    font-size: 0.95rem;

    p { margin: 0; }
}

/* Admin serie section */

.cerca-toggle {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    color: var(--muted);
    cursor: pointer;

    & input[type="checkbox"] { cursor: pointer; }
}

/* ---- Modale segnalazioni (doc 25) ---------------------------------------- */
/* ============================================================ */
/* Pagina dettaglio evento (pubblica)                           */
/* ============================================================ */
.event-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 1rem 0;

    .tag {
        background: white;
        border: 1px solid var(--border);
        border-radius: var(--radius-pill);
        padding: 0.3rem 0.85rem;
        font-size: 0.78rem;
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }
}

.event-owner-actions {
    margin-top: 3rem;
    padding: 1.5rem 1.75rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--green);
    border-radius: var(--radius);

    h3 {
        font-size: 1.1rem;
        margin: 0 0 0.4rem;
    }

    p {
        margin: 0 0 1rem;
    }

    form {
        display: inline-block;
    }
}

.event-azioni-proprietario {
    margin-top: 0.75rem;
}

.duplica-info {
    margin: 1rem 0;
    padding: 0.75rem 1rem;
    background: var(--info-bg-light);
    border-left: 3px solid var(--info);
    border-radius: 4px;
}


.evento-passato-ribbon {
    background: var(--orange-soft);
    border-bottom: 1px solid var(--orange);
    color: var(--orange-dark);
    padding: 0.75rem 1rem;
    text-align: center;
    font-size: 0.95rem;
}

.evento-detail.is-passato {
    & img {
        filter: grayscale(80%);
        transition: filter 0.3s;
    }
    & img:hover {
        filter: grayscale(0);
    }
}

/* ---- Edizioni correlate (doc 24) ----------------------------------------- */

.edizioni-correlate {
    margin: 1.5rem 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;

    @media (max-width: 600px) {
        grid-template-columns: 1fr;
    }

    & h3 {
        grid-column: 1 / -1;
        margin: 0 0 0.5rem;
        font-size: 1.1rem;
    }
}

.edizione-card {
    display: block;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;

    &:hover { background: var(--surface-hover); }
    & strong { display: block; margin: 0.25rem 0; }
}
.edizione-prossima { border-left: 3px solid var(--green); }
.edizione-precedente { border-left: 3px solid var(--muted); }
.edizione-meta { font-size: 0.9rem; color: var(--muted); }

/* ---- Cerca toggle passato (doc 24) --------------------------------------- */

/* ============================================================ */
/* Layout due colonne (redesign)                                */
/* ============================================================ */
.event-cover img {
    width: 100%;
    max-height: 460px;
    object-fit: cover;
    display: block;
    border-radius: var(--radius);
}

.event-head {
    margin: 1.5rem 0 1.25rem;
}
.event-kicker {
    margin: 0 0 0.5rem;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);

    & a { color: var(--orange); text-decoration: none; }
    & a:hover { text-decoration: underline; }
}
.event-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.1;
    margin: 0 0 0.4rem;
    color: var(--brown);
}
.event-subtitle {
    margin: 0;
    font-size: 1.15rem;
    color: var(--text-soft);
}

.event-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 2.5rem;
    align-items: start;

    @media (max-width: 900px) {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }
}

/* ---- Striscia date -------------------------------------------------------- */
.event-date-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 0 0 2rem;
}
.date-card {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 5.5rem;
    padding: 0.7rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: 3px solid var(--orange);
    border-radius: var(--radius-sm);

    & .date-card-data { font-weight: 600; color: var(--text); }
    & .date-card-orari { font-size: 0.82rem; color: var(--muted); }
}

/* ---- Sidebar -------------------------------------------------------------- */
.event-sidebar {
    position: sticky;
    top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;

    @media (max-width: 900px) {
        position: static;
    }
}
.sidebar-card {
    padding: 1.25rem 1.4rem;
}
.sidebar-title {
    margin: 0 0 0.9rem;
    font-size: 1.05rem;
    color: var(--brown);
}
.sidebar-organizzatore {
    margin: 0 0 0.9rem;
    font-weight: 600;
}

/* ---- Lista contatti ------------------------------------------------------- */
.event-contatti {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;

    & a {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        color: var(--text);
        text-decoration: none;
        word-break: break-word;
    }
    & a:hover .contatto-val { text-decoration: underline; }

    & .contatto-icon {
        flex: 0 0 auto;
        width: 1.25rem;
        height: 1.25rem;
        background: var(--accent-bg-light);
        border-radius: var(--radius-sm);
    }
}

/* ---- Mappa vetrina -------------------------------------------------------- */
.event-map {
    height: 200px;
    margin: 0.75rem 0;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--surface-hover);
}
.btn-mappa {
    display: block;
    width: 100%;
    text-align: center;
}
.chip-travel {
    margin: 0.75rem 0 0;
    font-size: 0.9rem;
    color: var(--muted-strong);
}

/* ---- Galleria ------------------------------------------------------------- */
.event-galleria {
    margin: 2rem 0;

    & h2 { font-size: 1.2rem; margin: 0 0 0.9rem; color: var(--brown); }
}
.galleria-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.6rem;

    & img {
        width: 100%;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        border-radius: var(--radius-sm);
    }
}

.event-body {
    line-height: 1.7;

    & h2, & h3 { color: var(--brown); }
}
/* Wizard di sottomissione evento: stepper + form + step + anteprima */

/* Superficie comune dei pannelli principali del wizard */
.wizard-stepper,
.wizard-sidebar-steps,
.wizard-sidebar-nota,
.wizard-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

/* ============================================================ */
/* Wizard di sottomissione evento                               */
/* Layout: stepper orizzontale + sidebar lineare + form&anteprima */
/* ============================================================ */
.wizard {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 1rem;
    width: min(100%, 1480px);
    margin-inline: auto;
    padding: 1.5rem clamp(1rem, 3vw, 2rem) 4rem;
}
/* ---- Stepper orizzontale (occupa tutta la larghezza) ---- */
.wizard-stepper {
    grid-column: 1 / -1;
    box-shadow: var(--shadow-sm);
    padding: 1rem 1.25rem;

    ol {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    li {
        position: relative;
        display: grid;
        justify-items: center;
        gap: 0.55rem;
        color: var(--muted-strong);
        font-size: 0.84rem;
        font-weight: 700;
        text-align: center;

        a {
            display: grid;
            justify-items: center;
            gap: 0.55rem;
            text-decoration: none;
            color: inherit;
        }

        strong {
            display: grid;
            place-items: center;
            width: 2.65rem;
            height: 2.65rem;
            border: 2px solid var(--border-strong);
            border-radius: 50%;
            background: var(--surface);
            color: var(--muted-strong);
            font-size: 1rem;

            svg {
                width: 1.3rem;
                height: 1.3rem;
            }
        }

        /* linea di collegamento tra le tappe */
        + li::before {
            content: "";
            position: absolute;
            top: 1.3rem;
            right: calc(50% + 1.6rem);
            width: calc(100% - 3.2rem);
            height: 2px;
            border-radius: var(--radius-pill);
            background: var(--border-strong);
        }

        &[data-state="done"] {
            color: var(--green);

            strong {
                border-color: var(--green);
                background: var(--green);
                color: white;
            }

            + li::before {
                background: var(--green);
            }
        }

        &[data-state="current"] {
            color: var(--orange);

            strong {
                border-color: var(--orange);
                background: var(--orange);
                color: white;
                box-shadow: 0 8px 18px rgba(169, 71, 29, 0.22);
            }
        }
    }
}
/* ---- Sidebar: lista lineare dei 5 passaggi ---- */
.wizard-sidebar {
    display: grid;
    align-content: start;
    gap: 1rem;
}
.wizard-sidebar-steps {
    box-shadow: var(--shadow-sm);
    padding: 0.85rem;

    h2 {
        margin: 0.25rem 0.45rem 0.75rem;
        font-size: 1rem;
    }

    ol {
        display: grid;
        gap: 0.4rem;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    li {
        position: relative;
        border-radius: var(--radius);

        a {
            display: grid;
            grid-template-columns: 2.35rem 1fr;
            gap: 0.7rem;
            align-items: center;
            padding: 0.78rem 0.7rem;
            text-decoration: none;
            color: inherit;
        }

        + li::before {
            content: "";
            position: absolute;
            left: 1.86rem;
            top: -0.4rem;
            width: 1px;
            height: 0.8rem;
            background: var(--border-strong);
        }

        strong {
            display: grid;
            place-items: center;
            width: 2rem;
            height: 2rem;
            border: 1px solid var(--border-strong);
            border-radius: 50%;
            background: var(--surface);
            color: var(--muted-strong);
            font-size: 0.9rem;

            svg {
                width: 1.1rem;
                height: 1.1rem;
            }
        }

        p {
            margin: 0;

            b,
            span {
                display: block;
            }

            span {
                margin-top: 0.2rem;
                color: var(--text-soft);
                font-size: 0.84rem;
                line-height: 1.25;
            }
        }

        &[data-state="done"] strong {
            border-color: var(--green);
            background: var(--green);
            color: white;
        }

        &[aria-current="step"] {
            background: var(--orange-soft);

            strong {
                border-color: var(--orange);
                background: var(--orange);
                color: white;
            }
        }
    }
}
.wizard-sidebar-nota {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.75rem;
    padding: 1rem;
    box-shadow: var(--shadow-sm);

    .wizard-sidebar-icona svg {
        width: 2.1rem;
        height: 2.1rem;
        color: var(--orange);
    }

    p {
        margin: 0;

        b,
        span {
            display: block;
        }

        span {
            margin-top: 0.35rem;
            color: var(--text-soft);
            font-size: 0.88rem;
            line-height: 1.45;
        }
    }
}
/* ---- Contenuto: form + anteprima ---- */
.wizard-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 1rem;
    min-width: 0;
}
.wizard-card {
    box-shadow: var(--shadow-sm);
    padding: clamp(1.1rem, 2vw, 1.6rem);
}
.wizard-card-head {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding-bottom: 1.2rem;
    border-bottom: 1px solid var(--border);

    .wizard-card-icona svg {
        width: 2.35rem;
        height: 2.35rem;
        color: var(--orange);
    }

    h1 {
        margin: 0;
        font-size: clamp(1.65rem, 2.6vw, 2.3rem);
        line-height: 1.05;
    }

    p {
        margin: 0.45rem 0 0;
        color: var(--text-soft);
    }
}
.wizard-card-foot {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 0.85rem;
    margin-top: 1.5rem;

    .wizard-foot-nota {
        margin: 0;
        color: var(--text-soft);
        font-size: 0.86rem;
    }

    .wizard-foot-azioni {
        display: contents;
    }
}
/* ---- Anteprima live ---- */
.wizard-preview {
    display: grid;
    gap: 1rem;
    align-content: start;
}
.wizard-preview-card {
    position: relative;

    h2 {
        margin: 0.2rem 0 1rem;
        font-size: 1.2rem;
    }

    .wizard-preview-stato {
        position: absolute;
        top: 0;
        right: 0;
        border-radius: var(--radius-pill);
        padding: 0.35rem 0.6rem;
        background: var(--orange-soft);
        color: var(--orange-dark);
        font-size: 0.78rem;
        font-weight: 700;
    }
}
.wizard-preview-evento {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: white;
    box-shadow: var(--shadow-sm);

    .wizard-preview-img {
        display: grid;
        place-items: center;
        height: 180px;
        background: var(--card);
        color: var(--muted);

        svg {
            width: 3rem;
            height: 3rem;
        }
    }

    h3 {
        margin: 1rem 1rem 0.7rem;
        font-size: 1.5rem;
        line-height: 1.08;
    }

    .wizard-preview-meta {
        display: flex;
        gap: 0.45rem;
        align-items: center;
        margin: 0.65rem 1rem;
        color: var(--text-soft);
        line-height: 1.35;

        svg {
            flex: 0 0 auto;
            width: 1rem;
            height: 1rem;
            color: var(--orange);
        }
    }
}
.wizard-help-small {
    font-size: 0.85rem;
    color: var(--muted);
    margin: 0 0 0.35rem;
}
/* Raggruppamento interno (es. "Dove" / "Quando") */
.wizard-section {
    & + .wizard-section {
        margin-top: 1.75rem;
        padding-top: 1.5rem;
        border-top: 1px solid var(--border);
    }
}
.wizard-section-title {
    margin: 0 0 1rem;
    font-size: 1.15rem;
}
/* Checkbox inline (es. "raggiungibile su WhatsApp") */
.wizard-check-inline {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: -0.4rem 0 0.8rem;
    cursor: pointer;

    input {
        accent-color: var(--orange);
    }
}
.wizard-fornitore-wrap {
    margin-top: 0.6rem;
}
.wizard-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    /* respiro dalla riga di separazione dell'header */
    margin-top: 1.5rem;
}
/* Campi del form wizard (titolo, sottotitolo, descrizione, ecc.) */
.wizard-card {
    .form-field {
        display: grid;
        gap: 0.45rem;

        > span {
            font-weight: 700;

            .req {
                color: var(--orange);
            }

            em {
                color: var(--text-soft);
                font-style: normal;
                font-weight: 600;
            }
        }

        > small {
            color: var(--text-soft);
            font-size: 0.82rem;
        }
    }

    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="url"],
    input[type="date"],
    input[type="time"],
    textarea {
        width: 100%;
        border: 1px solid var(--border-strong);
        border-radius: var(--radius);
        padding: 0.85rem 1rem;
        background: white;
        color: var(--text);
        outline: none;

        &:focus {
            border-color: var(--orange);
            box-shadow: 0 0 0 3px rgba(169, 71, 29, 0.13);
        }
    }

    textarea {
        resize: vertical;
    }
}
.wizard-field-row {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 1rem;

    /* i tre campi (data, inizio, fine) si dividono lo spazio in parti uguali;
       il margine di stacking dei gruppi qui non serve (la riga spazia da sé)
       e disallineerebbe il bottone in coda. Il prefisso form serve a battere
       la specificità di form:not(.search-box) .form-group in 30_forms.css. */
    form & .form-group,
    .form-group {
        flex: 1 1 9rem;
        min-width: 0;
        margin-bottom: 0;
    }

    /* bottone elimina occorrenza: cerchio rosso tenue in coda ai campi */
    .btn-rimuovi-data {
        flex: 0 0 auto;
        display: grid;
        place-items: center;
        width: 2.75rem;
        height: 2.75rem;
        /* i campi (padding 0.75rem, line-height 1.5) sono alti ~3.25rem:
           il margine centra il cerchio sulla loro altezza */
        margin-bottom: 0.25rem;
        padding: 0;
        border: none;
        border-radius: var(--radius-pill);
        background: var(--danger-bg);
        color: var(--danger);
        font-size: 1rem;
        line-height: 1;
        cursor: pointer;
        transition:
            color 0.15s,
            background 0.15s;

        &:hover {
            background: var(--danger);
            color: white;
        }
    }

    @media (max-width: 560px) {
        .form-group {
            flex-basis: 100%;
        }
        .btn-rimuovi-data {
            width: 100%;
        }
    }
}
/* separazione tra occorrenze multiple */
.occ-riga + .occ-riga {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border-muted);
}
.wizard-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}
/* Radio generico a riga (usato in info pratiche: prezzo, ecc.) */
.wizard-radio,
form label.wizard-radio {
    /* Il prefisso form label batte la specificita' della regola label
       di 30_forms.css: queste label sono frasi-opzione, non etichette. */
    position: relative;
    display: flex;
    align-items: center;
    padding: 0.9rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: white;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    color: var(--text);
    transition:
        border-color 0.15s,
        background 0.15s;

    &:hover {
        border-color: var(--orange);
    }
    &:has(input:checked) {
        border-color: var(--orange);
        background: var(--orange-soft);
    }
    &:has(input:focus-visible) {
        outline: 2px solid var(--orange);
        outline-offset: 2px;
    }

    /* il radio nativo e' nascosto: la selezione la mostra la card */
    input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }
}
/* Categoria: griglia di card selezionabili con icona */
/* ---- Griglia categorie (card con icona) ---- */
.wizard-categorie {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.75rem;
    margin: 0.5rem 0 0.5rem;
    padding: 0;
    border: 0;

    legend {
        grid-column: 1 / -1;
        margin-bottom: 0.25rem;
        font-size: 0.8rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--text-soft);
    }

    label {
        position: relative;
        display: grid;
        justify-items: center;
        gap: 0.65rem;
        min-height: 7rem;
        margin: 0;
        padding: 1rem 0.75rem 1.5rem;
        border: 1.5px solid var(--border-strong);
        border-radius: var(--radius);
        background: white;
        cursor: pointer;
        transition:
            border-color 0.15s,
            background 0.15s,
            box-shadow 0.15s;

        /* Il radio è nascosto: la selezione la comunica la card stessa */
        input {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            margin: 0;
            opacity: 0;
            cursor: pointer;
        }

        svg {
            width: 2rem;
            height: 2rem;
            color: var(--text-soft);
        }

        span {
            font-weight: 600;
        }

        &:hover {
            border-color: var(--orange);
        }

        &:has(input:focus-visible) {
            outline: 2px solid var(--orange);
            outline-offset: 2px;
        }

        &:has(input:checked) {
            border-color: var(--orange);
            background: var(--orange-soft);
            box-shadow: 0 0 0 1px var(--orange);

            svg {
                color: var(--orange);
            }
        }
    }
}
/* ---- Nota informativa (categoria) ---- */
.wizard-nota {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 1rem 0 0;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--orange-soft);
    border-radius: var(--radius);
    background: var(--orange-wash, var(--orange-soft));
    color: var(--orange-dark);
    font-size: 0.92rem;

    svg {
        flex: 0 0 auto;
        width: 1.2rem;
        height: 1.2rem;
    }
}
/* ---- Chip dettagli (checkbox tipo tag) ---- */
.wizard-tristate {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;

    /* Il prefisso form serve a battere la specificita' di
       form:not(.search-box) label in 30_forms.css. */
    form & label,
    label {
        position: relative;
        flex: none;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.4rem;
        padding: 0.5rem 1.2rem;
        border: 1px solid var(--border);
        border-radius: var(--radius-pill);
        background: var(--surface);
        cursor: pointer;
        /* annulla lo stile "etichetta di campo" che le label ereditano
           dal design system: qui la label e' una pillola di scelta */
        font-size: 0.92rem;
        font-weight: 400;
        text-transform: none;
        letter-spacing: normal;
        color: var(--text);
        text-align: center;
        user-select: none;
        transition:
            border-color 0.15s,
            background 0.15s,
            color 0.15s;

        /* il radio nativo è nascosto: la pillola è il controllo */
        input {
            position: absolute;
            opacity: 0;
            pointer-events: none;
        }

        &:hover {
            background: var(--bg);
        }

        &:has(input:checked) {
            border-color: var(--green);
            background: var(--green);
            color: white;
            font-weight: 600;
        }

        &:has(input:focus-visible) {
            outline: 2px solid var(--orange);
            outline-offset: 2px;
        }
    }
}
.picker-map {
    height: 320px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
/* Nel wizard il dropdown e' in flusso (non assoluto come nella search-box): */
/* l'aspetto arriva da condivisi.css, qui solo lo stacco dall'input.         */
#comune-results {
    margin-top: 0.25rem;
}
.tag-suggest {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.4rem 0;

    button {
        background: white;
        border: 1px solid var(--border);
        border-radius: var(--radius-pill);
        padding: 0.4rem 0.95rem;
        font-size: 0.82rem;
        color: var(--text);
        cursor: pointer;

        &:hover {
            border-color: var(--orange);
            color: var(--orange);
        }
    }
}
/* ---- Editor Tiptap (step Descrizione) ------------------------------------ */

textarea.is-hidden-by-editor {
    display: none;
}
.editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-bottom: 0;
    border-radius: 4px 4px 0 0;
}
.editor-btn {
    min-width: 2rem;
    padding: 0.25rem 0.5rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1;

    &:hover {
        background: var(--surface-hover);
    }
    &.is-active {
        background: var(--accent-bg-light);
        border-color: var(--accent);
    }
}
.editor-sep {
    width: 1px;
    background: var(--border);
    margin: 0 0.25rem;
}
.editor-mount {
    min-height: 12rem;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 0 0 4px 4px;
    background: var(--bg);

    & .ProseMirror {
        outline: none;
        min-height: 10rem;

        & p {
            margin: 0 0 0.5rem;
        }

        & h2,
        & h3,
        & h4 {
            margin: 1rem 0 0.5rem;
            line-height: 1.3;
        }

        & ul,
        & ol {
            margin: 0 0 0.5rem 1.5rem;
        }
    }
}
/* ---- Evento passato (doc 24) --------------------------------------------- */

.wizard-anteprima {
    & .anteprima-section {
        margin: 2rem 0;
    }

    & .anteprima-section-title {
        font-size: 0.85rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--muted);
        margin: 0 0 0.25rem;
    }

    & .anteprima-section-help {
        font-size: 0.85rem;
        margin: 0 0 1rem;
    }
}
.anteprima-nota {
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    border: 1px solid var(--border);
    border-left: 3px solid var(--info);
    border-radius: var(--radius-lg);
    background: var(--surface);

    & textarea {
        width: 100%;
        min-height: 4rem;
        margin: 0.5rem 0;
    }
}
.anteprima-nota-actions {
    text-align: right;
}
.form-ok {
    color: var(--ok, #2a8a4f);
    font-size: 0.9rem;
    margin: 0.25rem 0;
}
.anteprima-card {
    /* .evento-card è un pannello largo (foto + testo affiancati): nessun
       max-width, occupa la larghezza del container come in homepage/listing. */
    width: 100%;
}
.anteprima-detail {
    border: 1px dashed var(--border);
    padding: 1.5rem;
    border-radius: 6px;
}
.anteprima-opzionale {
    opacity: 0.8;
}
.anteprima-immagini-section {
    & h3 {
        font-size: 1rem;
        margin: 1rem 0 0.5rem;
    }
}
.anteprima-immagini-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.5rem;

    & img {
        border-radius: 4px;
        object-fit: cover;
        width: 100%;
        height: 120px;
    }
}
.anteprima-flags {
    margin-top: 1rem;

    & h3 {
        font-size: 1rem;
        margin: 0 0 0.5rem;
    }
}
.anteprima-dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.25rem 1rem;
    margin: 0;

    & dt {
        font-weight: 600;
        color: var(--muted);
    }
    & dd {
        margin: 0;
    }
}
.anteprima-submit {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}
/* ---- Wizard: edizione precedente prefill ---- */

.prefill-collegato {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-left: 3px solid var(--accent);
    background: var(--surface);
    border-radius: 4px;
    margin: 0.5rem 0;
}
@media (max-width: 1220px) {
    .wizard {
        grid-template-columns: 1fr;
    }
    .wizard-sidebar {
        display: none;
    }
}
@media (max-width: 960px) {
    .wizard-content {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 760px) {
    .wizard-stepper {
        overflow-x: auto;

        ol {
            display: flex;
            min-width: 680px;
        }
        li {
            min-width: 7.5rem;
        }
    }

    .wizard-categorie {
        grid-template-columns: repeat(2, 1fr);
    }

    .wizard-card-foot {
        grid-template-columns: 1fr;

        .btn-ghost,
        .btn-primary {
            width: 100%;
        }
    }
}
/* Intro "Proponi un evento": layout a due colonne */

.intro-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 2rem;
    align-items: start;

    @media (max-width: 900px) {
        grid-template-columns: 1fr;
    }
}
.intro-main {
    min-width: 0;
}
.intro-hero {
    margin-bottom: 1.8rem;

    h1 {
        margin: 0 0 0.6rem;
    }

    p {
        color: var(--text-soft);
        margin: 0.25rem 0;
    }
}
/* ---- Tre feature in linea ---- */
.intro-feature {
    list-style: none;
    margin: 0 0 2rem;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;

    @media (max-width: 620px) {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    li {
        display: flex;
        gap: 0.75rem;
        align-items: flex-start;
    }

    @media (min-width: 621px) {
        li + li {
            border-left: 1px solid var(--border);
            padding-left: 1.5rem;
        }
    }

    div {
        display: flex;
        flex-direction: column;
        gap: 0.15rem;

        span {
            font-size: 0.85rem;
            color: var(--muted-strong);
            line-height: 1.4;
        }
    }

    strong {
        font-size: 0.95rem;
    }
}
/* Cerchio icona della intro: base unica, override contestuali dove serve */
.intro-ico {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-pill);
    background: #f6e3d3;
    color: var(--orange);

    svg {
        width: 20px;
        height: 20px;
    }
}
/* ---- Riprendi bozza ---- */
.intro-resume {
    display: flex;
    gap: 1rem;
    align-items: center;

    .intro-ico {
        align-self: flex-start;
    }
    background: var(--bg);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    padding: 1.2rem 1.4rem;
    margin-bottom: 2rem;
    overflow: hidden;

    h2 {
        /* Centrato verticalmente sull'altezza dell'icona a fianco (44px) */
        min-height: 44px;
        display: flex;
        align-items: center;
        margin: 0 0 0.6rem;
        font-size: 1.7rem;
    }

    button {
        font-size: 0.68rem;
    }
}
.intro-resume-body {
    min-width: 0;
    flex: 1;
}
.intro-resume-img {
    flex: none;
    align-self: flex-end;
    width: 240px;
    height: auto;
    object-fit: contain;
    object-position: right bottom;

    @media (max-width: 620px) {
        display: none;
    }
}
.intro-resume-titolo {
    margin: 0;
    font-weight: 700;
    font-size: 1.05rem;
}
.intro-resume-salvata {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.2rem 0.65rem;
    border-radius: var(--radius-pill);
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--muted-strong);
    font-size: 0.75rem;
    font-weight: 400;
    vertical-align: middle;
    white-space: nowrap;
}
.intro-resume-step {
    margin: 0.15rem 0 0;
    font-size: 0.9rem;

    span {
        color: var(--orange);
        font-weight: 500;
    }
}
.intro-resume-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1rem;
    margin-left: -3.5em;

    /* Variante locale dei bottoni: il mockup della intro li vuole in
       sentence-case con icona, non nel formato pill uppercase di sistema. */
    :is(.btn-primary, .btn-ghost) {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        text-transform: none;
        letter-spacing: normal;
        font-size: 0.92rem;
        border-radius: var(--radius);

        svg {
            width: 17px;
            height: 17px;
        }
    }
}
/* ---- Pannello regole ammessi / non ammessi ---- */
.intro-panel {
    padding: 1.4rem 1.6rem;
    margin-bottom: 2rem;

    h2 {
        margin: 0 0 0.25rem;
        font-size: 1.3rem;
    }

    > .muted {
        margin: 0 0 1.2rem;
    }
}
.intro-regole {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;

    @media (max-width: 620px) {
        grid-template-columns: 1fr;
        gap: 1.2rem;
    }

    h3 {
        font-size: 1.15rem;
        margin: 0 0 0.7rem;
    }

    ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    li {
        position: relative;
        padding-left: 1.4rem;
        font-size: 0.9rem;
        line-height: 1.4;
        color: var(--text-soft);

        &::before {
            position: absolute;
            left: 0;
            top: 0;
            font-weight: 700;
        }
    }
}
.intro-regole-col {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.1rem;

    &.is-ok {
        h3 {
            color: var(--green-dark);
        }

        li::before {
            content: "✓";
            color: var(--green);
        }
    }

    &.is-no {
        h3 {
            color: var(--danger);
        }

        li::before {
            content: "✕";
            color: var(--danger);
        }
    }
}
.intro-regole-link {
    margin: 1.4rem 0 0;

    a {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        color: var(--orange);
        text-decoration: none;
        font-size: 0.9rem;

        svg {
            width: 16px;
            height: 16px;
        }

        &:hover {
            text-decoration: underline;
        }
    }
}
/* ---- Gate: checkbox + CTA ---- */
.intro-gate {
    padding: 1.4rem 1.6rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.intro-check {
    span {
        line-height: 1.45;
    }

    a {
        color: var(--orange);
        font-weight: 500;
    }
}
.intro-cta {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    width: 100%;
    margin-top: 0.4rem;
    padding: 0.9rem 1.4rem;
    border: none;
    border-radius: var(--radius);
    background: var(--orange);
    color: #fff;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;

    &:hover:not(:disabled) {
        background: var(--orange-dark);
    }

    &:disabled {
        background: var(--border-strong);
        cursor: not-allowed;
    }

    .intro-ico {
        width: 40px;
        height: 40px;
        background: rgba(255, 255, 255, 0.18);
        color: #fff;
    }
}
.intro-cta-text {
    display: flex;
    flex-direction: column;

    strong {
        font-size: 1.05rem;
    }

    small {
        font-size: 0.85rem;
        opacity: 0.9;
    }
}
/* ---- Sidebar ---- */
.intro-steps-img {
    display: block;
    width: calc(100% + 2.6rem);
    max-width: calc(100% + 2.6rem);
    height: auto;
    margin: 1rem -1.3rem -1.2rem;
}
.intro-side {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    position: sticky;
    top: 1.5rem;

    @media (max-width: 900px) {
        position: static;
    }
}
.intro-side-card {
    padding: 1.2rem 1.3rem;
    overflow: hidden;

    h2 {
        display: flex;
        align-items: center;
        gap: 0.7rem;
        font-size: 1.25rem;
        margin: 0 0 0.9rem;

        /* Icona su tile quadrato arrotondato, come nel mockup */
        svg {
            box-sizing: content-box;
            width: 18px;
            height: 18px;
            padding: 8px;
            border-radius: var(--radius-sm);
            background: #f3ead9;
            color: var(--brown);
        }
    }

    /* La card "Come funziona" tinge di verde solo il tile dell'icona,
       non piu' l'intera card (il mockup la vuole crema come le altre). */
    &.is-come h2 svg {
        background: #e7ebd9;
        color: var(--green-dark);
    }

    p {
        margin: 0.3rem 0;
        font-size: 0.9rem;
    }

    a {
        color: var(--orange);
        text-decoration: none;
        font-size: 0.9rem;

        &:hover {
            text-decoration: underline;
        }
    }
}
.intro-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: step;
    display: flex;
    flex-direction: column;
    gap: 1rem;

    li {
        counter-increment: step;
        position: relative;
        padding-left: 2.2rem;

        &::before {
            content: counter(step);
            position: absolute;
            left: 0;
            top: 0;
            width: 1.5rem;
            height: 1.5rem;
            display: grid;
            place-items: center;
            border-radius: var(--radius-pill);
            background: var(--green);
            color: #fff;
            font-size: 0.8rem;
            font-weight: 700;
            z-index: 1;
        }

        &:not(:last-child)::after {
            content: "";
            position: absolute;
            left: 0.75rem;
            top: 1.5rem;
            bottom: -1rem;
            border-left: 2px dashed var(--green);
            opacity: 0.4;
            transform: translateX(-1px);
        }
    }

    strong {
        display: block;
        font-size: 0.9rem;
    }

    span {
        display: block;
        font-size: 0.82rem;
        color: var(--muted-strong);
        line-height: 1.4;
    }
}
.intro-checklist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;

    li {
        display: flex;
        align-items: center;
        gap: 0.7rem;
        font-size: 0.88rem;
        color: var(--text-soft);

        svg {
            flex: none;
            box-sizing: content-box;
            width: 15px;
            height: 15px;
            padding: 5px;
            border-radius: var(--radius-sm);
            background: #f3ead9;
            color: var(--brown);
        }
    }
}
/* Galleria immagini del wizard (step programma) */

.dropzone {
    border: 2px dashed var(--border);
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
    margin: 1rem 0;
    transition:
        border-color 0.2s,
        background 0.2s;

    &.is-dragover {
        border-color: var(--orange);
        background: var(--orange-soft);
    }
}
.dropzone-label {
    display: block;
    cursor: pointer;
}
.dropzone input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.dropzone-click {
    text-decoration: underline;
}
.dropzone-counter {
    margin-top: 0.5rem;
    color: var(--muted);
}
.upload-queue {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
}
.upload-item {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 0.5rem;
    align-items: center;
    padding: 0.5rem;
    border-radius: 4px;
    background: var(--surface);

    &.is-ok {
        color: var(--green);
    }
    &.is-error {
        color: var(--orange);
    }

    progress {
        width: 200px;
    }
}
/* Grid galleria: <ul> con card trascinabili (vedi immagini.js) */
.immagini-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    list-style: none;
    padding: 0;
    margin: 1rem 0;
}
.immagine-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: white;
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.5rem;
    cursor: grab;

    &.is-dragging {
        opacity: 0.4;
        cursor: grabbing;
    }

    img {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        object-fit: cover;
    }

    .immagine-meta {
        padding: 0.5rem 0.7rem 0;
        font-size: 0.78rem;
        color: var(--muted);
    }

    .immagine-elimina {
        padding: 0.5rem 0.7rem 0.7rem;
    }
}
.immagine-drag-handle {
    position: absolute;
    top: 0.25rem;
    left: 0.25rem;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: 0;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    cursor: grab;
}
/* ============================================================ */
/* Wizard — step Anteprima e invio                               */
/* Banner di stato, tab card/pagina; il resto degli stili        */
/* anteprima vive in form.css (sezioni, card, dettaglio).        */
/* ============================================================ */

/* ---- layout di pagina ----
   L'anteprima usa il layout wizard standard (stepper + sidebar) ma senza
   la colonna "Anteprima live": la card occupa tutta la larghezza restante. */
.wizard-anteprima .wizard-content {
    grid-template-columns: minmax(0, 1fr);
}

/* Footer del form d'invio: resta solo Indietro, allineato a destra
   (il CTA d'invio sta nel gate). Sotto i 760px vale lo stacking
   standard di form.css. */
@media (min-width: 761px) {
    .anteprima-submit .wizard-card-foot {
        grid-template-columns: auto auto;
        justify-content: end;
    }
}

/* ---- banner di stato ---- */
.anteprima-stato {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 2rem;
    /* respiro dalla riga di separazione dell'header della card */
    margin: 1.5rem 0 2rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--border);
    border-left-width: 4px;
    border-radius: var(--radius-lg);
    background: var(--surface);

    > div {
        flex: 1 1 18rem;
    }

    h2 {
        margin: 0 0 0.25rem;
        font-size: 1.1rem;
    }

    p {
        margin: 0;
        color: var(--text-soft);
        font-size: 0.92rem;
    }

    ul {
        margin: 0;
        padding: 0;
        list-style: none;

        li {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.92rem;

            &::before {
                content: "";
                width: 6px;
                height: 6px;
                border-radius: 50%;
                background: var(--orange);
            }

            + li {
                margin-top: 0.35rem;
            }
        }
    }

    &.is-warning {
        border-left-color: var(--hot);
        background: var(--warning-bg);
    }

    &.is-success {
        border-left-color: var(--green);
    }

    @media (max-width: 620px) {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ---- tab card / pagina ---- */
.anteprima-preview {
    margin-bottom: 2rem;

    > header {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        gap: 0.75rem;
        margin-bottom: 1rem;

        h2 {
            margin: 0;
        }

        nav {
            display: flex;
            gap: 0.5rem;
        }

        button {
            padding: 0.45rem 1.1rem;
            border: 1px solid var(--border);
            border-radius: var(--radius-pill);
            background: var(--surface);
            font-size: 0.9rem;
            cursor: pointer;
            transition:
                background 0.15s,
                color 0.15s,
                border-color 0.15s;

            &:hover {
                background: var(--bg);
            }

            &.is-active {
                background: var(--orange);
                border-color: var(--orange);
                color: white;
                font-weight: 600;
            }
        }
    }
}
/* ============================================================ */
/* Admin                                                        */
/* ============================================================ */
.admin-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    margin-top: 1rem;

    th,
    td {
        padding: 0.7rem 0.9rem;
        text-align: left;
        border-bottom: 1px solid var(--border);
        font-size: 0.93rem;
    }

    thead th {
        background: var(--card);
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--muted);
        font-weight: 600;
    }

    tbody tr:last-child td {
        border-bottom: none;
    }
}

.admin-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin: 2rem 0;

    @media (max-width: 720px) {
        grid-template-columns: 1fr;
    }

    h3 {
        font-size: 0.78rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--muted);
        margin: 1.5rem 0 0.5rem;
        font-family: var(--font-body);
        font-weight: 600;

        &:first-child {
            margin-top: 0;
        }
    }

    pre {
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 0.85rem;
        white-space: pre-wrap;
        font-family: inherit;
        font-size: 0.95rem;
        line-height: 1.5;
    }
}

/* Sotto-nav admin */
.admin-nav {
    display: flex;
    gap: 0.4rem;
    margin: 0 0 2.5rem;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0;
    flex-wrap: wrap;

    a {
        padding: 0.7rem 1.1rem;
        color: var(--muted);
        font-size: 0.78rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        font-weight: 600;
        border-bottom: 2px solid transparent;
        margin-bottom: -1px;

        &:hover {
            color: var(--orange);
            text-decoration: none;
        }

        &.is-current {
            color: var(--orange);
            border-bottom-color: var(--orange);
        }
    }
}

/* Chip filtri per stato eventi */
.filtri-stati {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 1.5rem;

    a {
        padding: 0.45rem 0.95rem;
        border: 1px solid var(--border);
        border-radius: var(--radius-pill);
        background: white;
        font-size: 0.82rem;
        color: var(--text);
        transition:
            border-color 0.15s,
            background 0.15s,
            color 0.15s;

        &:hover {
            border-color: var(--orange);
            color: var(--orange);
            text-decoration: none;
        }

        &.is-current {
            background: var(--orange);
            border-color: var(--orange);
            color: white;
        }
    }
}

/* Badge di stato evento (dentro la tabella admin) */
.badge-stato {
    display: inline-block;
    padding: 0.2rem 0.7rem;
    border-radius: var(--radius-pill);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    background: var(--card);
    color: var(--muted);
    border: 1px solid var(--border);

    &.is-pending {
        background: var(--warning-bg);
        border-color: var(--warning-border);
        color: #8a6d1e;
    }
    &.is-published {
        background: #e8f4e8;
        border-color: var(--green);
        color: var(--green-dark);
    }
    &.is-rejected {
        background: var(--orange-soft);
        border-color: var(--orange);
        color: var(--orange-dark);
    }
    &.is-sospeso {
        background: var(--warning-bg);
        border-color: var(--warning-border);
        color: var(--warning-text);
    }
}

.badge-segnalato {
    display: inline-block;
    padding: 0.1em 0.5em;
    margin-left: 0.4em;
    border-radius: 0.2em;
    background: var(--hot);
    color: white;
    font-size: 0.85em;
    font-weight: 500;
}

/* Card singola per le sezioni della pagina manutenzione */
.manutenzione-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem 1.75rem;
    margin: 1.5rem 0;

    h2 {
        font-size: 1.5rem;
        margin: 0 0 0.75rem;
    }

    p {
        margin: 0 0 1rem;
        line-height: 1.6;
    }

    form {
        display: inline-block;
    }

    code {
        background: var(--card);
        padding: 0.1rem 0.4rem;
        border-radius: 4px;
        font-size: 0.9em;
    }
}

.admin-reject {
    margin-top: 1rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.2rem;

    summary {
        cursor: pointer;
        font-weight: 500;
        color: var(--text);

        &:hover {
            color: var(--orange);
        }
    }
}

.admin-motivo {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--border);

    &:last-of-type {
        border-bottom: none;
    }

    input {
        margin-top: 0.25rem;
    }
}


/* ============================================================ */
/* "I miei eventi"                                              */
/* ============================================================ */
.miei-list {
    list-style: none;
    margin: 0.75rem 0 1.75rem;

    li {
        padding: 0.7rem 0;
        border-bottom: 1px solid var(--border);
        display: flex;
        align-items: baseline;
        gap: 0.5rem;
        flex-wrap: wrap;

        &:last-child {
            border-bottom: none;
        }
    }
}

.miei-rejected {
    background: var(--card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--orange);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin: 0.75rem 0;

    h3 {
        margin: 0 0 0.25rem;
        font-size: 1.4rem;
    }

    ul {
        margin: 0.5rem 0;
        padding-left: 1.2rem;

        li {
            margin-bottom: 0.6rem;
        }
    }

    .miei-nota {
        background: white;
        border-left: 2px solid var(--border);
        margin: 0.5rem 0;
        padding: 0.7rem 1rem;
        color: var(--muted);
        font-style: italic;
    }
}


.admin-nota-proponente {
    margin: 1rem 0;
    padding: 0.75rem 1rem;
    background: var(--warning-bg-light, var(--warning-bg));
    border-left: 3px solid var(--warning, #f0a020);
    border-radius: 4px;

    & h3 {
        margin: 0 0 0.5rem;
        font-size: 0.9rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--muted);
    }

    & blockquote {
        margin: 0;
        white-space: pre-wrap;
        font-style: normal;
    }
}

.admin-serie {
    margin-top: 2rem;

    .lista-edizioni {
        padding-left: 1.25rem;
        margin: 0.5rem 0;
    }

    .admin-notice {
        background: #fffbf0;
        border-left: 4px solid #e8c940;
        padding: 0.75rem 1rem;
        border-radius: 4px;
        margin-bottom: 1rem;
        font-size: 0.95rem;
    }
}

/* ---- Wizard immagini: dropzone, upload queue, galleria ---- */
/* ============================================================ */
/* Regolamento                                                  */
/* ============================================================ */
.rules {
    padding: 5rem 0 7rem;

    header {
        margin-bottom: 4rem;

        small {
            display: inline-block;

            margin-bottom: 1rem;

            color: var(--green);

            font-size: 0.85rem;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }

        h1 {
            margin-bottom: 1.5rem;

            font-size: clamp(3rem, 6vw, 5rem);
            line-height: 0.92;

            text-wrap: balance;
        }

        p {
            max-width: 60ch;

            color: var(--muted);

            font-size: 1.15rem;
            line-height: 1.7;
        }
    }

    .rule-list {
        display: grid;
        gap: 1.25rem;
    }

    .rule {
        display: grid;
        grid-template-columns: 56px 1fr;
        gap: 1.5rem;

        padding: 2rem;

        border: 1px solid var(--border);
        border-radius: 28px;

        background: white;

        transition:
            transform 0.2s ease,
            box-shadow 0.2s ease;

        &.is-ok {
            background: rgba(104, 141, 105, 0.07);
            border-color: rgba(104, 141, 105, 0.25);

            svg {
                color: var(--green);
            }
        }

        &.is-no {
            background: rgba(180, 50, 50, 0.05);
            border-color: rgba(180, 50, 50, 0.18);

            svg {
                color: #b43232;
            }
        }

        &:hover {
            transform: translateY(-2px);

            box-shadow: 0 12px 32px rgba(0, 0, 0, 0.05);
        }

        svg {
            width: 3em;
            height: 3em;

            margin-top: 0.2rem;

            color: var(--green);
        }

        h2 {
            margin-bottom: 0.65rem;

            font-size: 1.3rem;
        }

        p {
            color: var(--muted);
            line-height: 1.7;
        }

        @media (max-width: 720px) {
            grid-template-columns: 1fr;

            gap: 1rem;
        }
    }

    .rules-note {
        margin-top: 3rem;

        padding: 1.5rem 2rem;

        border: 1px solid var(--border);
        border-radius: 24px;

        background: rgba(0, 0, 0, 0.02);

        p {
            color: var(--muted);
            line-height: 1.7;
        }
    }
}

/* ============================================================ */
/* Auth                                                         */
/* ============================================================ */
.auth-providers {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    margin: 1.5rem 0;
}

/* Honeypot field: visibile solo a bot, nascosto agli umani. */
.honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---- Profilo / cancellazione account ---- */

.link-danger {
    color: var(--danger);
    text-decoration: underline;
}

.info-box {
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    border-radius: 6px;

    &.success {
        background: #e8f5e9;
        border-left: 4px solid #4caf50;
    }

    &.warning {
        background: var(--warning-bg);
        border-left: 4px solid var(--warning-border);

        ul {
            margin: 0.5rem 0 0 1.25rem;
            padding: 0;
        }
    }
}

/* ============================================================ */
/* Pagina errore (404, 403, 500 ecc.)                          */
/* ============================================================ */

.error-page {
    padding: 4rem 1rem;
    text-align: center;
}

.error-code {
    font-size: 6rem;
    font-weight: 800;
    line-height: 1;
    color: var(--orange);
    margin: 0 0 0.5rem;
    font-family: var(--font-display);
}

.error-page h1 {
    font-size: 2rem;
    margin: 0 0 1rem;
}

.error-msg {
    color: var(--muted);
    margin: 0 0 2rem;
}

.error-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* ============================================================ */
/* Card — temi (colori/superficie). Combinare con una classe-caso */
/* es. <section class="light-card auth-card">                    */
/* ============================================================ */
.light-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow);
    color: var(--text-soft);

    h1 {
        color: var(--text);
        line-height: 1.2;
    }
    p {
        line-height: 1.6;
    }

    hr:not([data-label]) {
        border: none;
        border-top: 1px solid var(--border);
    }

    /* link nel corpo card; esclusi gli anchor-bottone (btn-*),
       che hanno i loro colori */
    a:not([class*="btn-"]) {
        color: var(--orange);
        &:hover {
            color: var(--orange-dark);
        }
    }
}

.dark-card {
    position: relative;
    border-radius: var(--radius-lg);
    background: var(--dark-panel);
    box-shadow: var(--shadow);
    color: var(--on-dark-70);

    h1 {
        color: white;
        line-height: 1.2;
    }
    p {
        line-height: 1.6;
    }

    hr:not([data-label]) {
        border: none;
        border-top: 1px solid var(--on-dark-12);
    }

    a:not([class*="btn-"]) {
        color: var(--hot);
        &:hover {
            color: var(--orange);
        }
    }

    .btn-primary {
        background: white;
        color: var(--brown);
        &:hover {
            background: var(--on-dark-90);
        }
    }
}

/* ============================================================ */
/* Auth — caso: pannello stretto centrato (login, registrati)   */
/* ============================================================ */
.auth-card {
    max-width: 440px;
    margin: clamp(3rem, 8vw, 6rem) auto;
    padding: clamp(1.75rem, 5vw, 2.5rem);

    img {
        filter: drop-shadow(-15px -10px 15px rgba(0, 0, 0, 0.6));
    }
    h1 {
        margin-bottom: 0.5rem;
    }
    > p {
        margin-bottom: 1.5rem;
    }

    form button[type="submit"] {
        display: block;
        margin-left: auto;
    }

    .auth-providers {
        /* invariato */
    }
    hr[data-label] {
        /* invariato */
    }
    hr:not([data-label]) {
        margin: 1.5rem 0;
    }
    .auth-links {
        font-size: 0.9rem;
        p {
            margin-top: 0.5rem;
        }
    }
}

/* ============================================================ */
/* Email notice — caso: pannello largo (controlla la tua email) */
/* ============================================================ */
.email-notice {
    width: 70%;
    max-width: 820px;
    margin: clamp(9rem, 12vw, 9rem) auto;
    padding: clamp(2rem, 5vw, 3rem);

    &::before {
        /* glow invariato */
    }

    img {
        display: block;
        width: 100%;
        max-width: 560px;
        height: auto;
        margin: -9em 0 -2em -2em;
        filter: drop-shadow(-15px -10px 15px rgba(0, 0, 0, 0.6));
    }

    /* -- varianti per flusso (classe passata dal template) -- */

    /* registrazione/reinvio (contadino): box più stretto, figura a
       destra col gomito che sborda dal riquadro */
    &:is(.is-registrazione, .is-reinvio) {
        max-width: 700px;

        img {
            margin: -9em -4.5em -2em auto;
        }
    }

    /* password/cancellazione (busta): allineamento che aveva la
       vecchia pagina dedicata */
    &:is(.is-password, .is-cancellazione) img {
        max-width: 80%;
        margin: -10em -5em -2em auto;
    }
    hr {
        margin: 2rem 0;
    }
    h1 {
        margin-bottom: 1rem;
        font-size: clamp(1.6rem, 4vw, 2rem);
    }
    p {
        margin-bottom: 1rem;
        &:last-child {
            margin-bottom: 0;
        }
    }
}

/* ============================================================ */
/* Link non valido — caso: pannello breve d'errore              */
/* ============================================================ */
/* ============================================================ */
/* Profilo utente                                               */
/* Card riusano il tema .light-card (auth-statiche.css);        */
/* qui solo i casi specifici della pagina.                      */
/* ============================================================ */

.profilo {
    display: grid;
    gap: 1.25rem;
}

.profilo-intro {
    margin-bottom: 0.75rem;

    h1 {
        margin: 0;
        line-height: 1.1;
    }

    p {
        margin: 0.6rem 0 0;
        color: var(--text-soft);
        font-size: 1.05rem;
    }
}

/* ---- Card riepilogo account ---- */
.account-card {
    display: grid;
    gap: 1.5rem;
    padding: clamp(1.25rem, 3vw, 2rem);

    .account-head {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 1.5rem 2rem;
    }

    .account-avatar {
        display: grid;
        place-items: center;
        flex: 0 0 auto;
        width: clamp(4.5rem, 9vw, 6rem);
        aspect-ratio: 1;
        border-radius: 50%;
        background: var(--card);
        color: var(--orange);
        font-family: var(--font-display);
        font-size: clamp(2.4rem, 6vw, 3.4rem);
        font-weight: 700;
    }

    .account-id {
        h2 {
            margin: 0;
            line-height: 1.05;
        }

        p {
            margin: 0.35rem 0 0.6rem;
            color: var(--text-soft);
            font-weight: 600;
        }
    }

    .account-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 1.25rem 2rem;
        margin: 0 0 0 auto; /* spinge le meta a destra quando c'è spazio */

        > div {
            position: relative;
            padding-left: 2rem;

            /* divisore verticale tra le meta (non prima della prima) */
            &::before {
                content: "";
                position: absolute;
                left: 0;
                top: 50%;
                transform: translateY(-50%);
                width: 1px;
                height: 2.6rem;
                background: var(--border);
            }

            &:first-child {
                padding-left: 0;

                &::before {
                    display: none;
                }
            }
        }

        dt {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            color: var(--text-soft);
            font-size: 0.9rem;

            svg {
                width: 1.3rem;
                height: 1.3rem;
                color: var(--orange);
            }
        }

        dd {
            margin: 0.3rem 0 0;
            font-weight: 700;
        }
    }
}

/* Badge stato profilo (anche visibile in admin per utenti sospesi) */
.badge-stato {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border-radius: var(--radius-pill);
    padding: 0.2rem 0.55rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;

    svg {
        width: 0.85rem;
        height: 0.85rem;
    }
}

.badge-stato-attivo {
    background: var(--success-bg);
    color: var(--green-dark);
}

.badge-stato-sospeso {
    background: var(--danger-bg);
    color: var(--danger-dark);
}

/* Nota informativa dentro una card (email non modificabile, ecc.) */
/* ---- Riga impostazione: icona + descrizione a sinistra, campo a destra ---- */
.impostazioni-riga {
    display: grid;
    grid-template-columns: minmax(13rem, 0.8fr) minmax(0, 1.2fr);
    gap: 2rem;
    padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.25rem, 3vw, 2rem);

    .riga-testa {
        display: flex;
        gap: 1rem;
    }

    .riga-icona {
        display: grid;
        place-items: center;
        flex: 0 0 auto;
        width: 3rem;
        height: 3rem;
        border-radius: 50%;
        background: var(--card);
        color: var(--text-soft);

        svg {
            width: 1.4rem;
            height: 1.4rem;
        }

        &.riga-icona-danger {
            background: var(--danger-bg);
            color: var(--danger);
        }
    }

    .riga-info {
        h2,
        h3 {
            margin: 0.1rem 0 0.4rem;
        }

        h3 {
            font-size: 1.1rem;
        }

        p {
            margin: 0;
            color: var(--text-soft);
            line-height: 1.45;
        }
    }

    .riga-campo {
        display: grid;
        gap: 1rem;
        align-content: start;

        label {
            display: grid;
            gap: 0.45rem;

            > span {
                font-size: 0.9rem;
                font-weight: 700;
            }
        }
    }

    /* Campo + bottone di salvataggio sulla stessa riga finché c'è spazio;
       il bottone scende sotto, a piena larghezza, quando lo spazio finisce. */
    .campo-azione {
        display: flex;
        flex-wrap: wrap;
        align-items: end;
        gap: 1rem;

        label {
            flex: 999 1 14rem;
        }

        .btn-primary {
            flex: 1 1 auto;
            white-space: nowrap;
        }
    }

    .riga-azioni {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
        justify-content: flex-end;
    }

    /* note informative a livello di riga: tutta la larghezza della card */
    > .nota-info {
        grid-column: 1 / -1;
    }
}

/* Campo comune con dropdown autocomplete in posizione assoluta */
.comune-field {
    position: relative;

    .autocomplete-results {
        position: absolute;
        top: calc(100% + 0.4rem);
        left: 0;
        right: 0;
        z-index: 10;
        box-shadow: var(--shadow);
    }
}

.comune-attuale {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;

    svg {
        width: 1.2rem;
        height: 1.2rem;
        color: var(--text-soft);
    }
}

/* Form newsletter htmx caricato dentro .riga-campo */
.profilo-newsletter {
    display: grid;
    gap: 0.85rem;

    .checkbox-label {
        display: flex;
        gap: 0.7rem;
        align-items: flex-start;
        line-height: 1.45;

        input {
            margin-top: 0.15rem;
            accent-color: var(--orange);
        }
    }
}

/* ---- Eliminazione account: accordion nativo <details> ---- */
.elimina-account {
    margin-top: 0.75rem;

    summary {
        display: flex;
        align-items: center;
        gap: 1.1rem;
        padding: 1.35rem 1.5rem;
        cursor: pointer;
        list-style: none;

        /* marker nativo via (Safari usa lo pseudo-elemento) */
        &::-webkit-details-marker {
            display: none;
        }

        h2 {
            flex: 1;
            margin: 0;
            font-size: 1.4rem;
        }

        /* chevron indicatore, ruota all'apertura */
        > svg {
            flex: none;
            width: 1.3rem;
            height: 1.3rem;
            color: var(--muted);
            transition: transform 0.2s;
        }
    }

    &[open] summary > svg {
        transform: rotate(180deg);
    }

    > div {
        padding: 0 1.5rem 1.5rem;

        p {
            margin: 0 0 1.25rem;
            color: var(--text-soft);
            line-height: 1.45;
        }
    }
}

/* ============================================================ */
/* Mobile                                                       */
/* ============================================================ */
@media (max-width: 760px) {
    .account-card .account-meta {
        flex-direction: column;
        align-items: stretch;
        margin-left: 0;
        width: 100%;

        > div {
            padding-left: 0;
            padding-top: 1rem;

            &::before {
                top: 0;
                left: 0;
                transform: none;
                width: 100%;
                height: 1px;
            }

            &:first-child {
                padding-top: 0;

                &::before {
                    display: none;
                }
            }
        }
    }

    .impostazioni-riga {
        grid-template-columns: 1fr;
    }
}
/* ============================================================ */
/* I miei eventi — dashboard utente                              */
/* Tre varianti di card su base .flat-card: .miei-card (bozze,   */
/* con illustrazione), .miei-nuova (crea, tratteggiata),         */
/* .miei-riga (compatta: revisione, pubblicati, rifiutati).      */
/* ============================================================ */

.miei {
    width: min(920px, calc(100% - 48px));

    section + section {
        margin-top: 3.5rem;
    }

    h2 {
        margin: 0 0 1.25rem;
    }
}

.miei-testa {
    margin-bottom: 3rem;

    h1 {
        margin: 0 0 0.4rem;
    }

    p {
        margin: 0;
        color: var(--muted);
    }
}

/* etichetta di categoria sulle card bozza: stessi colori dei tag
   categoria delle card evento in homepage (vedi card-evento.css),
   fonte unica i token --marker-* */
.miei .badge {
    padding: 0.25rem 0.7rem;
    border-radius: var(--radius-pill);
    background: var(--bg);
    color: var(--text-soft);
    font-size: 0.85rem;

    &[data-categoria] {
        color: #fff;
    }

    &[data-categoria="sagra"] {
        background: var(--marker-sagra);
    }
    &[data-categoria="fiera"] {
        background: var(--marker-fiera);
    }
    &[data-categoria="rievocazione"] {
        background: var(--marker-rievocazione);
    }
    &[data-categoria="concerto"] {
        background: var(--marker-concerto);
    }
    &[data-categoria="spettacolo"] {
        background: var(--marker-spettacolo);
    }
}

/* ---- card bozza / modifica in bozza ---- */
.miei-card {
    position: relative;
    padding: 1.75rem 2rem;

    + .miei-card {
        margin-top: 1rem;
    }

    > div {
        min-width: 0;
        /* corsia riservata all'illustrazione assoluta a destra */
        padding-right: 36%;

        @media (max-width: 620px) {
            padding-right: 0;
        }
    }

    /* illustrazione: fuori flusso, riempie l'altezza della card senza
       poterla aumentare; il testo non la tocca grazie alla corsia */
    > img {
        position: absolute;
        top: 1rem;
        right: 1.25rem;
        bottom: 1rem;
        height: calc(100% - 2rem);
        width: auto;
        max-width: 34%;
        object-fit: contain;
        object-position: right center;
        opacity: 0.85;

        @media (max-width: 620px) {
            display: none;
        }
    }

    > div > header {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.6rem;
        margin-bottom: 0.9rem;

        h3 {
            margin: 0;
            font-size: 1.2rem;
        }

        /* stato della bozza: "Nuovo evento" / "Modifica" */
        .stato {
            color: var(--muted);
            font-size: 0.85rem;
        }
    }

    .passi {
        display: flex;
        flex-wrap: wrap;
        gap: 0.35rem 0.75rem;
        margin: 0 0 0.75rem;
        color: var(--muted);
        font-size: 0.92rem;

        .fatto {
            color: var(--green);
            font-weight: 600;
        }
    }

    > div > small {
        display: block;
        margin-bottom: 1.25rem;
        color: var(--muted);
    }

    footer {
        display: flex;
        align-items: center;
        gap: 1rem;

        /* elimina: bottone sottotono, testo e basta */
        form button {
            padding: 0;
            border: none;
            background: none;
            color: var(--danger);
            font-size: 0.9rem;
            cursor: pointer;

            &:hover {
                text-decoration: underline;
            }
        }
    }
}

/* ---- card crea nuovo ---- */
.miei-nuova {
    padding: 2.25rem;
    text-align: center;
    border: 2px dashed var(--border-strong);
    border-radius: var(--radius);

    h3 {
        margin: 0;
    }

    p {
        margin: 0.75rem 0 1.5rem;
        color: var(--muted);
    }
}

/* ---- riga compatta: revisione, pubblicati, rifiutati ---- */
.miei-riga {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    padding: 1.1rem 1.4rem;

    + .miei-riga {
        margin-top: 0.75rem;
    }

    > div {
        min-width: 0;
    }

    h3 {
        margin: 0 0 0.2rem;
        font-size: 1.05rem;
    }

    small {
        color: var(--muted);
    }

    .attesa {
        flex: none;
        color: var(--muted);
        font-weight: 600;
    }

    .azioni {
        flex: none;
        display: flex;
        gap: 0.5rem;
    }

    /* variante rifiutato: contenuto alto (motivi + nota), niente centratura */
    &.is-rifiutato {
        align-items: flex-start;

        form {
            flex: none;
        }

        ul {
            margin: 0.75rem 0 0;
            padding-left: 1.1rem;
        }

        li + li {
            margin-top: 0.5rem;
        }

        li span {
            display: block;
            color: var(--muted);
        }

        blockquote {
            margin: 0.75rem 0 0;
            padding: 0.5rem 1rem;
            border-left: 3px solid var(--border);
            color: var(--muted);
            font-style: italic;
        }
    }
}

@media (max-width: 620px) {
    /* le righe compatte impilano contenuto e azioni */
    .miei-riga {
        flex-direction: column;
        align-items: stretch;

        .azioni {
            justify-content: flex-start;
        }
    }
}
/* ============================================================ */
/* Cancella account                                             */
/* ============================================================ */

.cancella {
    width: min(920px, calc(100% - 48px));
}

.cancella-testa {
    margin-bottom: 2.5rem;

    h1 {
        margin: 0 0 0.5rem;
    }

    p {
        margin: 0.3rem 0;
        color: var(--muted);
    }
}

.cancella-email {
    display: inline-block;
    margin: 0.35rem 0;
    padding: 0.55rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--card);
    font-size: 1.15rem;
}

/* icona su tile tonda accanto ai titoli h2 della pagina */
.cancella h2 {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0 0 1.25rem;
    font-size: 1.25rem;

    svg {
        box-sizing: content-box;
        flex: none;
        width: 18px;
        height: 18px;
        padding: 9px;
        border-radius: var(--radius-pill);
        background: #f3ead9;
        color: var(--orange);
    }
}

/* ---- Cosa succederà: card con accento e tre colonne ---- */
.cancella-cosa {
    padding: 1.75rem 2rem;
    border-left: 4px solid var(--orange);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;

    > div {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;

        article + article {
            border-left: 1px solid var(--border);
            padding-left: 2rem;
        }
    }

    h3 {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        margin: 0 0 1rem;
        font-size: 1rem;

        svg {
            box-sizing: content-box;
            flex: none;
            width: 16px;
            height: 16px;
            padding: 8px;
            border-radius: var(--radius-sm);
            background: #f3ead9;
            color: var(--orange);
        }
    }

    ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    li {
        display: flex;
        gap: 0.55rem;
        line-height: 1.4;

        + li {
            margin-top: 0.7rem;
        }

        svg {
            flex: none;
            width: 1.05rem;
            height: 1.05rem;
            margin-top: 0.15rem;
            color: var(--orange);
        }
    }

    @media (max-width: 760px) {
        > div {
            grid-template-columns: 1fr;

            article + article {
                border-left: 0;
                border-top: 1px solid var(--border);
                padding-left: 0;
                padding-top: 1.5rem;
            }
        }
    }
}

/* ---- Come funziona: quattro passi con connettori ---- */
.cancella-passi {
    margin: 3rem 0 2rem;

    ol {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1.5rem;
        margin: 1.75rem 0 0;
        padding: 0;
        list-style: none;
    }

    li {
        position: relative;
        display: grid;
        justify-items: center;
        text-align: center;

        /* connettore tratteggiato verso il passo successivo */
        &:not(:last-child)::after {
            content: "";
            position: absolute;
            top: 2rem; /* centro del cerchio icona */
            left: calc(50% + 2.6rem);
            right: calc(-50% + 2.6rem);
            border-top: 2px dashed var(--border-strong);
        }

        /* cerchio icona */
        > span {
            display: grid;
            place-items: center;
            width: 4rem;
            height: 4rem;
            border-radius: var(--radius-pill);
            background: #f3ead9;
            color: var(--brown);

            svg {
                width: 1.5rem;
                height: 1.5rem;
            }
        }

        /* pallino numerato */
        > b {
            display: grid;
            place-items: center;
            width: 1.6rem;
            height: 1.6rem;
            margin: 0.75rem 0 0.6rem;
            border-radius: var(--radius-pill);
            background: var(--card);
            border: 1px solid var(--border);
            font-size: 0.85rem;
        }

        p {
            margin: 0;
            color: var(--text-soft);
            font-size: 0.92rem;
            line-height: 1.4;
        }
    }

    @media (max-width: 620px) {
        ol {
            grid-template-columns: repeat(2, 1fr);
            row-gap: 2rem;
        }

        /* i connettori orizzontali non hanno senso su due righe */
        li:not(:last-child)::after {
            display: none;
        }
    }
}

/* ---- azioni finali ---- */
.cancella-azioni {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.1rem;
    margin-top: 2rem;

    .btn-danger {
        min-width: min(22rem, 100%);
        justify-content: center;
    }

    /* divider "oppure": riga - testo - riga */
    .oppure {
        display: flex;
        align-items: center;
        gap: 0.9rem;
        width: min(18rem, 100%);
        margin: 0;
        color: var(--muted);
        font-size: 0.9rem;

        &::before,
        &::after {
            content: "";
            flex: 1;
            border-top: 1px solid var(--border);
        }
    }

    a {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        font-weight: 600;

        svg {
            width: 1.1rem;
            height: 1.1rem;
        }
    }
}

/* ---- stato "email inviata" ---- */
.cancella-inviata {
    padding: 1.75rem 2rem;

    p {
        margin: 0 0 0.6rem;
        line-height: 1.5;
    }
}
/* ============================================================ */
/* Pagine legali (privacy, termini, cookie)                     */
/* Tipografia longform: header con data, indice, sezioni        */
/* numerate, tabelle. Markup minimal-class: tutto contestuale   */
/* sotto .legal.                                                */
/* ============================================================ */

.legal {
    /* larghezza definita (pattern .container): con margin auto su un
       flex item la larghezza sarebbe fit-content, col min-content
       delle tabelle come pavimento, e sfonderebbe i viewport stretti */
    width: min(48rem, 100%);
    margin-inline: auto;
    padding: 3rem 2rem 5rem;

    > header {
        margin-bottom: 3rem;

        h1 {
            margin: 0 0 0.5rem;
        }

        p {
            margin: 0;
            color: var(--muted);
        }

        time {
            font-weight: 600;
        }
    }

    /* ---- indice ---- */
    > nav {
        margin-bottom: 4rem;
        padding: 1.5rem;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);

        h2 {
            margin: 0 0 1rem;
            font-size: 1rem;
        }

        ol {
            margin: 0;
            padding-left: 1.25rem;
        }

        li + li {
            margin-top: 0.45rem;
        }
    }

    /* ---- sezioni numerate ---- */
    section + section {
        margin-top: 4rem;
    }

    section h2 {
        display: flex;
        gap: 0.5rem;
        align-items: baseline;
        margin: 0 0 1.25rem;
        padding-bottom: 0.6rem;
        border-bottom: 1px solid var(--border);

        span {
            color: var(--muted);
            font-size: 1.2rem;
            font-weight: 600;
        }
    }

    section h3 {
        margin: 1.75rem 0 0.75rem;
        font-size: 1.05rem;
    }

    /* ---- corpo ---- */
    p {
        line-height: 1.75;
    }

    ul {
        margin: 1rem 0;
        padding-left: 1.5rem;
    }

    li + li {
        margin-top: 0.6rem;
    }

    /* ---- tabelle ---- */
    table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 1.5rem;
    }

    th {
        text-align: left;
        padding: 0.85rem;
        background: var(--surface-hover);
        border-bottom: 1px solid var(--border);
    }

    td {
        padding: 0.85rem;
        border-bottom: 1px solid var(--border-muted);
        vertical-align: top;
    }

    tbody tr:nth-child(even) {
        background: var(--surface);
    }

    /* ---- piè di documento ---- */
    > footer {
        margin-top: 5rem;
        padding-top: 2rem;
        border-top: 1px solid var(--border);
        color: var(--muted);
        font-size: 0.95rem;
    }
}

@media (max-width: 620px) {
    /* le tabelle scorrono al loro interno invece di allargare la pagina */
    .legal table {
        display: block;
        overflow-x: auto;
    }

    .legal th,
    .legal td {
        padding: 0.6rem;
    }
}

@media print {
    .legal > nav {
        display: none;
    }

    .legal > header,
    .legal > footer,
    .legal section {
        page-break-inside: avoid;
    }
}
/* ============================================================ */
/* Responsive                                                   */
/* ============================================================ */
@media (max-width: 980px) {
    .hero {
        .hero-grid {
            grid-template-columns: 1fr;
        }
        /* Su mobile: prima il testo (con search e CTA), poi l'immagine */
        .hero-copy {
            order: 1;
            max-width: 560px;
            margin-left: auto;
            margin-right: auto;
        }
        /* Carosello decorativo: a una colonna diventerebbe un blocco a tutta
           pagina che spinge giu' i contenuti utili. Su mobile si toglie. */
        .hero-visual {
            display: none;
        }
    }
}

@media (max-width: 640px) {
    .nav-links {
        display: none;
    }
    .hero {
        padding-top: 60px;

        h1 {
            font-size: 3rem;
        }
        .photo-frame {
            width: 100%;
        }
        .card-back {
            width: 92%;
        }
    }
    .section-head h2,
    .listing-head h1 {
        font-size: 2.2rem;
    }

    /* Chip categoria: in colonna, larghezza fissa centrata. */
    .category-chips {
        flex-direction: column;
        align-items: center;

        a {
            width: 80%;
            justify-content: flex-start;
        }
    }

    .search-box {
        flex-wrap: wrap;
        height: auto;
        border-radius: 18px;
        padding: 14px 18px;
        row-gap: 12px;

        /* niente separatore quando i campi sono impilati */
        i {
            display: none;
        }

        /* ogni campo (icona + input) occupa la sua riga */
        .search-campo {
            flex-basis: 100%;
        }

        .search-comune-wrap .autocomplete-results {
            position: relative;
            top: 0;
            left: 0;
        }

        > button {
            flex-basis: 100%;
            width: 100%;
            margin-left: 0;
            border-radius: 14px;
            height: 48px;
        }
    }
}