/* 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;
    --rosso:       #b03030;
    --rosso-scuro: #6b1a1a;
    --ambra:       #c8874a;
    --testo: #f5f5f5;
    --testo-grigio: #c9c9c9;
    --ombra:       rgba(176, 48, 48, 0.35);
    --ombra-forte: rgba(176, 48, 48, 0.75);
    --font-titolo: 'Cinzel', serif;
    --font-testo: 'EB Garamond', serif;
    --velocita: 0.35s ease;
    --banner-image: url("../../../../Canti/XIII/res/images/sfondo2.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 rosso sangue */
body {
    background:
        radial-gradient(ellipse at top, rgba(140, 30, 30, 0.18), transparent 50%),
        radial-gradient(ellipse at bottom, rgba(80, 10, 10, 0.35), transparent 60%),
        linear-gradient(to bottom, #0f0606, #1a0a0a);
    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, 4, 4, 0.55) 0%, rgba(9, 4, 4, 0.75) 60%, rgba(9, 4, 4, 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.85;
    margin-bottom: 14px;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9), 0 0 20px rgba(0, 0, 0, 0.7);
    background: rgba(0, 0, 0, 0.35);
    padding: 4px 12px;
    border-radius: 6px;
}

/* 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 12px var(--ombra), 0 0 35px 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.45;
}

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

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


/* 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: 12px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: border-color var(--velocita), background var(--velocita), transform 0.25s ease;
}

/* hover: il bordo diventa rosso e lo sfondo si illumina leggermente */
.info-box:hover {
    border-color: rgba(176, 48, 48, 0.35);
    background: rgba(176, 48, 48, 0.1);
    transform: translateY(-0.5px);
}

/* 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(200, 135, 74, 0.25);
    border-radius: 12px;
    padding: 16px 40px;
    transition: var(--velocita);
    background: rgba(200, 135, 74, 0.04);
}

/* hover: sfondo più visibile e bordo più marcato */
.pulsante-testo:hover {
    background: rgba(200, 135, 74, 0.14);
    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: 36px;
    transition: var(--velocita);
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.4);
}

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

.riassunto-italiano:hover,
.riassunto-inglese:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(176, 48, 48, 0.2);
}

/* 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(--rosso); }
.riassunto-inglese h2  { color: var(--ambra); }

.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.6rem;
    color: var(--rosso);
    margin-bottom: 40px;
    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; /* rimuove doppi bordi tra celle */
    background: rgba(255, 255, 255, 0.025);
    border-radius: 12px;
    overflow: hidden; /* serve per far funzionare il border-radius */
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.4);
}

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

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

/* animazione hover sulle righe */
.tabella-personaggi tbody tr {
    transition: background var(--velocita);
}

.tabella-personaggi tbody tr:hover {
    background: rgba(176, 48, 48, 0.1);
}

/* 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; /* invisibile di default */
    transition: border-color var(--velocita), color var(--velocita);
}

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

/* immagine del personaggio nella tabella — non troppo grande */
.img-personaggio {
    width: 60%;
    height: 60%;
    object-fit: contain;
    object-position: center;
    border-radius: 8px;
    border: 1px solid rgba(176, 48, 48, 0.3);
    display: block;
}

.immagine { width: 18%; }


/* SEZIONE TERZINE */

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

/* ogni terzina è un blocco con bordo sinistro rosso scuro */
.terzina {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-left: 3px solid var(--rosso-scuro);
    border-radius: 0 12px 12px 0;
    padding: 28px 32px;
    margin-bottom: 12px;
    transition: border-color var(--velocita), background var(--velocita), transform 0.25s ease;
}

/* hover: scivola leggermente a destra e il bordo diventa ambra */
.terzina:hover {
    border-left-color: var(--ambra);
    background: rgba(176, 48, 48, 0.1);
    transform: translateX(4px);
}

/* riferimento numerico dei versi */
.riferimento {
    display: block;
    font-family: var(--font-titolo);
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--ambra);
    opacity: 0.6;
    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.07);
}


/* 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(200, 135, 74, 0.2);
    border-radius: 12px;
    padding: 36px;
    transition: var(--velocita);
}

.box-figura:hover {
    border-color: var(--ambra);
    background: rgba(200, 135, 74, 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.7;
}

/* 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.35rem;
    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; /* spazio tra i due box */
}

/* 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: 36px;
    transition: var(--velocita);
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.4);
}

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

.box-contrappasso:hover {
    background: rgba(176, 48, 48, 0.18);
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(176, 48, 48, 0.2);
}

.box-tema:hover {
    background: rgba(200, 135, 74, 0.1);
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(200, 135, 74, 0.12);
}

/* 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.7; }

.box-contrappasso .icona-box { color: var(--rosso); }
.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(--rosso); }
.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;
}