/* importo i font da Google Fonts — Cinzel per i titoli (sembra antico/classico e EB Garamond per il testo normale */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=EB+Garamond:ital,wght@0,400;0,500;1,400;1,500&display=swap');

/* variabili globali — le metto tutte qui così se voglio cambiare un colore
   lo cambio solo in un posto e si aggiorna ovunque */
:root {
    --sfondo: #111111;
    --sfondo-scuro: #0b0b0b;
    --blu-medio: #1e90ff;
    --blu-scuro: #0a5fa8;
    --azzurro-ghiaccio-chiaro: #b0e0ff;
    --testo: #f5f5f5;
    --testo-grigio: #c9c9c9;
    --rosso: #c0392b;
    --rosso-scuro: #922b21;
    --ambra: #ffb347;
    --ombra: #1e90ff55;
    --ombra-forte: #1e90ffcc;
    --font-titolo: 'Cinzel', serif;
    --font-testo: 'EB Garamond', serif;
    --velocita: 0.35s ease;
    --banner-image: url("../../../../Canti/XXXIII/res/images/sfondo.jpg");
}

/* reset base — rimuove margini e padding predefiniti del browser perché ogni browser li mette diversi e questo crea problemi */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* scorrimento fluido quando clicco sui link interni della pagina */
html { scroll-behavior: smooth; }

/* stile generale del corpo pagina — sfondo scuro con gradiente blu */
body {
    background:
        radial-gradient(ellipse at top, rgba(30, 144, 255, 0.12), transparent 50%),
        radial-gradient(ellipse at bottom, rgba(10, 60, 120, 0.25), transparent 60%),
        linear-gradient(to bottom, #060a12, #0a1525);
    color: var(--testo);
    font-family: var(--font-testo);
    font-size: 20px;
    line-height: 1.8;
    min-height: 100vh;
}

/* tolgo la sottolineatura dai link */
a { text-decoration: none; color: inherit; }


/* INTESTAZIONE */

/* blocco con titolo e sottotitolo del canto */
.titolo-canto {
    text-align: center;
    padding: 90px 20px 55px;
    position: relative; /* serve per posizionare il ::before sopra */
}

/* ::before crea uno strato sovrapposto con l'immagine di sfondo e gradiente scuro così il testo sopra si legge sempre bene */
.titolo-canto::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to bottom, rgba(9, 9, 9, 0.5) 0%, rgba(9, 9, 9, 0.72) 60%, rgba(9, 9, 9, 1) 100%),
        var(--banner-image, none) center 28% / cover no-repeat;
    z-index: 0;
}

/* il contenuto vero del titolo deve stare sopra il ::before */
.titolo-interno { position: relative; z-index: 1; }

/* piccola etichetta in maiuscolo sopra il titolo principale */
.etichetta-cerchio {
    display: inline-block;
    font-family: var(--font-titolo);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ambra);
    opacity: 0.75;
    margin-bottom: 14px;
    text-shadow: 0 1px 5px rgba(255, 255, 255, 0.7), 0 0 18px rgba(0, 110, 255, 0.5);
}

/* titolo h1 principale  */
.titolo-canto h1 {
    font-family: var(--font-titolo);
    font-size: 4rem;
    font-weight: 700;
    color: var(--testo);
    margin-bottom: 14px;
    text-shadow: 0 0 10px var(--ombra), 0 0 28px var(--ombra-forte);
}

/* sottotitolo in corsivo sotto il titolo principale */
.sottotitolo {
    color: var(--ambra);
    font-size: 1.25rem;
    font-style: italic;
}

/* ornamento decorativo con linee e rombo al centro — elemento puramente estetico */
.ornamento {
    display: flex;
    align-items: center;
    gap: 14px;
    justify-content: center;
    margin: 22px auto 0;
}

.linea-ornamento {
    width: 80px;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--ambra));
    opacity: 0.4;
}

.linea-ornamento.sinistra {
    background: linear-gradient(to left, transparent, var(--ambra));
}

.rombo {
    width: 5px;
    height: 5px;
    background: var(--ambra);
    transform: rotate(45deg);
    opacity: 0.55;
}


/* GRIGLIA INFO GENERALI */

/* contenitore della griglia con le info del canto */
.info-generali {
    width: 90%;
    margin: 0 auto 60px;
}

/* griglia a 3 colonne uguali con spazio tra i box */
.griglia-info {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

/* singolo box informativo */
.info-box {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: border-color var(--velocita), background var(--velocita);
}

/* hover: il bordo diventa blu e lo sfondo si illumina leggermente */
.info-box:hover {
    border-color: rgba(30, 144, 255, 0.2);
    background: rgba(30, 144, 255, 0.06);
}

/* etichetta piccola sopra ogni info (es. "CANTO", "CERCHIO"...) */
.info-titolo {
    font-family: var(--font-titolo);
    font-size: 9.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ambra);
    opacity: 0.65;
}

/* testo vero del box info */
.info-testo {
    font-family: var(--font-testo);
    font-size: 16px;
    color: var(--testo);
    line-height: 1.4;
}


/* PULSANTE LINK AL TESTO */

.link-testo {
    width: 90%;
    margin: 0 auto 60px;
    text-align: center;
}

.pulsante-testo {
    display: inline-block;
    font-family: var(--font-titolo);
    font-size: 1rem;
    letter-spacing: 0.1em;
    color: var(--ambra);
    border: 1px solid rgba(255, 179, 71, 0.2);
    border-radius: 10px;
    padding: 15px 38px;
    transition: var(--velocita);
    background: rgba(255, 179, 71, 0.03);
}

/* hover: sfondo più visibile e bordo più marcato */
.pulsante-testo:hover {
    background: rgba(255, 179, 71, 0.1);
    border-color: var(--ambra);
    color: var(--testo);
}


/* SEZIONE RIASSUNTI */

.sezione-riassunti {
    width: 90%;
    margin: 0 auto 70px;
}

/* i due riassunti (italiano e inglese) stanno affiancati */
.contenitore-riassunti {
    display: flex;
    gap: 28px;
}

/* stile base uguale per entrambi i box riassunto */
.riassunto-italiano,
.riassunto-inglese {
    flex: 1;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    padding: 34px;
    transition: var(--velocita);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.35);
}

/* il bordo superiore colorato li differenzia visivamente */
.riassunto-italiano { border-top: 2px solid var(--blu-scuro); }
.riassunto-inglese  { border-top: 2px solid var(--blu-medio); }

.riassunto-italiano:hover,
.riassunto-inglese:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 26px rgba(30, 144, 255, 0.12);
}

/* intestazioni dei box riassunto */
.riassunto-italiano h2,
.riassunto-inglese h2 {
    font-family: var(--font-titolo);
    font-size: 1.4rem;
    margin-bottom: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.riassunto-italiano h2::before { content: '🇮🇹 '; }
.riassunto-inglese h2::before  { content: '🇬🇧 '; }

.riassunto-italiano h2 { color: var(--testo); }
.riassunto-inglese h2  { color: var(--testo); }

.riassunto-italiano p,
.riassunto-inglese p {
    color: var(--testo-grigio);
    font-size: 18px;
}

/* piccola nota sulla zona dell'inferno */
.zona { font-size: 14px; color: #888; margin-bottom: 10px; }
.zona strong { color: var(--testo-grigio); }


/* TITOLI DELLE SEZIONI */

/* titolo grande centrato che introduce ogni sezione della pagina */
.titolo-sezione {
    text-align: center;
    font-family: var(--font-titolo);
    font-size: 2.5rem;
    color: var(--testo);
    margin-bottom: 38px;
    letter-spacing: 0.06em;
}


/* TABELLA PERSONAGGI */

.sezione-personaggi {
    width: 90%;
    margin: 0 auto 70px;
}

/* tabella con bordi e sfondo scuro */
.tabella-personaggi {
    width: 100%;
    border-collapse: collapse;
    background: rgba(255, 255, 255, 0.025);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.35);
}

/* intestazione della tabella */
.tabella-personaggi th {
    background: rgba(30, 144, 255, 0.08);
    color: var(--ambra);
    padding: 16px 22px;
    font-family: var(--font-titolo);
    font-size: 1rem;
    letter-spacing: 0.08em;
    text-align: left;
    border-bottom: 1px solid rgba(30, 144, 255, 0.2);
}

.tabella-personaggi td {
    padding: 20px 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--testo-grigio);
    vertical-align: middle;
    font-size: 17px;
}

/* animazione hover sulle righe */
.tabella-personaggi tbody tr {
    transition: background 0.25s ease;
}

.tabella-personaggi tbody tr:hover {
    background: rgba(30, 144, 255, 0.07);
}

/* cella con il nome del personaggio */
.nome {
    color: var(--testo);
    font-weight: bold;
    font-family: var(--font-titolo);
    font-size: 16px;
    width: 18%;
    border-left: 2px solid transparent;
    transition: border-color 0.3s ease, color 0.3s ease;
}

.tabella-personaggi tbody tr:hover .nome {
    border-left-color: var(--blu-scuro);
    color: var(--ambra);
}

/* immagine del personaggio nella tabella */
.img-personaggio {
    width: 60%;
    height: 60%;
    object-fit: contain;
    object-position: center;
    border-radius: 8px;
    border: 1px solid rgba(30, 144, 255, 0.2);
    display: block;
}

.immagine { width: 18%; }


/* SEZIONE TERZINE */

.sezione-terzine {
    width: 90%;
    margin: 0 auto 70px;
}

/* ogni terzina è un blocco con bordo sinistro blu scuro */
.terzina {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-left: 3px solid var(--blu-scuro);
    border-radius: 0 12px 12px 0;
    padding: 26px 30px;
    margin-bottom: 12px;
    transition: border-color 0.3s ease, background 0.3s ease, transform 0.25s ease;
}

/* hover: scivola leggermente a destra e il bordo diventa ambra */
.terzina:hover {
    border-left-color: var(--ambra);
    background: rgba(30, 144, 255, 0.06);
    transform: translateX(3px);
}

/* riferimento numerico dei versi */
.riferimento {
    display: block;
    font-family: var(--font-titolo);
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--ambra);
    opacity: 0.55;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.versi {
    font-family: var(--font-testo);
    font-style: italic;
    font-size: 18px;
    color: var(--testo);
    line-height: 1.9;
    margin-bottom: 12px;
}

.commento {
    font-family: var(--font-testo);
    font-size: 16px;
    color: var(--testo-grigio);
    line-height: 1.7;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}


/* FIGURA RETORICA */

.sezione-figura {
    width: 90%;
    margin: 0 auto 65px;
}

/* box che evidenzia la figura retorica principale del canto */
.box-figura {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 179, 71, 0.18);
    border-radius: 12px;
    padding: 34px;
    transition: var(--velocita);
}

.box-figura:hover {
    border-color: var(--ambra);
    background: rgba(255, 179, 71, 0.08);
}

/* riga con icona + nome della figura */
.riga-figura {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 14px;
}

/* icona simbolo alla sinistra */
.icona-figura {
    font-size: 22px;
    color: var(--ambra);
    opacity: 0.65;
}

/* piccola etichetta "figura retorica" */
.etichetta-figura {
    display: block;
    font-family: var(--font-titolo);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 4px;
}

.nome-figura {
    font-family: var(--font-titolo);
    font-size: 1.4rem;
    color: var(--ambra);
    font-weight: 600;
}

.citazione-figura {
    font-family: var(--font-testo);
    font-style: italic;
    font-size: 1.3rem;
    color: var(--ambra);
    display: block;
    margin-bottom: 14px;
}

/* descrizione testuale della figura — sotto la citazione */
.descrizione-figura {
    font-family: var(--font-testo);
    font-size: 17px;
    color: var(--testo-grigio);
    line-height: 1.7;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}


/* SEZIONE ANALISI (contrappasso + tema)*/

.sezione-analisi {
    width: 90%;
    margin: 0 auto 90px;
    display: flex;
    gap: 28px;
}

/* stile base uguale per entrambi i box analisi */
.box-contrappasso,
.box-tema {
    flex: 1;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    padding: 34px;
    transition: var(--velocita);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.35);
}

.box-contrappasso { border-left: 3px solid var(--blu-scuro); }
.box-tema         { border-left: 3px solid var(--ambra); }

.box-contrappasso:hover {
    background: rgba(30, 144, 255, 0.1);
    transform: translateY(-4px);
    box-shadow: 0 6px 26px rgba(30, 144, 255, 0.12);
}

.box-tema:hover {
    background: rgba(255, 179, 71, 0.08);
    transform: translateY(-4px);
    box-shadow: 0 6px 26px rgba(255, 179, 71, 0.08);
}

/* intestazione con icona + titolo */
.intestazione-box {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.icona-box { font-size: 20px; opacity: 0.65; }

.box-contrappasso .icona-box { color: var(--blu-scuro); }
.box-tema .icona-box          { color: var(--ambra); }

/* titoli h3 dei box */
.sezione-analisi h3 {
    font-family: var(--font-titolo);
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: 0.06em;
}

.box-contrappasso h3 { color: var(--blu-scuro); }
.box-tema h3         { color: var(--ambra); }

/* testo descrittivo nei box analisi */
.sezione-analisi p {
    color: var(--testo-grigio);
    font-size: 18px;
    line-height: 1.8;
}