/*
 * Aula P2.0 Occupata — impaginazione delle pagine del sito
 *
 * Richiede tokens.css e componenti.css, copiati dal design system
 * (cartella design-system/). Qui ci sono solo le composizioni
 * specifiche delle pagine; i componenti si modificano nel design system.
 */

[hidden] {
    display: none !important;
}

.volantino-etichette,
.categorie-etichette {
    display: flex;
    flex-wrap: wrap;
    align-content: start;
    gap: var(--spazio-2);
}

/* I cinque toni sono i colori già presenti nel design system. */
.categoria-chip--tono-0 {
    background: var(--rosso);
    color: var(--su-scuro);
}

.categoria-chip--tono-1 {
    background: var(--acqua-scura);
    color: var(--su-scuro);
}

.categoria-chip--tono-2 {
    background: var(--inchiostro);
    color: var(--su-scuro);
}

.categoria-chip--tono-3 {
    background: var(--banco);
    color: var(--inchiostro);
}

.categoria-chip--tono-4 {
    background: var(--sedia);
    color: var(--inchiostro);
}

.sezione--acqua .categoria-chip,
.eventi-prossimo .categoria-chip {
    box-shadow: 0 0 0 2px var(--su-scuro);
}

/* ------------------------------------------------------------------ */
/* Locandine degli eventi (facoltative)                               */
/* ------------------------------------------------------------------ */

.locandina {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--raggio-foglio);
}

/* Nel volantino la locandina sta in alto a destra, accanto alla data */
.volantino--locandina {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--spazio-3);
}

.volantino--locandina .categorie-etichette,
.volantino--locandina .volantino-data {
    grid-column: 1;
}

.volantino--locandina .volantino-testo {
    grid-column: 1 / -1;
}

.volantino-locandina {
    grid-column: 2;
    grid-row: 1 / span 2;
    width: 76px;
    border: var(--tratto-tenue);
}

.volantino--passato .volantino-locandina {
    width: 56px;
}

/* Gli attributi width/height dell'immagine servono solo a riservare lo spazio */
.manifesto img {
    height: auto;
}

.cassetto > .link {
    display: inline-block;
    margin-top: var(--spazio-5);
}

/* ------------------------------------------------------------------ */
/* Apertura                                                           */
/* ------------------------------------------------------------------ */

.apertura-corpo {
    padding-block: var(--spazio-7) var(--spazio-sezione);
}

.apertura-testo {
    display: grid;
    gap: var(--spazio-6);
    padding-top: var(--spazio-5);
}

.apertura-azioni {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spazio-4) var(--spazio-6);
}

/* Il manifesto sale sopra il bordo dello striscione */
.apertura-foto {
    position: relative;
    margin-top: clamp(-120px, -9vw, -48px);
}

.apertura-foto .macchia {
    top: -40px;
    right: -90px;
    --misura-macchia: clamp(240px, 32vw, 440px);
}

/* ------------------------------------------------------------------ */
/* Storia                                                             */
/* ------------------------------------------------------------------ */

.storia {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(40px, 7vw, 96px);
    align-items: start;
}

.storia-lato {
    display: grid;
    gap: var(--spazio-7);
}

.storia .pannello {
    color: var(--inchiostro);
}

/* ------------------------------------------------------------------ */
/* Partecipa                                                          */
/* ------------------------------------------------------------------ */

.partecipa {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    gap: clamp(40px, 7vw, 96px);
    align-items: end;
}

.partecipa-azioni {
    display: grid;
    gap: var(--spazio-4);
    justify-items: start;
}

.partecipa-azioni div {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spazio-4);
}

/* ------------------------------------------------------------------ */
/* Pagina degli eventi                                                */
/* ------------------------------------------------------------------ */

.eventi-sezione {
    padding-block: var(--spazio-8) var(--spazio-sezione);
}

.eventi-intestazione {
    margin-bottom: var(--spazio-7);
}

/* Il prossimo evento: la fascia che apre la pagina */
.eventi-prossimo {
    padding-block: var(--spazio-8);
}

.eventi-occhiello {
    margin-bottom: var(--spazio-6);
    color: var(--su-scuro-tenue);
}

.prossimo-scheda {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: clamp(32px, 6vw, 88px);
    align-items: start;
}

.prossimo-data {
    display: grid;
    gap: var(--spazio-3);
    font-family: var(--font-titoli);
    font-size: var(--titolo-s);
    line-height: 1;
}

.prossimo-settimana::first-letter {
    text-transform: uppercase;
}

.prossimo-giorno {
    color: var(--sedia);
    font-size: clamp(6rem, 17vw, 13rem);
    line-height: 0.82;
}

.prossimo-testo {
    display: grid;
    gap: var(--spazio-5);
    justify-items: start;
}

.prossimo-testo .dati-evento {
    width: 100%;
}

/* Più eventi nello stesso giorno: la data in testa, un foglio per evento */
.prossimo-scheda--piu {
    grid-template-columns: 1fr;
    gap: var(--spazio-6);
}

.prossimo-scheda--piu .prossimo-data {
    grid-template-areas:
        "giorno settimana"
        "giorno mese";
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--spazio-2) var(--spazio-5);
}

.prossimo-scheda--piu .prossimo-settimana {
    grid-area: settimana;
    align-self: end;
}

.prossimo-scheda--piu .prossimo-giorno {
    grid-area: giorno;
    font-size: clamp(5rem, 10vw, 8rem);
}

.prossimo-scheda--piu .prossimo-mese {
    grid-area: mese;
}

.prossimo-fogli {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: var(--spazio-5);
    padding: 0;
    list-style: none;
}

/* Quattro eventi: due righe da due, invece di tre più uno */
.prossimo-fogli[data-eventi='4'] {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
}

.prossimo-foglio {
    display: grid;
    grid-template-rows: auto auto auto 1fr;
    align-content: start;
    gap: var(--spazio-4);
    justify-items: start;
    padding: var(--spazio-6) var(--spazio-5) var(--spazio-5);
    border-top: 6px solid var(--sedia);
    border-radius: var(--raggio-foglio);
    background: var(--foglio);
    color: var(--inchiostro);
}

.prossimo-ora {
    color: var(--rosso);
    font-family: var(--font-titoli);
    font-size: var(--titolo-m);
    line-height: 1;
}

.prossimo-foglio p,
.prossimo-dettagli {
    color: var(--inchiostro-tenue);
}

.prossimo-dettagli {
    font-size: var(--testo-s);
    font-weight: 700;
}

.prossimo-foglio .bottone {
    align-self: end;
}

/* Con la locandina: a destra nell'evento singolo, di lato nei fogli */
.prossimo-scheda--locandina {
    grid-template-columns: auto minmax(0, 1fr) clamp(200px, 24vw, 300px);
}

.prossimo-locandina {
    box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.6);
}

.prossimo-foglio--locandina {
    grid-template-columns: minmax(0, 1fr) clamp(96px, 32%, 150px);
    column-gap: var(--spazio-5);
}

.prossimo-foglio--locandina > * {
    grid-column: 1;
}

.prossimo-foglio--locandina > .prossimo-foglio-locandina {
    grid-column: 2;
    grid-row: 1 / span 4;
    border: var(--tratto-tenue);
}

/* Foglio corto, usato in home: una riga con orario, titolo e dove */
.prossimo-fogli .prossimo-foglio--corto {
    display: block;
    padding: 0;
}

.prossimo-riga {
    display: grid;
    grid-template-columns: 4.75rem minmax(0, 1fr) auto;
    gap: var(--spazio-4);
    align-items: center;
    width: 100%;
    min-height: 88px;
    height: 100%;
    padding: var(--spazio-4);
    text-decoration: none;
}

.prossimo-riga .prossimo-ora {
    font-size: var(--titolo-s);
}

.prossimo-riga .prossimo-ora--senza {
    font-size: var(--testo-l);
    line-height: 1.05;
}

.prossimo-riga-testo {
    display: grid;
    gap: var(--spazio-1);
}

.prossimo-riga-testo .titolo-xs {
    line-height: 1.1;
    transition: color var(--durata-breve) var(--curva);
}

.prossimo-riga-locandina {
    width: 48px;
    border: var(--tratto-tenue);
}

.prossimo-freccia {
    font-family: var(--font-titoli);
    font-size: var(--titolo-xs);
    line-height: 1;
    transition: transform var(--durata-breve) var(--curva);
}

.prossimo-riga:hover .titolo-xs {
    color: var(--rosso-testo);
}

.prossimo-riga:hover .prossimo-freccia {
    transform: translateX(4px);
}

/* In home, sotto la fascia, il rimando alla pagina eventi */
.prossimo-tutti {
    display: inline-block;
    margin-top: var(--spazio-6);
}

.prossimo-vuoto {
    display: grid;
    gap: var(--spazio-5);
    justify-items: start;
}

/* Nei volantini più alti della riga il giorno non deve toccare il mese */
.volantino-data {
    gap: var(--spazio-3);
}

/* Calendario: griglia compatta a sinistra, agenda delle date a destra */
.calendario {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    gap: clamp(32px, 6vw, 80px);
    align-items: start;
}

.calendario-intervallo {
    margin-bottom: var(--spazio-4);
    font-family: var(--font-titoli);
    font-size: var(--titolo-xs);
    line-height: 1.1;
}

.calendario-nomi,
.calendario-griglia {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--spazio-1);
}

.calendario-nomi {
    margin-bottom: var(--spazio-2);
    padding-bottom: var(--spazio-2);
    border-bottom: var(--tratto);
    font-size: var(--testo-xs);
    font-weight: 700;
    text-transform: uppercase;
}

.calendario-nomi span {
    padding-inline: var(--spazio-2);
}

.calendario-griglia {
    padding: 0;
    list-style: none;
}

.calendario-giorno {
    min-width: 0;
}

.calendario-casella {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-content: space-between;
    align-items: baseline;
    gap: var(--spazio-1);
    min-height: clamp(52px, 6.4vw, 78px);
    padding: var(--spazio-2);
    width: 100%;
    border: 0;
    border-radius: var(--raggio-s);
    background: var(--muro);
    color: inherit;
    font: inherit;
    text-align: left;
    transition: background var(--durata-breve) var(--curva), color var(--durata-breve) var(--curva);
}

button.calendario-casella {
    cursor: pointer;
}

.calendario-numero {
    font-family: var(--font-titoli);
    font-size: var(--titolo-xs);
    line-height: 1;
}

.calendario-mese {
    overflow: hidden;
    color: var(--inchiostro-tenue);
    font-size: var(--testo-xs);
    font-weight: 700;
    line-height: 1;
    text-align: right;
}

.calendario-segni {
    display: flex;
    grid-column: 1 / -1;
    gap: 3px;
}

.calendario-segni i {
    width: 7px;
    height: 7px;
    background: var(--rosso);
}

.calendario-giorno--passato .calendario-casella {
    background: transparent;
    color: var(--inchiostro-tenue);
}

.calendario-giorno--con-eventi .calendario-casella {
    background: var(--banco);
    color: var(--inchiostro);
}

.calendario-giorno--passato.calendario-giorno--con-eventi .calendario-casella {
    background: var(--muro-ombra);
}

.calendario-giorno--passato .calendario-segni i {
    background: var(--inchiostro-tenue);
}

.calendario-giorno--oggi .calendario-casella {
    box-shadow: inset 0 0 0 3px var(--rosso);
}

.calendario-giorno--oggi .calendario-mese {
    color: var(--rosso-testo);
}

button.calendario-casella:hover,
.calendario-giorno--scelto .calendario-casella {
    background: var(--inchiostro);
    color: var(--su-scuro);
}

button.calendario-casella:hover .calendario-mese,
.calendario-giorno--scelto .calendario-mese {
    color: var(--su-scuro);
}

button.calendario-casella:hover .calendario-segni i,
.calendario-giorno--scelto .calendario-segni i {
    background: var(--sedia);
}

/* Pannello del giorno scelto nel calendario */
.agenda {
    display: grid;
    align-content: start;
    gap: var(--spazio-4);
}

.agenda-data {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spazio-2) var(--spazio-3);
}

.agenda-data time::first-letter {
    text-transform: uppercase;
}

.agenda-oggi {
    padding: 0 var(--spazio-2);
    border-radius: var(--raggio-s);
    background: var(--rosso);
    color: var(--su-scuro);
    font-size: var(--testo-m);
    line-height: 1.5;
}

.agenda-eventi {
    padding: 0;
    border-top: var(--tratto);
    list-style: none;
}

.agenda-eventi a {
    display: grid;
    grid-template-columns: 4rem minmax(0, 1fr) auto;
    gap: var(--spazio-4);
    align-items: center;
    min-height: 64px;
    padding-block: var(--spazio-3);
    border-bottom: var(--tratto-tenue);
    text-decoration: none;
}

.agenda-ora {
    font-family: var(--font-titoli);
    font-size: var(--titolo-xs);
    line-height: 1;
}

.agenda-testo {
    display: grid;
    gap: var(--spazio-1);
}

.agenda-titolo {
    font-weight: 700;
    line-height: 1.3;
}

.agenda-luogo {
    color: var(--inchiostro-tenue);
    font-size: var(--testo-s);
}

.agenda-freccia {
    font-family: var(--font-titoli);
    font-size: var(--titolo-xs);
    line-height: 1;
    transition: transform var(--durata-breve) var(--curva);
}

.agenda-eventi a:hover .agenda-titolo {
    color: var(--rosso-testo);
}

.agenda-eventi a:hover .agenda-freccia {
    transform: translateX(4px);
}

/* Archivio: un anno per blocco, una riga per evento */
.archivio {
    display: grid;
    gap: var(--spazio-8);
}

.archivio-anno {
    display: grid;
    grid-template-columns: clamp(96px, 15vw, 200px) minmax(0, 1fr);
    gap: var(--spazio-4) clamp(24px, 5vw, 64px);
    align-items: start;
}

.archivio-anno-titolo {
    position: sticky;
    top: 108px;
    font-size: var(--titolo-l);
    line-height: 0.95;
}

.archivio-elenco {
    padding: 0;
    border-top: var(--tratto);
    list-style: none;
}

.archivio-riga {
    display: grid;
    grid-template-columns: 4rem minmax(0, 1fr) auto auto;
    gap: var(--spazio-3) var(--spazio-5);
    align-items: center;
    padding-block: var(--spazio-4);
    border-bottom: var(--tratto-tenue);
    text-decoration: none;
}

.archivio-riga--locandina {
    grid-template-columns: 4rem 44px minmax(0, 1fr) auto auto;
}

.archivio-locandina {
    border: var(--tratto-tenue);
}

.archivio-data {
    display: grid;
    gap: var(--spazio-1);
    font-family: var(--font-titoli);
    line-height: 1;
}

.archivio-giorno {
    font-size: var(--titolo-s);
}

.archivio-mese {
    color: var(--inchiostro-tenue);
    font-size: var(--testo-m);
}

.archivio-testo {
    display: grid;
    gap: var(--spazio-1);
}

.archivio-titolo {
    font-size: var(--titolo-xs);
    line-height: 1.1;
    transition: color var(--durata-breve) var(--curva);
}

.archivio-dettagli {
    color: var(--inchiostro-tenue);
    font-size: var(--testo-s);
}

.archivio-riga .categorie-etichette {
    justify-content: end;
}

.archivio-freccia {
    font-family: var(--font-titoli);
    font-size: var(--titolo-xs);
    line-height: 1;
    transition: transform var(--durata-breve) var(--curva);
}

.archivio-riga:hover .archivio-titolo {
    color: var(--rosso-testo);
}

.archivio-riga:hover .archivio-freccia {
    transform: translateX(4px);
}

.eventi-carica {
    margin-top: var(--spazio-7);
}

.eventi-carica:disabled {
    opacity: 0.6;
    cursor: wait;
}

.eventi-stato {
    margin-top: var(--spazio-4);
}

.date-evento {
    display: grid;
    gap: var(--spazio-2);
}

/* ------------------------------------------------------------------ */
/* Pagina di un evento                                                */
/* ------------------------------------------------------------------ */

.evento-testata {
    display: grid;
    gap: var(--spazio-6);
    justify-items: start;
}

.evento-corpo {
    display: grid;
    gap: var(--spazio-6);
    max-width: 760px;
}

/* Con la locandina il testo si affianca al manifesto */
.evento-pagina--locandina {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(240px, 32%, 380px);
    gap: clamp(32px, 6vw, 88px);
    align-items: start;
}

.evento-locandina {
    position: sticky;
    top: 108px;
}

.evento-locandina img {
    aspect-ratio: auto;
}

/* Testo scritto in Markdown nel file dell'evento */
.evento-testo {
    display: grid;
    gap: var(--spazio-4);
}

.evento-testo h2 {
    margin-top: var(--spazio-6);
    font-size: var(--titolo-m);
}

.evento-testo h3 {
    margin-top: var(--spazio-5);
    font-size: var(--titolo-s);
}

.evento-testo ul,
.evento-testo ol {
    display: grid;
    gap: var(--spazio-2);
    padding-left: 1.2em;
}

.evento-testo li::marker {
    color: var(--rosso);
}

.evento-testo a {
    font-weight: 700;
    text-decoration-thickness: 2px;
    text-decoration-color: var(--rosso);
    text-underline-offset: 0.22em;
}

.evento-testo img {
    border-radius: var(--raggio-m);
}

/* Struttura HTML degli eventi importati dall'archivio */
.evento-testo .event-container {
    display: grid;
    gap: var(--spazio-7);
}

.evento-testo .event-header,
.evento-testo .section {
    display: grid;
    gap: var(--spazio-4);
}

.evento-testo .event-title {
    font-size: var(--titolo-m);
}

.evento-testo .event-subtitle {
    font-size: var(--testo-l);
}

.evento-testo .event-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spazio-3);
}

.evento-testo .meta-box,
.evento-testo .speaker,
.evento-testo .cta {
    padding: var(--spazio-4);
    border: var(--tratto);
    border-radius: var(--raggio-s);
}

.evento-testo .cta {
    text-align: center;
}

/* ------------------------------------------------------------------ */
/* Schermi piccoli                                                    */
/* ------------------------------------------------------------------ */

@media (max-width: 860px) {
    .storia,
    .partecipa {
        grid-template-columns: 1fr;
    }

    .apertura-foto {
        margin-top: var(--spazio-5);
    }

    .prossimo-scheda--locandina {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .prossimo-locandina {
        grid-column: 2;
        max-width: 280px;
    }

    .evento-pagina--locandina {
        grid-template-columns: 1fr;
    }

    .evento-locandina {
        position: static;
        max-width: 360px;
        order: -1;
    }

    .calendario {
        grid-template-columns: 1fr;
    }

    .archivio-anno {
        grid-template-columns: 1fr;
    }

    .archivio-anno-titolo {
        position: static;
        font-size: var(--titolo-m);
    }
}

/* Smartphone: è lo schermo più usato. Schede compatte, informazioni essenziali per prime. */
@media (max-width: 620px) {
    .eventi-sezione {
        padding-block: var(--spazio-7) var(--spazio-8);
    }

    .eventi-intestazione {
        gap: var(--spazio-3);
        margin-bottom: var(--spazio-6);
    }

    .eventi-prossimo {
        padding-block: var(--spazio-6) var(--spazio-7);
    }

    .eventi-occhiello {
        margin-bottom: var(--spazio-4);
    }

    .prossimo-scheda {
        grid-template-columns: 1fr;
        gap: var(--spazio-5);
    }

    .prossimo-data {
        grid-template-columns: auto minmax(0, 1fr);
        gap: var(--spazio-3) var(--spazio-4);
        align-items: end;
    }

    .prossimo-settimana {
        grid-column: 1 / -1;
    }

    .prossimo-giorno {
        font-size: 6rem;
    }

    /* Prima cosa, quando e dove; poi la descrizione e il bottone */
    .prossimo-testo {
        gap: var(--spazio-4);
    }

    .prossimo-testo .attacco {
        order: 1;
        font-size: var(--testo-m);
    }

    .prossimo-testo .bottone {
        order: 2;
        width: 100%;
    }

    .prossimo-scheda--locandina {
        grid-template-columns: minmax(0, 1fr) 116px;
        align-items: center;
    }

    .prossimo-scheda--locandina .prossimo-data {
        grid-template-columns: 1fr;
    }

    .prossimo-scheda--locandina .prossimo-testo {
        grid-column: 1 / -1;
    }

    .prossimo-locandina {
        grid-column: 2;
        grid-row: 1;
    }

    .prossimo-foglio {
        padding: var(--spazio-5) var(--spazio-4) var(--spazio-4);
    }

    .prossimo-foglio .bottone {
        width: 100%;
    }

    /* Volantino compatto: la data a sinistra, il resto accanto */
    .bacheca {
        gap: var(--spazio-6);
    }

    .volantino {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-rows: auto auto;
        gap: var(--spazio-2) var(--spazio-4);
        align-items: start;
        min-height: 0;
        padding: var(--spazio-5) var(--spazio-4) var(--spazio-4);
    }

    .volantino-data {
        grid-column: 1;
        grid-row: 1 / span 2;
        width: 4.25rem;
        gap: var(--spazio-2);
    }

    .volantino-giorno {
        font-size: 3.25rem;
    }

    .volantino-mese {
        font-size: var(--testo-m);
        line-height: 1.1;
    }

    .volantino .categorie-etichette,
    .volantino-testo {
        grid-column: 2;
    }

    .volantino-titolo {
        font-size: var(--titolo-xs);
        line-height: 1.1;
    }

    .volantino--locandina {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .volantino--locandina .categorie-etichette,
    .volantino--locandina .volantino-testo {
        grid-column: 2;
    }

    .volantino-locandina,
    .volantino--passato .volantino-locandina {
        grid-column: 3;
        grid-row: 1 / span 2;
        width: 60px;
    }

    .calendario-casella {
        grid-template-columns: 1fr;
        min-height: 52px;
        padding: var(--spazio-1);
    }

    .calendario-numero {
        font-size: var(--testo-l);
    }

    .calendario-mese {
        display: none;
    }

    .calendario-nomi span {
        padding-inline: var(--spazio-1);
    }

    .agenda-eventi a {
        grid-template-columns: 3.4rem minmax(0, 1fr) auto;
        gap: var(--spazio-3);
    }

    .archivio {
        gap: var(--spazio-7);
    }

    .archivio-riga {
        grid-template-columns: 3.2rem minmax(0, 1fr) auto;
        gap: var(--spazio-2) var(--spazio-4);
    }

    .archivio-riga .categorie-etichette {
        grid-column: 2;
        grid-row: 2;
        justify-content: start;
    }

    .archivio-riga--locandina {
        grid-template-columns: 3.2rem 40px minmax(0, 1fr) auto;
    }

    .archivio-riga--locandina .categorie-etichette {
        grid-column: 3;
    }

    .eventi-carica {
        width: 100%;
    }

    .evento-locandina {
        max-width: none;
    }
}