/* =========================================================================
   Stili dei widget della composizione di pagina.

   Stavano dentro _WidgetRenderer.cshtml, in un blocco <style> di seicento
   righe che viaggiava dentro ogni risposta HTML: non si metteva in cache e
   si ripeteva a ogni pagina. Qui e' un foglio come gli altri, richiamato
   una volta dal layout.
   ========================================================================= */
/* ── Widget card styles ── */
    .wcard { border:none; border-radius:.75rem; overflow:hidden; transition:transform .25s, box-shadow .25s; background:#fff; }
    .wcard:hover { transform:translateY(-4px); box-shadow:0 12px 32px rgba(0,0,0,.1); }
    .wcard .wcard-img { overflow:hidden; background:#f0ede8; }
    .wcard .wcard-img img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
    .wcard:hover .wcard-img img { transform:scale(1.05); }

    /* Classic */
    .wcard-classic .wcard-img { aspect-ratio:4/3; }
    .wcard-classic .wcard-body { padding:1rem; }

    /* Overlay */
    .wcard-overlay { position:relative; }
    .wcard-overlay .wcard-img { aspect-ratio:4/3; }
    .wcard-overlay .wcard-body { position:absolute; bottom:0; left:0; right:0; padding:1rem; background:linear-gradient(transparent, rgba(0,0,0,.7)); color:#fff; }
    .wcard-overlay .wcard-body h5, .wcard-overlay .wcard-body p, .wcard-overlay .wcard-body span { color:#fff !important; }

    /* Horizontal */
    .wcard-horizontal { flex-direction:row !important; }
    .wcard-horizontal .wcard-img { width:40%; flex-shrink:0; aspect-ratio:auto; min-height:140px; }
    .wcard-horizontal .wcard-body { padding:1rem; display:flex; flex-direction:column; justify-content:center; }
    @media (max-width:575.98px) { .wcard-horizontal { flex-direction:column !important; } .wcard-horizontal .wcard-img { width:100%; aspect-ratio:16/10; } }

    /* Minimal */
    .wcard-minimal { border:1.5px solid #e5e5e5; background:transparent; box-shadow:none; }
    .wcard-minimal:hover { border-color:var(--primary); box-shadow:none; transform:none; }
    .wcard-minimal .wcard-body { padding:1.25rem; }

    /* Clean — no rounded corners, sharp edges, text below image */
    .wcard-clean { border-radius:0; background:transparent; box-shadow:none; }
    .wcard-clean:hover { transform:none; box-shadow:0 8px 24px rgba(0,0,0,.08); }
    .wcard-clean .wcard-img { aspect-ratio:4/3; border-radius:0; }
    .wcard-clean .wcard-body { padding:.75rem 0 0 0; }
    .wcard-clean .wcard-body h5 { font-size:1rem; }
    .wcard-clean .wcard-body p { font-size:.85rem; }

    /* Titoli dei widget: stessa voce dei titoli di sezione del sito, scuri.
       Le varianti cambiano la scala, non il colore ne' il carattere: il rosso
       resta all'azione e alla navigazione. */
    .wtitle-default, .wtitle-small, .wtitle-large, .wtitle-decorated, .wtitle-display {
        color: var(--ordine-text, #1a1a1a);
        font-weight: 700;
        line-height: 1.25;
        text-transform: none;
        letter-spacing: normal;
    }

    .wtitle-default { font-size: 1.5rem; }
    .wtitle-small { font-size: 1.125rem; }
    .wtitle-large { font-size: 1.875rem; }

    .wtitle-decorated {
        font-size: 1.5rem;
        padding-bottom: .5rem;
        border-bottom: 3px solid var(--ordine-primary, #b21717);
        display: inline-block;
    }

    .wtitle-display { font-size: 2.25rem; }

    /* Card dei widget elenco: stesso linguaggio delle liste del sito,
       filo neutro che si accende, niente ombre ne' sollevamento. */
    .wcard {
        border: 1px solid var(--ordine-neutral-300, #dcdada) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        transition: border-color .15s ease !important;
    }

    .wcard:hover {
        transform: none !important;
        box-shadow: none !important;
        border-color: var(--ordine-primary, #b21717) !important;
    }

    .wcard:hover .wcard-img img { transform: none; }

    .wcard .wcard-body h5, .wcard .wcard-body h5 a,
    .wcard .wcard-body h5 a:hover {
        color: var(--ordine-text, #1a1a1a) !important;
        text-decoration: none;
    }

    /* Indicatori del carosello: dentro il banner, non fuori */
    .widget-banner.carousel .carousel-indicators {
        position: absolute !important;
        display: flex;
        align-items: center;
        height: auto;
        bottom: 1rem;
        left: 0;
        right: 0;
        margin: 0 auto;
        justify-content: center;
        z-index: 5;
    }

        .widget-banner.carousel .carousel-indicators [data-bs-target] {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            border: 2px solid #fff;
            background-color: transparent;
            opacity: 1;
            margin: 0 .25rem;
            text-indent: -999px;
        }

        .widget-banner.carousel .carousel-indicators .active {
            background-color: #fff;
        }

    /* Bootstrap Italia non include il componente carousel di Bootstrap:
       senza queste regole le slide restano tutte impilate e i controlli non
       hanno un riferimento su cui posizionarsi. Sono le regole minime del
       componente, nient'altro. */
    .widget-banner.carousel {
        position: relative;
    }

        .widget-banner.carousel .carousel-inner {
            position: relative;
            width: 100%;
            overflow: hidden;
        }

        .widget-banner.carousel .carousel-item {
            position: relative;
            display: none;
            float: left;
            width: 100%;
            margin-right: -100%;
            backface-visibility: hidden;
            transition: transform .6s ease-in-out;
        }

            .widget-banner.carousel .carousel-item.active {
                display: block;
            }

            @media (prefers-reduced-motion: reduce) {
                .widget-banner.carousel .carousel-item { transition: none; }
            }

        .widget-banner.carousel .carousel-indicators {
            display: flex;
            padding: 0;
            list-style: none;
        }

    /* ── Calendario attivita' ────────────────────────────────────────────
       Una scheda per riga: il blocco data a sinistra fa da ancora visiva,
       come nelle liste appuntamenti di Designers Italia. */
    .calendario-attivita { display: flex; flex-direction: column; gap: .5rem; }

    .calendario-attivita .card-teaser { margin: 0; }

    .calendario-attivita .card-body { padding: .875rem 1rem; }

    .calendario-data {
        flex: 0 0 3.5rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: .375rem .25rem;
        border-radius: 4px;
        background: var(--ordine-primary-light, #f7eaea);
        color: var(--ordine-primary-dark, #8d1212);
        line-height: 1.1;
    }

        .calendario-data .giorno { font-size: 1.25rem; font-weight: 700; }
        .calendario-data .mese { font-size: .6875rem; font-weight: 700; letter-spacing: .04em; }
        .calendario-data .anno { font-size: .625rem; opacity: .75; }

    /* ── Percorsi per profilo ─────────────────────────────────────────────
       Tre colonne, una per chi legge. Ogni voce e' una riga cliccabile a
       tutta larghezza: bersaglio ampio, freccia a destra, nessun elenco
       puntato che somigli a testo. */
    .sezione-percorsi { background: var(--ordine-neutral-100, #f5f4f3); }

    .profilo {
        display: flex;
        flex-direction: column;
        text-align: left;
        background: #fff;
        border: 1px solid var(--ordine-neutral-300, #dcdada);
        border-top: 4px solid var(--ordine-primary, #b21717);
        border-radius: 4px;
    }

    .profilo-testa {
        display: flex;
        align-items: flex-start;
        gap: .75rem;
        padding: 1.25rem 1.25rem 1rem;
    }

    .profilo-icona {
        flex: 0 0 2.5rem;
        height: 2.5rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: var(--ordine-primary-light, #f7eaea);
        color: var(--ordine-primary, #b21717);
    }

    .profilo-titolo {
        margin: 0;
        font-size: .9375rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .02em;
        color: var(--ordine-text, #1a1a1a);
    }

    .profilo-occhiello {
        margin: .25rem 0 0;
        font-size: .8125rem;
        color: #5b5b5b;
    }

    .profilo-voci { list-style: none; margin: 0; padding: 0; }

        .profilo-voci li + li { border-top: 1px solid var(--ordine-neutral-300, #dcdada); }

        .profilo-voci li:first-child { border-top: 1px solid var(--ordine-neutral-300, #dcdada); }

        .profilo-voci a {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: .75rem;
            padding: .875rem 1.25rem;
            color: var(--ordine-text, #1a1a1a);
            text-decoration: none !important;
            font-size: .9375rem;
        }

            .profilo-voci a .icon { flex: 0 0 auto; fill: var(--ordine-primary, #b21717); }

            .profilo-voci a:hover {
                background: var(--ordine-primary-light, #f7eaea);
                color: var(--ordine-primary-dark, #8d1212);
            }

            .profilo-voci a:focus-visible { outline: 2px solid var(--ordine-primary, #b21717); outline-offset: -2px; }

    /* ── Home banner ──────────────────────────────────────────────────────
       Le slide sono manifesti: si mostrano interi su fondo scuro, che da'
       contrasto sia alle immagini chiare sia ai comandi bianchi. */
    /* Il banner tiene dentro le sue sovrapposizioni: frecce, indicatori e
       pannello del testo stanno a z-index alto, e senza un contesto proprio
       finivano sopra il menu a tendina della testata. */
    .widget-banner {
        position: relative;
        z-index: 0;
        isolation: isolate;
    }

    .banner-figura {
        position: relative;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--ordine-banner-fondo, #23201f);
        overflow: hidden;
    }

        .banner-figura img { width: 100%; height: 100%; object-fit: cover; }

    .banner-figura-intera img { object-fit: contain; }

    .banner-velo { position: absolute; inset: 0; }

    .banner-testo { position: absolute; inset: 0; z-index: 3; }

    .banner-pannello { max-width: 40rem; }

    .widget-banner .carousel-item { display: none; }
    .widget-banner .carousel-item.active { display: block; }

    /* Comandi: cerchi scuri sempre visibili, area di tocco da 44px */
    .banner-comando {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 5;
        width: 2.75rem;
        height: 2.75rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 2px solid rgba(255,255,255,.65);
        border-radius: 50%;
        background: rgba(0,0,0,.55);
        padding: 0;
    }

        .banner-comando:hover { background: var(--ordine-primary, #b21717); border-color: #fff; }

        .banner-comando:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

    .banner-precedente { left: 1rem; }
    .banner-successiva { right: 1rem; }

    /* Barra in basso: indicatori e pausa insieme, su fondo scuro leggibile */
    .banner-barra {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 5;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1.25rem;
        padding: .625rem 1rem;
        background: linear-gradient(transparent, rgba(0,0,0,.65));
    }

    .banner-punti { display: flex; gap: .5rem; }

        .banner-punti button {
            width: 2.75rem;
            height: .375rem;
            padding: 0;
            border: 0;
            border-radius: 3px;
            background: rgba(255,255,255,.45);
        }

            .banner-punti button.active { background: #fff; }

            .banner-punti button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

    /* Il comando di pausa stava su un fondo nero trasparente: sopra una
       slide chiara il testo bianco spariva. Fondo pieno e testo piu'
       grande: il contrasto non dipende piu' dall'immagine sotto. */
    .banner-pausa {
        display: inline-flex;
        align-items: center;
        gap: .375rem;
        border: 1px solid rgba(255,255,255,.85);
        border-radius: 4px;
        background: #1a1a1a;
        color: #fff;
        font-size: .8125rem;
        font-weight: 600;
        line-height: 1.3;
        padding: .375rem .75rem;
        box-shadow: 0 1px 4px rgba(0,0,0,.35);
    }

        /* l'etichetta prendeva il colore del testo di pagina: su fondo
           scuro spariva */
        .banner-pausa .etichetta { color: #fff; }

        .banner-pausa:hover { background: var(--ordine-primary-dark, #8d1212); }

        .banner-pausa:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

    @media (max-width: 575.98px) {
        .banner-comando { width: 2.25rem; height: 2.25rem; }
        .banner-punti button { width: 1.75rem; }
        .banner-pausa .etichetta { display: none; }
    }

    /* ── Calendario attivita' ────────────────────────────────────────────
       Una scheda per riga: il blocco data a sinistra fa da ancora visiva,
       come nelle liste appuntamenti di Designers Italia. */
    .calendario-attivita { display: flex; flex-direction: column; gap: .5rem; }

    .calendario-attivita .card-teaser { margin: 0; }

    .calendario-attivita .card-body { padding: .875rem 1rem; }

    .calendario-data {
        flex: 0 0 3.5rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: .375rem .25rem;
        border-radius: 4px;
        background: var(--ordine-primary-light, #f7eaea);
        color: var(--ordine-primary-dark, #8d1212);
        line-height: 1.1;
    }

        .calendario-data .giorno { font-size: 1.25rem; font-weight: 700; }
        .calendario-data .mese { font-size: .6875rem; font-weight: 700; letter-spacing: .04em; }
        .calendario-data .anno { font-size: .625rem; opacity: .75; }

    /* ── Locandine ────────────────────────────────────────────────────────
       Sono manifesti, non fotografie: si mostrano intere su fondo neutro
       invece di essere tagliate a misura della scheda. */
    .locandina {
        position: relative;
        display: block;
        width: 100%;
        padding-top: 75%; /* 4:3 anche quando la locandina manca */
        background: var(--ordine-neutral-100, #f5f4f3);
        border-bottom: 1px solid var(--ordine-neutral-300, #dcdada);
    }

        .locandina-vuota {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--ordine-neutral-300, #dcdada);
        }

        .locandina img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: contain;
            object-position: center;
        }

    /* ── Schede: uniformita' fra i blocchi della home ─────────────────────*/
    .card-wrapper > .card { height: 100%; }

    .card.card-teaser .card-title a,
    .card.card-img .card-title a { color: var(--ordine-text, #1a1a1a); }

        .card.card-teaser .card-title a:hover,
        .card.card-img .card-title a:hover { color: var(--ordine-primary, #b21717); }

    .card .category-top { margin-bottom: .5rem; }

    /* I titoli veri sono lunghissimi: si fermano a tre righe, cosi' le schede
       della stessa fila restano confrontabili. Il titolo intero resta nel
       tooltip e nella pagina di dettaglio. */
    .card .card-title a {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .card .category-top .data { color: var(--ordine-text-soft, #5b5b5b); }

    .teaser-icona {
        flex: 0 0 2.75rem;
        height: 2.75rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: var(--ordine-primary-light, #f7eaea);
        color: var(--ordine-primary, #b21717);
        font-size: 1.125rem;
    }

    .teaser-icona-sm { flex-basis: 2rem; height: 2rem; font-size: .875rem; }

    /* Le tessere possono portare i disegni storici del sito al posto di
       un'icona: niente cerchio colorato, il tratto basta da solo. */
    .teaser-simbolo { flex: 0 0 3.25rem; }

        .teaser-simbolo img { width: 5.25rem; height: 5.25rem; object-fit: contain; }

    /* Il "leggi" di Bootstrap Italia e' ancorato al fondo della scheda: qui
       le schede stanno in griglia, quindi torna nel flusso in coda al testo. */
    .card.card-teaser .read-more,
    .card.card-img .read-more {
        position: static;
        margin-top: .75rem;
        padding: 0;
    }

    /* ── Percorsi per profilo ─────────────────────────────────────────────
       Tre colonne, una per chi legge. Ogni voce e' una riga cliccabile a
       tutta larghezza: bersaglio ampio, freccia a destra, nessun elenco
       puntato che somigli a testo. */
    .sezione-percorsi { background: var(--ordine-neutral-100, #f5f4f3); }

    .profilo {
        display: flex;
        flex-direction: column;
        text-align: left;
        background: #fff;
        border: 1px solid var(--ordine-neutral-300, #dcdada);
        border-top: 4px solid var(--ordine-primary, #b21717);
        border-radius: 4px;
    }

    .profilo-testa {
        display: flex;
        align-items: flex-start;
        gap: .75rem;
        padding: 1.25rem 1.25rem 1rem;
    }

    .profilo-icona {
        flex: 0 0 2.5rem;
        height: 2.5rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: var(--ordine-primary-light, #f7eaea);
        color: var(--ordine-primary, #b21717);
    }

    .profilo-titolo {
        margin: 0;
        font-size: .9375rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .02em;
        color: var(--ordine-text, #1a1a1a);
    }

    .profilo-occhiello {
        margin: .25rem 0 0;
        font-size: .8125rem;
        color: #5b5b5b;
    }

    .profilo-voci { list-style: none; margin: 0; padding: 0; }

        .profilo-voci li + li { border-top: 1px solid var(--ordine-neutral-300, #dcdada); }

        .profilo-voci li:first-child { border-top: 1px solid var(--ordine-neutral-300, #dcdada); }

        .profilo-voci a {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: .75rem;
            padding: .875rem 1.25rem;
            color: var(--ordine-text, #1a1a1a);
            text-decoration: none !important;
            font-size: .9375rem;
        }

            .profilo-voci a .icon { flex: 0 0 auto; fill: var(--ordine-primary, #b21717); }

            .profilo-voci a:hover {
                background: var(--ordine-primary-light, #f7eaea);
                color: var(--ordine-primary-dark, #8d1212);
            }

            .profilo-voci a:focus-visible { outline: 2px solid var(--ordine-primary, #b21717); outline-offset: -2px; }

    /* Frecce del carosello: ai lati, dentro il riquadro. Bootstrap Italia non
       porta il componente, quindi vanno posizionate qui. */
    .widget-banner .carousel-control-prev,
    .widget-banner .carousel-control-next {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 4rem;
        height: auto;
        border: none;
        background: transparent;
        opacity: .9;
        z-index: 5;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    .widget-banner .carousel-control-prev { left: 0; }
    .widget-banner .carousel-control-next { right: 0; }

        .widget-banner .carousel-control-prev:hover,
        .widget-banner .carousel-control-next:hover {
            opacity: 1;
            background: rgba(0, 0, 0, .15);
        }

        .widget-banner .carousel-control-prev:focus-visible,
        .widget-banner .carousel-control-next:focus-visible {
            outline: 2px solid #fff;
            outline-offset: -4px;
        }


/* ── Galleria: miniature e pannello a schermo intero ──────────────────
   Gli stili stavano scritti a mano dentro ogni tag, con il pannello
   ripetuto per ogni galleria della pagina. */
.galleria-miniatura {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: .375rem;
    cursor: pointer;
    transition: opacity .2s ease;
}

    .galleria-miniatura:hover,
    .galleria-miniatura:focus-visible {
        opacity: .8;
    }

.galleria-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .92);
}

    .galleria-lightbox[hidden] {
        display: none;
    }

    .galleria-lightbox button {
        position: absolute;
        z-index: 1;
        border: none;
        background: rgba(255, 255, 255, .15);
        color: #fff;
        cursor: pointer;
        line-height: 1;
    }

.galleria-chiudi {
    top: 1rem;
    right: 1.5rem;
    padding: .4rem .7rem;
    border-radius: 4px;
    font-size: 1.75rem;
}

.galleria-precedente,
.galleria-successiva {
    top: 50%;
    transform: translateY(-50%);
    padding: .5rem .8rem;
    border-radius: 50%;
    font-size: 1.5rem;
}

.galleria-precedente { left: 1rem; }
.galleria-successiva { right: 1rem; }

.galleria-figura {
    margin: 0;
    text-align: center;
}

.galleria-immagine {
    max-width: 90vw;
    max-height: 85vh;
    object-fit: contain;
}

.galleria-didascalia {
    margin-top: .75rem;
    max-width: 80vw;
    color: rgba(255, 255, 255, .85);
    font-size: .9rem;
}

.galleria-contatore {
    position: absolute;
    bottom: 1rem;
    margin: 0;
    color: rgba(255, 255, 255, .5);
    font-size: .75rem;
}