/* ============================================================
   SITE — home e pagine del sito pubblico
   Stile ripreso da sign-up/sign-in: blu notte, quadrati decorativi
   trasparenti, titoli serif viola, passaggi numerati.
   Header e footer di base arrivano da venue.css.
   ============================================================ */

.site-body
{
    background: var(--color-white);
}

/* header del sito: dark */
.site-body .venue-header
{
    background: var(--color-dark);
}

/* onda sotto l'header: dentro l'header sticky, quindi resta fissa; si appoggia sulla pagina con un'ombra */
.site-header-wave
{
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    margin-top: -1px; /* niente filo tra header e onda */
    line-height: 0;
    pointer-events: none;
    z-index: 1; /* sotto il sottomenu del menu */
}

.site-header-wave svg
{
    display: block;
    width: 100%;
    height: 28px;
    overflow: visible;
    filter: drop-shadow(0 6px 8px rgba(var(--color-dark-rgb), 0.35));
}

.site-header-wave path
{
    fill: var(--color-dark);
}

@media (min-width: 1024px)
{
    .site-header-wave svg
    {
        height: 40px;
    }
}

/* "Area locali" e "Area host" staccati dalle voci del menu */
.site-nav-link + .venue-header-cta
{
    margin-left: 20px;
}

/* header del sito un filo più alto */
.site-body .venue-header-inner
{
    height: 68px;
}

/* logo e menu un filo più in basso, verso l'onda */
.site-body .venue-logo-link
{
    transform: translateY(5px);
}

.site-body .site-nav
{
    position: relative;
    z-index: 10; /* sopra l'onda dell'header, così il sottomenu non ci finisce sotto */
    transform: translateY(10px);
}

/* "Area host": stesso pulsante di "Area locali" ma bianco, all'hover diventa viola */
.site-header-cta--host
{
    background: var(--color-white);
}

.site-header-cta--host:hover,
.site-header-cta--host:focus-visible
{
    background: var(--color-accent);
}

/* ── Header: menu ── */
.site-nav
{
    display: flex;
    align-items: center;
    gap: 26px;
}

.site-nav-link
{
    display: none;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-white);
    text-decoration: none;
    transition: color 0.2s;
}

.site-nav-link:hover,
.site-nav-link.is-active
{
    color: var(--color-accent);
}

/* ── Header: voce con sottomenu (Servizi) ── */
.site-nav-has-sub
{
    position: relative;
    display: none;
    align-items: center;
}

@media (min-width: 576px)
{
    .site-nav-has-sub
    {
        display: inline-flex;
    }
}

.site-nav-has-sub .site-nav-link
{
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.site-nav-caret
{
    width: 10px;
    height: 6px;
    transition: transform 0.2s;
}

.site-nav-has-sub:hover .site-nav-caret,
.site-nav-has-sub:focus-within .site-nav-caret
{
    transform: rotate(180deg);
}

.site-nav-sub
{
    position: absolute;
    top: 100%;
    left: 50%;
    display: flex;
    flex-direction: column;
    min-width: 170px;
    padding: 8px;
    background: var(--color-white);
    border: 1px solid rgba(var(--color-dark-rgb), 0.08);
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(var(--color-dark-rgb), 0.18);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-50%) translateY(4px);
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 200;
}

/* ponte invisibile per non perdere l'hover tra voce e sottomenu */
.site-nav-sub::before
{
    content: "";
    position: absolute;
    top: -14px;
    left: 0;
    right: 0;
    height: 14px;
}

.site-nav-has-sub:hover .site-nav-sub,
.site-nav-has-sub:focus-within .site-nav-sub
{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(10px);
}

.site-nav-sub-link
{
    padding: 9px 12px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
    white-space: nowrap;
    border-radius: 8px;
    transition: background 0.15s, color 0.15s;
}

.site-nav-sub-link:hover,
.site-nav-sub-link:focus-visible
{
    background: var(--color-accent);
    color: var(--color-primary);
}

/* ── Hero ── */
.home-hero
{
    position: relative;
    overflow: hidden;
    background: var(--color-primary);
    padding: 68px 0 76px;
}

.home-hero--short
{
    padding: 40px 0 48px;
}

/* /locali: viola chiaro, per distinguerla dagli eventi (blu); testi scuri */
.home-hero--light
{
    background: var(--color-support);
}

/* /eventi, /locali e pagine con hero blu: titolo più staccato dall'header, che ci appoggia sopra la sua onda */
.site-body .home-hero--light,
.site-body .home-hero--eventi,
.site-body .home-hero--spaced
{
    padding-top: 72px;
}

@media (min-width: 1024px)
{
    .site-body .home-hero--light,
    .site-body .home-hero--eventi,
    .site-body .home-hero--spaced
    {
        padding-top: 104px;
    }
}

.home-hero--light .home-hero-title
{
    color: var(--color-dark);
}

.home-hero--light .home-hero-sub
{
    color: var(--color-dark);
}

.home-hero-inner
{
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* testo + illustrazione (l'illustrazione compare da tablet in su) */
.home-hero-text
{
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.home-hero-img
{
    display: none;
    width: 100%;
    height: auto;
}

/* due etichette affiancate sopra il titolo (es. CMS + CRM) */
.home-kicker-row
{
    display: inline-flex;
    gap: 8px;
}

.home-kicker
{
    align-self: flex-start;
    padding: 4px 14px;
    /* --color-support su blu notte sembra bianco: viola base schiarito col bianco */
    background: color-mix(in srgb, var(--color-accent) 50%, var(--color-white));
    color: var(--color-dark);
    border-radius: var(--radius);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.home-kicker--white
{
    background: var(--color-white);
}

.home-hero-title
{
    font-size: 2.6rem;
    font-weight: 400;
    line-height: 1.05;
    color: var(--color-accent);
}

.home-hero-title--sm
{
    font-size: 2rem;
}

.home-hero-sub
{
    max-width: 520px;
    margin-bottom: 12px;
    color: var(--color-white);
}

/* hero di /eventi: paragrafo sotto il titolo, prima della ricerca */
.home-hero-sub--search
{
    max-width: 640px;
    margin-top: 12px;
    margin-bottom: 28px;
}

/* ── Separatori curvi tra le sezioni (partials/curve) ── */
.site-curve
{
    /* gli ultimi 2px col colore sotto: se la curva finisce a metà pixel non resta il filo del colore sopra */
    background: linear-gradient(var(--curve-from) calc(100% - 2px), var(--curve-to) 0);
    line-height: 0;
    margin-top: -1px; /* copre il filo di 1px che a volte resta tra la sezione e la curva */
    position: relative;
}

.site-curve svg
{
    display: block;
    width: 100%;
    height: 36px;
}

.site-curve path
{
    fill: var(--curve-to);
}

/* niente filo sotto l'header del sito */
.site-body .venue-header
{
    border-bottom: none;
}

/* ── Hero variante B: pagina divisa (sinistra blu con ricerca verticale, destra bianca con illustrazione) ── */
.home-hero-split
{
    background: var(--color-primary);
}

.home-hero-split-left
{
    padding: 68px 24px 76px;
}

.home-hero-split-content
{
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 520px;
}

.home-hero-split-right
{
    display: none;
}

/* ricerca "verticale": su mobile un campo per riga; da 576px Città e Quando affiancati, Tipo e pulsante a tutta riga */
.site-search.site-search--vertical
{
    grid-template-columns: 1fr;
}

.site-search--vertical .site-search-btn
{
    width: 100%;
}

/* ── Ricerca serate ── */
.site-search
{
    display: grid;
    gap: 14px;
    margin-top: 16px;
    padding: 20px;
    background: var(--color-white);
    box-shadow: 0 12px 32px rgba(var(--color-dark-rgb), 0.3);
}

.site-search-field
{
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.site-search-label
{
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-accent-dark);
}

/* niente bordo sui campi: ombra */
.site-search .input
{
    border: none;
    box-shadow: 0 2px 8px rgba(var(--color-dark-rgb), 0.18);
}

/* pulsante viola con testo dark; al passaggio si riempie di blu */
.site-search-btn
{
    padding: 0 24px;
    white-space: nowrap;
    background-color: var(--color-accent);
    color: var(--color-dark);
    background-image: radial-gradient(closest-side, var(--color-primary) 100%, transparent 100%);
    box-shadow: 0 2px 8px rgba(var(--color-dark-rgb), 0.18);
}

.site-search-btn:hover
{
    color: var(--color-accent);
}

/* ── Sezioni ── */
.site-section
{
    padding: 56px 0;
}

.site-section--soft
{
    background: var(--color-gray-light);
}

.site-section--lilac
{
    background: var(--color-support);
}

/* "Come funziona": viola base, paragrafo dark */
.site-section--violet
{
    background: var(--color-accent);
}

.site-section--violet .site-section-text
{
    color: var(--color-dark);
}

/* sezione che segue un'altra bianca: niente doppio spazio */
.site-section--tight
{
    padding-top: 0;
}

.site-section-head
{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-bottom: 24px;
}

/* parola in viola base dentro un titolo (main.css dà agli span il corpo del testo) */
.site-title-violet
{
    color: var(--color-accent);
    font-size: inherit;
    font-family: inherit;
}

.site-section-title
{
    font-size: 2.2rem;
    font-weight: 400;
    line-height: 1.15;
    color: var(--color-primary);
}

.site-section-title--dark
{
    color: var(--color-dark);
}

/* intro senza link a fianco (es. "Come funziona"): spazio prima del contenuto */
.site-section-intro--solo
{
    margin-bottom: 28px;
}

.site-section-intro
{
    max-width: 640px;
}

.site-section-text
{
    margin-top: 12px;
    color: var(--color-text);
}

.site-section-link
{
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-accent-dark);
    text-decoration: none;
}

.site-section-link:hover
{
    text-decoration: underline;
}

.site-empty
{
    color: var(--color-text);
}

.site-results-count
{
    margin-bottom: 16px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-accent-dark);
}

/* ── Schede serate ── */
.home-events
{
    display: grid;
    gap: 12px;
}

/* schede grandi su fondo bianco (home, /eventi): grigie con contorno viola; l'elenco compatto della home resta bianco */
.home-upcoming .ev-item,
.ev-results .ev-item
{
    background: var(--color-gray-light);
    border-color: var(--color-accent);
}

/* su fondo grigio il pulsante del locale è bianco; all'hover si riempie come gli altri */
.home-upcoming .ev-item .btn-outline,
.ev-results .ev-item .btn-outline
{
    background-color: var(--color-white);
}

/* home: elenco compatto sotto le tre schede grandi */
.ev-list + .home-events
{
    margin-top: 24px;
}

/* schede serate del sito: fondo bianco, contorno viola */
.home-events .eventi-card
{
    background: var(--color-white);
    border-color: var(--color-accent);
    transition: background 0.2s, border-color 0.2s, transform 0.18s;
}

/* al passaggio: fondo blu primario, testi chiari */
.home-events .eventi-card:hover
{
    background: var(--color-primary);
}

.home-events .eventi-card:hover .eventi-card-day,
.home-events .eventi-card:hover .eventi-card-title
{
    color: var(--color-white);
}

.home-events .eventi-card:hover .eventi-card-month,
.home-events .eventi-card:hover .site-card-kind,
.home-events .eventi-card:hover .eventi-card-arrow
{
    color: var(--color-accent);
}

.home-events .eventi-card:hover .eventi-card-venue
{
    color: var(--color-support);
}

.site-card-kind
{
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-accent-dark);
}

/* ── Ricerca eventi: schede grandi raggruppate per mese ── */
.ev-month + .ev-month
{
    margin-top: 48px;
}

.ev-month-title
{
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(var(--color-accent-rgb), 0.5);
    font-size: 1.9rem;
    font-weight: 400;
    color: var(--color-primary);
}

.ev-list
{
    display: grid;
    gap: 24px;
}

.ev-item
{
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--color-white);
    border: 1px solid rgba(var(--color-primary-rgb), 0.08);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.ev-item:hover
{
    border-color: var(--color-accent);
    box-shadow: 0 12px 32px rgba(var(--color-primary-rgb), 0.1);
}

.ev-item-media
{
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--color-primary);
}

.ev-item-img
{
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.ev-item:hover .ev-item-img
{
    transform: scale(1.04);
}

/* data in alto a sinistra sulla foto */
.ev-item-date
{
    position: absolute;
    top: 14px;
    left: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 58px;
    padding: 8px 10px 6px;
    background: var(--color-white);
    color: var(--color-primary);
    box-shadow: 0 4px 14px rgba(var(--color-dark-rgb), 0.2);
}

.ev-item-day
{
    font-size: 1.9rem;
    line-height: 1;
}

.ev-item-month
{
    margin-top: 2px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-accent-dark);
}

/* tipo di evento in alto a destra */
.ev-item-type
{
    position: absolute;
    top: 14px;
    right: 14px;
    padding: 5px 12px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: var(--color-accent);
    color: var(--color-dark);
}

.ev-item-body
{
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 28px 26px 30px;
}

.ev-item-kicker
{
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-accent-dark);
}

.ev-item-venue
{
    margin-top: 6px;
    font-size: 2rem;
    font-weight: 400;
    line-height: 1.1;
}

.ev-item-venue a
{
    font-size: inherit; /* i link hanno un corpo fisso globale */
    color: var(--color-primary);
    text-decoration: none;
}

.ev-item-venue a:hover
{
    color: var(--color-accent-dark);
}

.ev-item-event
{
    margin-top: 6px;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-accent-dark);
}

.ev-item-meta
{
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin: 18px 0 0;
    padding: 16px 0 0;
    list-style: none;
    border-top: 1px solid rgba(var(--color-primary-rgb), 0.08);
    font-size: 0.9rem;
    color: var(--color-primary);
}

.ev-item-meta li
{
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.ev-item-meta svg
{
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--color-accent);
}

.ev-item-actions
{
    display: flex;
    gap: 10px;
    margin-top: auto;
    padding-top: 22px;
}

.ev-item-btn
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 0 12px;
    text-decoration: none;
    white-space: nowrap;
}

/* schede verticali: 2 per riga da 768px, 3 da 1024px */
@media (min-width: 768px)
{
    .ev-list
    {
        grid-template-columns: repeat(2, 1fr);
    }

    .vn-tags
    {
        margin: -18px -16px 0 0;
    }

    .ev-item-body
    {
        padding: 32px 30px 34px;
    }
}

@media (min-width: 1024px)
{
    .ev-list
    {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ── Schede locali (/locali): base ev-item, foto pulita e dati sotto ── */
/* grigio chiaro senza bordo, con ombra netta
   (classe vn-section: .locali-list è già usata dal vecchio venue.css e rende la sezione un flex) */
.vn-section .ev-item
{
    background: var(--color-gray-light);
    border-color: transparent;
    box-shadow: 0 8px 24px rgba(var(--color-primary-rgb), 0.22);
}

.vn-section .ev-item:hover
{
    border-color: transparent;
    box-shadow: 0 16px 36px rgba(var(--color-primary-rgb), 0.3);
}

/* n° eventi (blu) e tipo (viola base): piccoli, a destra, vicini alla foto */
.vn-tags
{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    margin: -12px -10px 0 0;
}

.vn-tag
{
    padding: 4px 9px;
    font-size: 0.64rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: var(--color-accent);
    color: var(--color-primary);
}

.vn-tag--count
{
    background: var(--color-primary);
    color: var(--color-white);
}

.ev-item-venue.vn-name
{
    margin-top: 24px;
    font-size: 2.3rem;
}

/* icona dell'indirizzo più grande e scura */
.ev-item-meta .vn-address-icon
{
    width: 20px;
    height: 20px;
    color: var(--color-dark);
}

/* città e provincia sotto l'indirizzo, allineate al testo dopo l'icona */
.vn-place
{
    margin-top: 6px;
    padding-left: 27px;
    font-size: 0.95rem;
    color: var(--color-dark);
}

/* tre pulsanti: due affiancati col bordo, il prossimo evento pieno a tutta riga */
.vn-actions
{
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding-top: 44px;
}

.vn-actions .ev-item-btn:only-child,
.vn-btn-next
{
    grid-column: 1 / -1;
}

/* "Vedi tutti i locali" sotto le prime 12 schede */
.vn-all
{
    display: flex;
    justify-content: center;
    margin-top: 48px;
}

.vn-all-btn
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto;
    padding: 0 24px;
    font-weight: 600;
    text-decoration: none;
}

.vn-all-btn span
{
    font-size: inherit;
}

.vn-all-btn svg
{
    width: 18px;
    height: 18px;
    transition: transform 0.2s;
}

.vn-all-btn:hover svg
{
    transform: translateX(4px);
}

/* ── Pagina del locale (/locali/{città}/{slug}) ── */
.site-body .vs-top
{
    padding-top: 40px;
}

/* foto grande: larga quanto il contenuto, non quanto lo schermo; ombra morbida sotto */
.vs-hero
{
    position: relative;
    margin: 24px 0 0;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--color-primary);
    box-shadow: 0 24px 48px -12px rgba(var(--color-primary-rgb), 0.35), 0 8px 16px -8px rgba(var(--color-primary-rgb), 0.2);
}

.vs-hero-link
{
    position: absolute;
    inset: 0;
    cursor: zoom-in;
}

.vs-hero-img
{
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* descrizione e dati pratici in un unico riquadro viola chiaro con bordo viola */
.vs-intro
{
    display: grid;
    gap: 24px;
    margin-top: 40px;
    padding: 26px 24px;
    background: var(--color-support);
    border: 1px solid var(--color-accent);
    box-shadow: 0 14px 30px -10px rgba(var(--color-primary-rgb), 0.18);
}

/* titolo a sinistra, ultimo aggiornamento a destra (su mobile sotto il nome) */
.vs-head
{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px 24px;
}

.vs-updated
{
    margin: 0;
    font-size: 0.85rem;
    color: rgba(var(--color-dark-rgb), 0.7);
}

.vs-updated time
{
    font-weight: 700;
    color: var(--color-accent-dark);
}

.vs-name
{
    margin-top: 8px;
    font-size: 2.6rem;
    font-weight: 400;
    line-height: 1.1;
    color: var(--color-primary);
}

/* poche righe: max 760 caratteri (Ting::localeUpdate); le descrizioni più lunghe di prima la view le taglia lì */
.vs-description
{
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--color-dark);
}

/* dati pratici: sotto la descrizione, separati da una linea */
.vs-info
{
    padding-top: 24px;
    border-top: 1px solid rgba(var(--color-accent-rgb), 0.6);
}

.vs-intro--solo .vs-info
{
    padding-top: 0;
    border-top: 0;
}

.vs-info-list
{
    display: grid;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--color-dark);
}

.vs-info-list li
{
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.vs-info-list svg
{
    width: 18px;
    height: 18px;
    margin-top: 2px;
    flex-shrink: 0;
    color: var(--color-accent-dark);
}

.vs-info-list a
{
    font-size: inherit; /* i link hanno un corpo fisso globale */
    color: var(--color-dark);
    word-break: break-word;
}

.vs-info-list a:hover
{
    color: var(--color-accent-dark);
}

.vs-info-list .vs-info-maps
{
    display: inline-block;
    margin-top: 4px;
    font-size: 0.85rem;
    font-weight: 600;
}

.vs-info-btn
{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 22px;
    text-decoration: none;
}

/* schede eventi: ombra più marcata, come le foto della pagina */
.vs-events .ev-item
{
    border-color: transparent;
    box-shadow: 0 14px 30px -10px rgba(var(--color-primary-rgb), 0.3);
}

.vs-events .ev-item:hover
{
    border-color: transparent;
    box-shadow: 0 22px 44px -12px rgba(var(--color-primary-rgb), 0.4);
}

/* galleria: 2 per riga; da 768px la prima grande e le altre attorno */
.vs-gallery
{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.vs-gallery-item
{
    position: relative;
    display: block;
    margin: 0;
    cursor: zoom-in;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--color-gray-light);
    box-shadow: 0 14px 28px -10px rgba(var(--color-primary-rgb), 0.35), 0 4px 10px -4px rgba(var(--color-primary-rgb), 0.18);
    transition: box-shadow 0.3s;
}

.vs-gallery-item:hover
{
    box-shadow: 0 22px 40px -12px rgba(var(--color-primary-rgb), 0.45), 0 6px 14px -6px rgba(var(--color-primary-rgb), 0.22);
}

.vs-gallery-item--big
{
    grid-column: span 2;
    aspect-ratio: 16 / 10;
}

.vs-gallery-item img
{
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.vs-gallery-item:hover img
{
    transform: scale(1.04);
}

@media (min-width: 768px)
{
    .vs-hero
    {
        aspect-ratio: 21 / 9;
    }

    .vs-gallery
    {
        grid-template-columns: repeat(4, 1fr);
        grid-auto-flow: dense;
        gap: 20px;
    }

    .vs-gallery-item--big
    {
        grid-row: span 2;
        aspect-ratio: auto;
    }
}

@media (min-width: 1024px)
{
    .site-body .vs-top
    {
        padding-top: 56px;
    }

    .vs-hero
    {
        margin-top: 32px;
    }

    /* descrizione a sinistra, dati a destra, divisi da una linea verticale */
    .vs-intro
    {
        grid-template-columns: minmax(0, 1fr) 320px;
        gap: 44px;
        margin-top: 56px;
        padding: 40px 44px;
    }

    .vs-info
    {
        padding-top: 0;
        padding-left: 44px;
        border-top: 0;
        border-left: 1px solid rgba(var(--color-accent-rgb), 0.6);
    }

    /* senza descrizione (locali pubblicati prima che diventasse obbligatoria): dati su una riga, larghi quanto la foto */
    .vs-intro--solo
    {
        grid-template-columns: 1fr;
        padding: 26px 32px;
    }

    .vs-intro--solo .vs-info
    {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 32px;
        padding-left: 0;
        border-left: 0;
    }

    .vs-intro--solo .vs-info-list
    {
        flex: 1;
        grid-auto-flow: column;
        grid-auto-columns: max-content;
        gap: 40px;
    }

    .vs-intro--solo .vs-info-btn
    {
        flex-shrink: 0;
        width: auto;
        margin-top: 0;
        padding: 0 28px;
    }

    .vs-name
    {
        font-size: 3.4rem;
    }
}

/* ── Paginazione delle liste pubbliche (partials/pagination) ── */
.site-pager
{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 48px;
}

.site-pager-list
{
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-pager-num,
.site-pager-step
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 8px;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
    border: 1px solid rgba(var(--color-primary-rgb), 0.2);
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.site-pager-step
{
    position: relative;
    gap: 4px;
}

/* su mobile le frecce restano senza testo (letto solo dagli screen reader) */
.site-pager-step span
{
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    font-size: inherit;
}

.site-pager-step svg
{
    width: 16px;
    height: 16px;
}

a.site-pager-num:hover,
.site-pager-step:hover
{
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: var(--color-accent);
}

.site-pager-num.is-current
{
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: var(--color-white);
}

.site-pager-gap
{
    color: var(--color-text);
}

@media (min-width: 576px)
{
    .site-pager-step
    {
        padding: 0 16px;
    }

    .site-pager-step span
    {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
    }
}

/* ── Pagina Prezzi (/prezzi) ── */
/* testo nascosto, letto solo dagli screen reader */
.sr-only
{
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.pr-hero-text
{
    max-width: 640px;
}

/* tre piani: uno sotto l'altro su mobile, affiancati da 1024px; il consigliato è blu */
.pr-plans
{
    display: grid;
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pr-plan
{
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 32px 28px;
    background: var(--color-gray-light);
    border: 1px solid var(--color-accent);
}

.pr-plan--featured
{
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
    box-shadow: 0 16px 40px rgba(var(--color-primary-rgb), 0.3);
}

.pr-plan-badge
{
    position: absolute;
    top: -14px;
    right: 24px;
    padding: 6px 12px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: var(--color-accent);
    color: var(--color-dark);
}

.pr-plan-name
{
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-accent-dark);
}

.pr-plan--featured .pr-plan-name
{
    color: var(--color-accent);
}

.pr-plan-price
{
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 16px;
}

.pr-plan-amount
{
    font-size: 3rem;
    line-height: 1;
    color: var(--color-primary);
}

.pr-plan--featured .pr-plan-amount
{
    color: var(--color-white);
}

.pr-plan-period
{
    font-size: 0.95rem;
    color: var(--color-text);
}

.pr-plan--featured .pr-plan-period,
.pr-plan--featured .pr-plan-for
{
    color: var(--color-support);
}

.pr-plan-for
{
    margin-top: 12px;
    font-size: 0.95rem;
}

.pr-plan-list
{
    display: grid;
    gap: 16px;
    margin: 28px 0 32px;
    padding: 28px 0 0;
    list-style: none;
    border-top: 1px solid rgba(var(--color-primary-rgb), 0.12);
}

.pr-plan--featured .pr-plan-list
{
    border-top-color: rgba(255, 255, 255, 0.15);
}

.pr-plan-list li
{
    display: flex;
    gap: 12px;
    font-size: 0.95rem;
    color: var(--color-dark);
}

.pr-plan-list li > span
{
    font-size: inherit;
}

.pr-plan--featured .pr-plan-list li
{
    color: var(--color-white);
}

/* voce non inclusa: grigia, con la crocetta */
.pr-plan-list li.is-off
{
    opacity: 0.45;
}

.pr-plan-mark
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--color-accent);
    color: var(--color-white);
}

.pr-plan-list li.is-off .pr-plan-mark
{
    background: var(--color-text);
}

.pr-plan-mark svg
{
    width: 13px;
    height: 13px;
}

/* pulsante in fondo alla scheda, a tutta larghezza (allineato tra le schede; vince sul margin di .home-cta-btn) */
.pr-plan .pr-plan-btn
{
    width: 100%;
    margin-top: auto;
}

/* sul blu il riempimento blu sparirebbe: si riempie di bianco */
.pr-plan--featured .home-cta-btn--accent
{
    background-image: radial-gradient(closest-side, var(--color-white) 100%, transparent 100%);
}

.pr-plan--featured .home-cta-btn--accent:hover
{
    color: var(--color-dark);
}

/* extra della vetrina: schede affiancate, ognuna con il prezzo a 15 e a 30 giorni */
.pr-extras
{
    display: grid;
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pr-extra
{
    display: flex;
    flex-direction: column;
    padding: 28px 26px;
    background: var(--color-white);
    border-top: 3px solid var(--color-accent-dark);
    box-shadow: 0 8px 24px rgba(var(--color-dark-rgb), 0.07);
}

.pr-extra-title
{
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-primary);
}

.pr-extra-text
{
    margin-top: 8px;
    font-size: 0.95rem;
}

.pr-extra-prices
{
    display: grid;
    gap: 8px;
    margin: auto 0 0;
    padding-top: 24px;
}

.pr-extra-row
{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--color-gray-light);
}

.pr-extra-row dt
{
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-dark);
}

.pr-extra-row dd
{
    margin: 0;
    font-size: 1.6rem;
    color: var(--color-primary);
}

.pr-note
{
    margin-top: 24px;
    font-size: 0.85rem;
    color: var(--color-text);
}

@media (min-width: 768px)
{
    .pr-extras
    {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1024px)
{
    .pr-plans
    {
        grid-template-columns: repeat(3, 1fr);
        align-items: stretch;
    }

    .pr-plan
    {
        padding: 40px 32px;
    }
}

/* ── Iscrizione veloce dei locali (/locali) ── */
.join-venue-accent
{
    color: var(--color-accent);
    font-weight: 700;
}

/* stesso stile del form contatti (.home-contact-form), ma più largo per le due colonne */
.home-contact-form.join-venue-form
{
    max-width: none;
    margin-top: 28px;
}

.join-venue-grid
{
    display: grid;
    gap: 14px;
}

.join-venue-actions
{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
}

.join-venue-login
{
    font-size: 0.9rem;
}

.join-venue-login .link
{
    color: var(--color-primary);
}

.join-venue-policy
{
    font-size: 0.8rem;
    color: var(--color-gray);
}

.join-venue-img
{
    display: block;
    width: 100%;
    height: auto;
}

/* segnaposto dell'illustrazione: solo da 1024px, accanto al form */
.join-venue-placeholder
{
    display: none;
    align-items: center;
    justify-content: center;
    min-height: 420px;
    padding: 24px;
    border: 1px dashed var(--color-accent);
    font-size: 0.85rem;
    color: var(--color-gray);
    text-align: center;
}

@media (min-width: 576px)
{
    .join-venue-grid
    {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1024px)
{
    .join-venue-placeholder
    {
        display: flex;
    }

    /* illustrazione a sinistra e form a destra (la sezione BellMaker sotto ha l'illustrazione a destra);
       su mobile il form resta per primo */
    .join-venue .home-split
    {
        grid-template-columns: 1fr 1.1fr;
        column-gap: 112px;
    }

    .join-venue-img,
    .join-venue-placeholder
    {
        order: -1;
    }
}

/* ── Pagina Servizi ── */
.sv-hero-sub
{
    max-width: 640px;
}

.sv-hero-actions
{
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.sv-hero-actions .home-cta-btn
{
    margin-top: 8px;
}

/* a capo solo da desktop (es. titoli di sezione) */
.br-desktop
{
    display: none;
}

@media (min-width: 1024px)
{
    .br-desktop
    {
        display: inline;
    }
}

/* pulsante chiaro su fondo blu: bordo e testo lavanda, si riempie al passaggio */
/* secondo pulsante degli hero dark: bianco, all'hover si riempie di viola */
.sv-btn-white
{
    background-color: var(--color-white);
    color: var(--color-dark);
    background-image: radial-gradient(closest-side, var(--color-accent) 100%, transparent 100%);
}

.sv-btn-white:hover
{
    color: var(--color-dark);
}

.sv-grid
{
    display: grid;
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* grigio chiaro con contorno viola base (come le schede su fondo chiaro della home) */
.sv-card
{
    padding: 28px 26px;
    background: var(--color-gray-light);
    border: 1px solid var(--color-accent);
}

/* su sezione grigia i box diventano bianchi, così risaltano (es. pagina CMS) */
.site-section--soft .sv-card
{
    background: var(--color-white);
}

.sv-card-icon
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 18px;
    background: var(--color-primary);
    color: var(--color-accent);
}

.sv-card-icon svg
{
    width: 24px;
    height: 24px;
}

.sv-card-title
{
    margin-bottom: 8px;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-primary);
}

.sv-card-text
{
    font-size: 0.95rem;
}

/* CMS e CRM affiancati */
.sv-duo
{
    display: grid;
    gap: 20px;
}

.sv-duo-card
{
    padding: 32px 28px;
    background: var(--color-white);
    border-top: 3px solid var(--color-accent-dark);
    box-shadow: 0 8px 24px rgba(var(--color-dark-rgb), 0.07);
}

.sv-duo-card--lilac
{
    background: var(--color-support);
}

.sv-duo-kicker
{
    display: inline-block;
    padding: 4px 10px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    background: var(--color-primary);
    color: var(--color-white);
}

.sv-duo-title
{
    margin: 14px 0 18px;
    font-size: 1.7rem;
    font-weight: 400;
    color: var(--color-primary);
}

.sv-list
{
    display: grid;
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sv-list li
{
    display: flex;
    gap: 12px;
    font-size: 0.95rem;
    color: var(--color-dark);
}

.sv-list--large li
{
    font-size: 1.05rem;
}

/* spunta viola */
.sv-list-check
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--color-accent);
    color: var(--color-white);
}

.sv-duo-card--lilac .sv-list-check
{
    background: var(--color-accent-dark);
}

.sv-list-check svg
{
    width: 13px;
    height: 13px;
}

@media (min-width: 768px)
{
    .sv-grid
    {
        grid-template-columns: repeat(2, 1fr);
    }

    .sv-duo
    {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1024px)
{
    .sv-grid
    {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ── Come funziona ── */
.home-steps
{
    display: grid;
    gap: 16px;
}

.home-step
{
    padding: 32px 36px;
    background: var(--color-white);
    border-top: 3px solid var(--color-accent-dark);
    box-shadow: 0 8px 24px rgba(var(--color-dark-rgb), 0.07);
}

.home-step-num
{
    display: inline-block;
    width: 36px;
    height: 36px;
    margin-bottom: 14px;
    line-height: 36px;
    text-align: center;
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: 100px;
    font-weight: 700;
}

.home-step-title
{
    margin-bottom: 6px;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-primary);
}

.home-step-text
{
    font-size: 0.95rem;
}

/* ── Inviti a locali e host ── */
.home-cta-grid
{
    display: grid;
    gap: 16px;
}

.home-cta-kicker
{
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.home-cta-btn
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    margin-top: 20px;
    padding: 0 24px;
    text-decoration: none;
}

/* pulsante viola con testo dark; al passaggio si riempie di blu */
.home-cta-btn--accent
{
    background-color: var(--color-accent);
    color: var(--color-dark);
    background-image: radial-gradient(closest-side, var(--color-primary) 100%, transparent 100%);
}

.home-cta-btn--accent:hover
{
    color: var(--color-accent);
}

/* su fondo scuro il riempimento blu sparirebbe: si riempie di bianco, testo dark */
.site-section--dark .home-cta-btn--accent,
.home-hero:not(.home-hero--light) .home-cta-btn--accent,
.home-bm-card .home-cta-btn--accent
{
    background-image: radial-gradient(closest-side, var(--color-white) 100%, transparent 100%);
}

.site-section--dark .home-cta-btn--accent:hover,
.home-hero:not(.home-hero--light) .home-cta-btn--accent:hover,
.home-bm-card .home-cta-btn--accent:hover
{
    color: var(--color-dark);
}

/* etichetta sopra i titoli di sezione */
.home-section-kicker
{
    display: block;
    text-decoration: underline;
    text-underline-offset: 4px;
    margin-bottom: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-accent-dark);
}

/* ── Province ── */
/* parola evidenziata nei titoli: eredita corpo e font del titolo (main.css dà un corpo fisso a ogni span) */
.site-title-accent
{
    font-size: inherit;
    font-family: inherit;
    color: var(--color-accent-dark);
}

.home-cities
{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.home-city
{
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 20px 22px;
    background: var(--color-white);
    border: 1px solid var(--color-accent-dark);
    text-decoration: none;
    transition: background 0.2s;
}

.home-city-region
{
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-gray);
    transition: color 0.2s;
}

.home-city-name
{
    font-size: 1.5rem;
    color: var(--color-primary);
    transition: color 0.2s;
}

/* numero in grassetto, "serate" regular */
.home-city-count
{
    margin-top: 4px;
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--color-accent);
    transition: color 0.2s;
}

.home-city-count b
{
    font-size: inherit;
    font-weight: 700;
}

.home-city:hover
{
    background: var(--color-primary);
}

.home-city:hover .home-city-region { color: var(--color-support); }
.home-city:hover .home-city-name   { color: var(--color-white); }
.home-city:hover .home-city-count  { color: var(--color-accent); }

/* ── Sezioni a due colonne (locali, contatti) ── */
.home-split
{
    display: grid;
    gap: 40px;
}

.home-benefits
{
    display: grid;
    gap: 18px;
    margin-top: 28px;
}

.home-benefit
{
    display: flex;
    gap: 14px;
}

.home-benefit-check
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    background: var(--color-accent);
    color: var(--color-primary);
    border-radius: 100px;
}

.home-benefit-check svg
{
    width: 14px;
    height: 14px;
}

.home-benefit-title
{
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-dark);
}

.home-benefit-text
{
    font-size: 0.95rem;
}

.home-split-actions
{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
    margin-top: 32px;
}

.home-split-actions .home-cta-btn
{
    margin-top: 0;
}

.home-free
{
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-accent-dark);
}

/* anteprima illustrativa della dashboard */
.home-mock
{
    align-self: center;
    padding: 28px;
    background: var(--color-primary);
    box-shadow: 0 20px 40px rgba(var(--color-dark-rgb), 0.25);
}

.home-mock-bar
{
    display: flex;
    gap: 6px;
    margin-bottom: 20px;
}

.home-mock-bar span
{
    width: 10px;
    height: 10px;
    background: rgba(var(--color-white-rgb), 0.2);
    border-radius: 100px;
}

.home-mock-hello
{
    margin-bottom: 16px;
    font-size: 1.6rem;
    color: var(--color-accent);
}

.home-mock-kpis
{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 12px;
}

.home-mock-kpi
{
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px;
    background: rgba(var(--color-white-rgb), 0.06);
}

.home-mock-num
{
    font-size: 1.5rem;
    line-height: 1;
    color: var(--color-white);
}

.home-mock-label
{
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-support);
}

.home-mock-row
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
    padding: 12px 14px;
    background: rgba(var(--color-white-rgb), 0.06);
}

.home-mock-row span
{
    font-size: 0.85rem;
    color: var(--color-white);
}

.home-mock-section
{
    margin: 18px 0 2px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-accent);
}

.home-mock-host
{
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.home-mock-avatar
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: var(--color-accent);
    color: var(--color-primary);
    border-radius: var(--radius);
    font-size: 0.65rem;
    font-weight: 700;
}

.home-mock-row .home-mock-status
{
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--color-accent);
}

.home-mock-row .home-mock-status--wait
{
    color: var(--color-support);
    font-style: italic;
}

.home-mock-fill
{
    flex-shrink: 0;
    width: 40%;
    height: 6px;
    background: rgba(var(--color-white-rgb), 0.15);
    border-radius: 100px;
    overflow: hidden;
}

.home-mock-fill i
{
    display: block;
    height: 100%;
    background: var(--color-accent);
}

/* ── BellMaker (sezione scura) ── */
.site-section--dark
{
    background: var(--color-primary);
}

.site-section--dark .home-section-kicker { color: var(--color-accent); }
.site-section--dark .site-section-title  { color: var(--color-white); }
.site-section--dark .site-section-text   { color: var(--color-support); }

/* ── CTA finale riutilizzabile (partials/section_cta) ── */
.site-cta-inner
{
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
}

.site-cta-actions
{
    display: flex;
    flex-wrap: wrap;
    gap: 16px 24px;
    align-items: center;
    justify-content: center;
    margin-top: 28px;
}

/* nella CTA pulsante e link stanno sulla stessa riga: niente margine extra sul pulsante */
.site-cta-actions .home-cta-btn
{
    margin-top: 0;
}

.site-cta .site-section-link
{
    color: var(--color-accent);
}

.site-cta-note
{
    display: inline-block; /* così il margin-top vale (uno <span> inline lo ignorerebbe) */
    margin-top: 28px;
    color: var(--color-support);
}

/* ── Testo discorsivo (pagine CMS/BellMaker) ── */
.site-prose
{
    max-width: 760px;
}

.site-prose-text
{
    margin: 0 0 16px;
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--color-text);
}

.site-prose-text:last-child
{
    margin-bottom: 0;
}

.home-bm-card
{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 36px 40px;
    background: var(--color-dark);
    border: 1px solid rgba(var(--color-accent-rgb), 0.35);
}

/* sezione BellMaker: niente riquadro, righe e pulsante in linea col testo */
.home-bm-card--flat
{
    padding: 0;
    background: none;
    border: none;
}

.home-bm-card .home-cta-kicker
{
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* un unico riquadro: due righe (locali / host) separate da una linea, poi il pulsante */
.home-bm-row
{
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(var(--color-accent-rgb), 0.2);
}

.home-bm-row + .home-bm-row
{
    padding-top: 4px;
}

.home-bm-img
{
    display: block;
    width: 100%;
    max-width: 560px;
    height: auto;
    justify-self: center;
}

.home-bm-placeholder
{
    display: none;
    align-items: center;
    justify-content: center;
    min-height: 420px;
    padding: 24px;
    border: 1px dashed rgba(var(--color-accent-rgb), 0.5);
    font-size: 0.85rem;
    color: rgba(var(--color-white-rgb), 0.5);
    text-align: center;
}

.home-bm-title
{
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.2;
    color: var(--color-white);
}

.home-bm-text
{
    color: var(--color-support);
}

/* ── Contatti ── */
.home-contact-list
{
    display: grid;
    gap: 16px;
    margin-top: 28px;
}

.home-contact-label
{
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-accent-dark);
}

.home-contact-value
{
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
}

/* scorciatoie sotto i recapiti */
.home-shortcuts
{
    display: grid;
    gap: 12px;
    margin-top: 32px;
    max-width: 420px;
}

.home-shortcut
{
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 18px 48px 18px 22px;
    background: var(--color-white);
    border: 1px solid var(--color-accent);
    text-decoration: none;
    transition: background 0.2s;
}

.home-shortcut-kicker
{
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-accent-dark);
}

.home-shortcut-title
{
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-primary);
}

.home-shortcut-arrow
{
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2rem;
    color: var(--color-accent);
}

.home-shortcut:hover
{
    background: var(--color-primary);
}

.home-shortcut:hover .home-shortcut-kicker { color: var(--color-accent); }
.home-shortcut:hover .home-shortcut-title  { color: var(--color-white); }

.home-contact-form
{
    width: 100%;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 32px;
    background: var(--color-white);
    box-shadow: 0 12px 32px rgba(var(--color-dark-rgb), 0.08);
}

.home-contact-form .label
{
    margin-bottom: 0;
    font-size: 0.85rem;
}

/* campi su fondo bianco: bordo viola base */
.home-contact-form .input
{
    border: 1px solid var(--color-accent);
    box-shadow: none;
}

.home-contact-textarea
{
    min-height: 130px;
    padding-top: 10px;
    resize: vertical;
}

.home-contact-btn
{
    align-self: flex-start;
    width: auto;
}

/* ── Pagina "Cos'è lo speed dating" ── */
.sd-prose
{
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 640px;
}

.sd-prose p
{
    font-size: 1.05rem;
    line-height: 1.6;
}

.sd-prose b
{
    color: var(--color-primary);
    font-weight: 700;
}

.sd-types
{
    display: grid;
    gap: 12px;
    margin-top: 24px;
}

.sd-type
{
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 18px 22px;
    border: 1px solid var(--color-accent);
}

.sd-type-name
{
    font-size: 1.35rem;
    color: var(--color-accent);
}

.sd-type-text
{
    font-size: 0.95rem;
}

/* riquadro BellMaker su fondo bianco */
.home-bm-card--solo
{
    align-self: center;
    border-color: var(--color-dark);
}

.sd-faq
{
    display: grid;
    gap: 10px;
    max-width: 820px;
}

.sd-faq-item
{
    background: var(--color-white);
    border: 1px solid var(--color-accent);
}

.sd-faq-question
{
    position: relative;
    padding: 18px 56px 18px 22px;
    list-style: none;
    font-weight: 600;
    color: var(--color-primary);
    cursor: pointer;
}

.sd-faq-question::-webkit-details-marker
{
    display: none;
}

/* segno + / − a destra */
.sd-faq-question::after
{
    content: '+';
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.4rem;
    color: var(--color-accent-dark);
}

.sd-faq-item[open] .sd-faq-question::after
{
    content: '−';
}

.sd-faq-answer
{
    padding: 0 22px 20px;
    font-size: 0.95rem;
    color: var(--color-dark);
}

.sd-cta
{
    margin-top: 32px;
}

.home-step-link
{
    display: inline-block;
    margin-top: 24px;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* ── Footer ── */
.site-footer
{
    padding: 40px 0;
    background: var(--color-dark);
}

.site-footer-inner
{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.site-footer-logo
{
    height: 22px;
}

.site-footer-payoff
{
    margin-top: 6px;
    font-size: 0.85rem;
    color: var(--color-accent);
}

.site-footer-links
{
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
}

.site-footer-links a
{
    font-size: 0.875rem;
    color: var(--color-white);
    text-decoration: none;
}

.site-footer-links a:hover
{
    color: var(--color-accent);
}

.site-footer-copy
{
    font-size: 0.8rem;
    color: var(--color-accent);
}

/* ============================================================
   BREAKPOINT
   ============================================================ */

@media (min-width: 576px)
{
    .site-nav-link
    {
        display: inline;
    }

    .site-search.site-search--vertical
    {
        grid-template-columns: 1fr 1fr;
    }

    .site-search--vertical .site-search-field:nth-of-type(3),
    .site-search--vertical .site-search-btn
    {
        grid-column: 1 / -1;
    }
}

@media (min-width: 768px)
{
    .site-curve svg
    {
        height: 50px;
    }

    .home-cities
    {
        grid-template-columns: repeat(3, 1fr);
    }

    .home-hero
    {
        padding: 92px 0 100px;
    }

    .home-hero-img
    {
        display: block;
        max-width: 420px;
        margin: 8px auto 0;
    }

    .home-hero--short
    {
        padding: 48px 0 56px;
    }

    .home-hero-title
    {
        font-size: 3.6rem;
    }

    .home-hero-title--sm
    {
        font-size: 2.6rem;
    }

    .site-section-title
    {
        font-size: 2.5rem;
    }

    .home-hero-sub
    {
        font-size: 1.15rem;
    }

    .site-search
    {
        grid-template-columns: 1fr 1fr 1fr auto;
        align-items: end;
        padding: 24px;
    }

    /* ricerca locali: città e tipo */
    .site-search.site-search--double
    {
        grid-template-columns: 1fr 1fr auto;
        max-width: 820px;
    }

    .home-steps
    {
        grid-template-columns: repeat(3, 1fr);
    }

    .home-steps--4
    {
        grid-template-columns: repeat(2, 1fr);
    }

    .home-cta-grid
    {
        grid-template-columns: 1fr 1fr;
    }

    .site-footer-inner
    {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

@media (min-width: 1024px)
{
    .site-curve svg
    {
        height: 64px;
    }

    .home-cities
    {
        grid-template-columns: repeat(6, 1fr);
    }

    .home-steps--4
    {
        grid-template-columns: repeat(4, 1fr);
    }

    .home-hero
    {
        padding: 120px 0 128px;
    }

    /* variante B: due metà; il contenuto a sinistra si allinea al bordo del sito (wrap 1200px) */
    .home-hero-split
    {
        display: grid;
        grid-template-columns: 1fr 1fr;
        background: linear-gradient(90deg, var(--color-primary) 50%, var(--color-white) 50%);
    }

    .home-hero-split--violet
    {
        background: linear-gradient(90deg, var(--color-primary) 50%, var(--color-accent) 50%);
    }

    .home-hero-split--violet .home-hero-split-right
    {
        background: var(--color-accent);
    }

    .home-hero-split--gray
    {
        background: linear-gradient(90deg, var(--color-primary) 50%, var(--color-gray-light) 50%);
    }

    .home-hero-split--gray .home-hero-split-right
    {
        background: var(--color-gray-light);
    }

    .home-hero-split-left
    {
        display: flex;
        justify-content: flex-end;
        padding: 96px 64px 104px max(24px, calc((100vw - 1200px) / 2 + 24px));
    }

    .home-hero-split-content
    {
        width: 100%;
    }

    .home-hero-split-right
    {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 48px max(24px, calc((100vw - 1200px) / 2 + 24px)) 48px 48px;
        background: var(--color-white);
    }

    .home-hero-split-img
    {
        width: 100%;
        max-width: 560px;
        height: auto;
    }

    /* la curva sotto l'hero diviso: blu a sinistra, bianco a destra */
    .site-curve.site-curve--split
    {
        background: linear-gradient(90deg, var(--color-primary) 50%, var(--color-white) 50%);
    }

    .site-curve.site-curve--split-violet
    {
        background: linear-gradient(90deg, var(--color-primary) 50%, var(--color-accent) 50%);
    }

    .site-curve.site-curve--split-gray
    {
        background: linear-gradient(90deg, var(--color-primary) 50%, var(--color-gray-light) 50%);
    }

    /* desktop: testo a sinistra, illustrazione a destra, ricerca sotto a tutta larghezza */
    .home-hero-top
    {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        gap: 48px;
    }

    /* l'illustrazione parte dal bordo dell'header (margine negativo = padding superiore dell'hero):
       il filo della lampada sembra appeso all'header */
    .home-hero-img
    {
        align-self: start;
        max-width: 560px;
        margin: -120px 0 0 auto;
    }

    /* hero corto (es. /speed-dating): illustrazione più piccola, margine = padding superiore di 56px */
    .home-hero--short .home-hero-img
    {
        max-width: 440px;
        margin-top: -56px;
    }

    /* con più spazio sopra il titolo: l'illustrazione resta sotto l'onda dell'header */
    .home-hero--spaced .home-hero-img
    {
        margin-top: -68px;
    }

    .home-hero--short
    {
        padding: 56px 0 64px;
    }

    .home-hero-title
    {
        font-size: 4.4rem;
    }

    .home-hero-title--sm
    {
        font-size: 3rem;
    }

    .site-section
    {
        padding: 80px 0;
    }

    .site-section-title
    {
        font-size: 2.8rem;
    }

    .home-events
    {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    .home-split
    {
        grid-template-columns: 1.1fr 1fr;
        gap: 64px;
        align-items: center;
    }

    .home-split--contact,
    .home-split--text
    {
        align-items: start;
    }

    .home-bm-placeholder
    {
        display: flex;
    }
}

/* ============================================================
   HOME — vetrina a pagamento (Libraries/HomeShowcase)
   ============================================================ */

.site-body .sr-only
{
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Barra della città ── */
.home-city-bar
{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    margin: 32px 0 16px; /* mobile; cresce su tablet e schermi grandi (multipli di 8) */
    padding: 14px 16px;
    background: var(--color-support);
    border: 1px solid var(--color-accent);
}

@media (min-width: 768px)
{
    .home-city-bar
    {
        margin: 40px 0 24px;
    }
}

@media (min-width: 1024px)
{
    .home-city-bar
    {
        margin: 48px 0 24px;
    }
}

.home-city-current
{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    margin: 0;
    color: var(--color-primary);
}

/* "Eventi a Milano": la regola globale degli span (16px) qui va un filo più grande */
.home-city-current > span:not(.home-city-hint)
{
    font-size: 1.125rem;
}

.home-city-current svg
{
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: var(--color-accent-dark);
}

/* "in base alla tua connessione": a capo, allineato al testo (dopo icona + spazio) */
.home-city-hint
{
    flex-basis: 100%;
    padding-left: 28px;
    font-size: 0.78rem;
    color: var(--color-accent-dark);
}

.home-city-actions
{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.home-city-form
{
    margin: 0;
}

.home-city-form .input
{
    width: auto;
    min-width: 190px;
    border: 0;
}

/* stesso testo e stessa altezza del menu delle città */
.home-city-gps
{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    height: 45px;
    padding: 0 16px;
    font-family: var(--font-sans);
    font-size: calc(var(--size-body) - 0.1rem);
    font-weight: 400;
    line-height: 1;
    color: var(--color-primary);
    background: var(--color-white);
    border: 1px solid var(--color-accent);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.home-city-gps svg
{
    width: 18px;
    height: 18px;
}

/* il testo è in uno span: senza questo prenderebbe i 16px globali degli span, più grande del select */
.home-city-gps span
{
    font-size: inherit;
}

/* come .input e .btn (components.css): 45px, 50px dai 1024px, 55px dai 1720px */
@media (min-width: 1024px)
{
    .home-city-gps
    {
        height: 50px;
    }
}

@media (min-width: 1720px)
{
    .home-city-gps
    {
        height: 55px;
    }

    /* schermi molto grandi: icona e testi della città un po' più grandi */
    .home-city-current > span:not(.home-city-hint)
    {
        font-size: 1.25rem;
    }

    .home-city-current svg
    {
        width: 22px;
        height: 22px;
    }

    .home-city-hint
    {
        padding-left: 30px;
        font-size: 0.85rem;
    }
}

.home-city-gps:hover
{
    background: var(--color-accent);
    color: var(--color-dark);
}

.home-city-gps.is-loading
{
    opacity: 0.6;
    cursor: progress;
}

.home-city-gps.is-loading svg
{
    animation: city-spin 1s linear infinite;
}

@keyframes city-spin
{
    to { transform: rotate(360deg); }
}

/* ── Cartellino "In evidenza" (partials/badge_featured): appeso a un filo, dondola appena ── */
.feat-tag
{
    position: absolute;
    z-index: 3;
    top: 0;
    right: 14px;
    display: block;
    width: 112px;
    line-height: 0;
    pointer-events: none;
    transform-origin: 50% 0;
    animation: feat-swing 3.4s ease-in-out infinite;
    filter: drop-shadow(0 4px 6px rgba(var(--color-dark-rgb), 0.35));
}

.feat-tag svg
{
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.feat-tag-string
{
    stroke: var(--color-white);
    stroke-width: 1.6;
    stroke-linecap: round;
}

.feat-tag-shape
{
    fill: var(--color-white);
}

.feat-tag-star
{
    fill: var(--color-primary);
}

.feat-tag-hole,
.feat-tag-text
{
    fill: var(--color-accent-dark);
}

.feat-tag-star
{
    transform-box: fill-box;
    transform-origin: center;
    animation: feat-twinkle 2.6s ease-in-out infinite;
}

.feat-tag-text
{
    font-family: var(--font-sans);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

@keyframes feat-swing
{
    0%, 100% { transform: rotate(-3deg); }
    50%      { transform: rotate(3deg); }
}

@keyframes feat-twinkle
{
    0%, 100% { transform: scale(1);    opacity: 1; }
    50%      { transform: scale(1.25); opacity: 0.7; }
}

/* scheda grande in evidenza: il cartellino prende l'angolo in alto a destra, il tipo scende in basso */
.ev-item--featured
{
    position: relative;
}

.ev-item--featured .ev-item-type
{
    top: auto;
    bottom: 14px;
}

/* scheda orizzontale in evidenza: su bianco il filo è blu; su mobile il testo scende sotto il cartellino */
.eventi-card--featured
{
    position: relative;
}

.eventi-card--featured .feat-tag
{
    right: 16px;
    width: 92px;
}

.eventi-card--featured .feat-tag-string
{
    stroke: var(--color-primary);
}

.eventi-card--featured .eventi-card-body
{
    padding-top: 24px;
}

.home-featured-note
{
    margin: 16px 0 0;
    font-size: 0.8rem;
    color: var(--color-text);
}

@media (min-width: 768px)
{
    .eventi-card--featured .feat-tag
    {
        right: 52px;
    }

    .eventi-card--featured .eventi-card-body
    {
        padding-top: 0;
        padding-right: 96px;
    }
}

@media (prefers-reduced-motion: reduce)
{
    .feat-tag,
    .feat-tag-star
    {
        animation: none;
    }
}

/* attribuzione DB-IP (licenza CC BY 4.0) sotto il copyright */
.site-footer-credit
{
    display: block;
    margin-top: 4px;
    font-size: 0.7rem;
    opacity: 0.7;
}

.site-footer-credit a
{
    font-size: inherit; /* main.css dà ai link il corpo del testo */
    color: inherit;
    text-decoration: none;
}

.site-footer-credit a:hover
{
    text-decoration: underline;
}