/**
 * culture-turistico.css
 *
 * Stile della scheda turistica di culture.php — ispirata a places.php
 * del progetto precedente (screenshot fornito come riferimento visivo)
 * ma non una sua copia: stessa idea (ribbon verticale col gatto a
 * sinistra, testo centrale, miniature/mappa a destra, sfondi alternati),
 * ricostruita con la palette e le convenzioni di questo progetto.
 */

@import url('https://fonts.googleapis.com/css2?family=Liu+Jian+Mao+Cao&display=swap');

.turistico-scheda {
    display: grid;
    grid-template-columns: 140px 1fr 220px;
    gap: 1.5rem;
    padding: 2.5rem 1.5rem;
    align-items: start;
    scroll-margin-top: 74px; /* altezza navbar (64px) + un margine, cosi' saltando dall'indice la scheda non resta nascosta sotto */
}
.turistico-sfondo-0 { background: #f3dfc0; }
.turistico-sfondo-1 { background: #e0f1fb; }
.turistico-sfondo-2 { background: #dffddf; }
.turistico-sfondo-3 { background: #f5d584; }

/* Angoli arrotondati sulla prima/ultima scheda di ciascun pannello
   "largo" (Turistico, Dinastie) — prima applicati dall'overflow:hidden
   del contenitore esterno, ora tolto per permettere a position:sticky
   di funzionare sull'indice delle dinastie (vedi il commento in
   culture.css su .cultura-contenuto). */
.cultura-pannello-larga > .turistico-scheda:first-child {
    border-radius: 14px 14px 0 0;
}
.cultura-pannello-larga > .turistico-scheda:last-child {
    border-radius: 0 0 14px 14px;
}
/* Le schede con indice verticale (Dinastie, Personaggi) hanno l'indice a sinistra: solo l'angolo
   ESTERNO (destro) va arrotondato, quello adiacente all'indice deve
   restare dritto. */
.indice-schede > .turistico-scheda:first-child {
    border-radius: 0 14px 0 0;
}
.indice-schede > .turistico-scheda:last-child {
    border-radius: 0 0 14px 0;
}
/* --- Indice verticale condiviso (Dinastie, Personaggi): indice_verticale_rendi() --- */
.indice-layout {
    display: grid;
    grid-template-columns: 170px 1fr;
}
.indice-verticale {
    border-radius: 14px 0 0 0;
    position: sticky;
    top: 64px; /* altezza della navbar (.navbar-interno, navbar.css) — l'indice si ferma appena sotto, non sovrapposto */
    align-self: start;
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    background: #fdf8ef;
    border-right: 1px solid var(--c-bordo, #ddd);
    padding: 1rem .6rem;
}
.indice-verticale ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .3rem;
}
.indice-verticale a {
    display: block;
    padding: .45rem .5rem;
    border-radius: 6px;
    text-decoration: none;
    color: var(--c-inchiostro);
    border-left: 3px solid transparent;
    transition: background-color .2s ease, border-color .2s ease;
}
.indice-verticale a .testo-cinese {
    display: block;
    font-size: 1.05rem;
    line-height: 1.2;
}
.indice-sottotitolo {
    display: block;
    font-size: .68rem;
    color: var(--c-pietra, #777);
    margin-top: .1rem;
}
.indice-verticale a:hover {
    background: var(--c-nebbia, #eef4f0);
}
.indice-verticale a.indice-voce-attiva {
    background: var(--c-nebbia, #eef4f0);
    border-left-color: var(--c-giada, #00a874);
}
.indice-verticale a.indice-voce-attiva .testo-cinese {
    color: var(--c-giada-scuro, #007a52);
    font-weight: 700;
}

@media (max-width: 900px) {
    .indice-layout {
        grid-template-columns: 1fr;
    }
    .indice-verticale {
        position: static;
        max-height: none;
        border-right: none;
        border-bottom: 1px solid var(--c-bordo, #ddd);
    }
    .indice-verticale ul {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .indice-verticale a {
        border-left: none;
        border-bottom: 3px solid transparent;
    }
    .indice-verticale a.indice-voce-attiva {
        border-bottom-color: var(--c-giada, #00a874);
    }
}

/* --- Colonna sinistra: etichetta + ribbon + gatto --- */
.turistico-colonna-sx {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
}
.turistico-etichetta-luogo {
    background: #e9e9b5;
    border: 1px solid #999;
    box-shadow: 0 8px 14px rgba(0, 0, 0, .25);
    padding: .5rem .7rem;
    text-align: center;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .05em;
}
.turistico-etichetta-luogo .testo-cinese {
    font-size: 1.1rem;
    display: block;
    margin-top: .15rem;
}

.turistico-ribbon-gruppo {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.turistico-gatto {
    width: 46px;
    height: auto;
    position: relative;
    z-index: 2;
    margin-bottom: -8px;
}
.turistico-ribbon {
    background: linear-gradient(#ea6962 0%, #bb3a34 100%);
    color: #fff;
    width: 64px;
    padding: 1rem .3rem 1.7rem;
    min-height: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
    position: relative;
    box-shadow: 0 6px 12px rgba(0, 0, 0, .3);
    /* Taglio a "V" sul fondo, in stile gonfalone. A differenza della
       tecnica a doppio bordo triangolare usata in precedenza (che
       presupponeva una larghezza fissa di 60px via due bordi da 30px
       ciascuno — disallineata ogni volta che la larghezza reale del
       ribbon non coincideva esattamente, il difetto notato sul bordo
       inferiore destro), clip-path taglia la forma direttamente
       sull'elemento stesso: si allinea sempre perfettamente alla sua
       larghezza reale, quale che sia. */
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), 50% 100%, 0 calc(100% - 18px));
}
.turistico-ribbon-carattere {
    font-family: 'Liu Jian Mao Cao', cursive;
    font-size: 1.8rem;
    line-height: 1.1;
    text-shadow: -1px -1px 0 rgba(0, 0, 0, .4);
}

/* --- Colonna centrale: titolo + testo --- */
.turistico-titolo {
    font-size: 2.6rem;
    text-align: center;
    text-shadow: 4px 4px 2px rgba(150, 150, 150, .7);
    margin-bottom: .3rem;
}
.turistico-pronuncia {
    text-align: center;
    color: var(--c-pietra, #666);
    font-style: italic;
    margin-bottom: 1rem;
}
.turistico-testo {
    text-align: justify;
    line-height: 1.7;
    max-width: 60ch;
    margin: 0 auto;
}

/* --- Colonna destra: miniature + mappa --- */
.turistico-immagini-titolo {
    background: var(--c-giada, #00a874);
    color: #fff;
    text-align: center;
    padding: .4rem;
    font-weight: 700;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.turistico-miniature {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .5rem;
    margin-bottom: 1rem;
}
/* Le dimensioni (quadrate, ritagliate) sono qui — l'effetto di zoom
   al passaggio del mouse arriva "gratis" dalla regola generica
   "figure"/"figure img"/"figure:hover img" già in comuni.css (usata
   anche per le immagini nel testo di una nota): nessun duplicato,
   solo le dimensioni proprie di un contesto a griglia di miniature. */
.turistico-miniatura-figura,
.dinastia-altro-miniatura-figura {
    width: 100%;
    aspect-ratio: 1 / 1;
    border: 1px solid var(--c-bordo, #ccc);
}
.turistico-miniatura-figura img,
.dinastia-altro-miniatura-figura img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.turistico-colonna-dx .mappa-luogo {
    margin-top: .5rem;
}
.turistico-colonna-dx .mappa-luogo iframe {
    width: 100%;
    height: 220px;
    border: 0;
    border-radius: 8px;
}

/* --- Blocco "other" delle dinastie (Tradizionale, immagine/immagini, coordinate, Imperatori...) --- */
.dinastia-altro-titolo {
    background: #e9a64f;
    color: #fff;
    text-align: center;
    padding: .4rem;
    font-weight: 700;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin: .9rem 0 .4rem;
}
.dinastia-altro-titolo:first-child {
    margin-top: 0;
}
.dinastia-altro-riga {
    font-size: .85rem;
    margin-bottom: .3rem;
}
/* Immagine singola (chiave "immagine") — stesso zoom via "figure" di
   comuni.css, ma a piena larghezza invece che ritagliata quadrata
   come le miniature: qui è pensata come un'immagine di
   approfondimento, non un elemento di una griglia. */
.dinastia-altro-immagine-figura {
    width: 100%;
    margin-bottom: .5rem;
}
.dinastia-altro-immagine-figura img {
    width: 100%;
    height: auto;
}
/* Immagini multiple (chiave "immagini", plurale) — stessa griglia di
   miniature quadrate della colonna destra turistica. */
.dinastia-altro-miniature {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .5rem;
    margin-bottom: .5rem;
}
.dinastia-altro-elenco {
    list-style: none;
    padding: 0;
    margin: 0 0 .5rem;
    font-size: .82rem;
}
.dinastia-altro-elenco li {
    padding: .15rem 0;
    border-bottom: 1px dotted var(--c-bordo, #ddd);
}

@media (max-width: 900px) {
    .turistico-scheda {
        grid-template-columns: 1fr;
        justify-items: center;
    }
    .turistico-titolo {
        font-size: 1.9rem;
    }
}

/* Avviso per l'amministratore: campo note.other da sistemare */
.nota-avviso-admin {
    margin: .6rem 0 0;
    padding: .45rem .6rem;
    font-size: .78rem;
    line-height: 1.4;
    color: #6b4f00;
    background: #fff7e0;
    border-left: 3px solid #d9a400;
    border-radius: 4px;
}

/* --- Linea del tempo delle dinastie (dinastie_rendi_timeline) ---
   Tappe a distanza uguale nell'ordine della tabella, con un "sigillo"
   rosso per dinastia su una linea d'inchiostro. Orizzontale, con
   scorrimento laterale; sul telefono diventa verticale. */
.timeline-dinastie {
    /* la larghezza viene dal pannello, non dalle tappe: la linea scorre
       al suo interno invece di allargare la pagina */
    contain: inline-size;
    min-width: 0;
    background: #fdf8ef;
    border: 1px solid var(--c-bordo, #ddd);
    border-radius: 14px;
    margin: 0 0 1.25rem;
    padding: 1rem 0 .5rem;
}
.timeline-testata {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 1.25rem;
}
.timeline-testata-testo {
    flex: 1;
    min-width: 0;
    text-align: center;
}
.timeline-testata h2 {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--c-inchiostro);
    margin: 0 0 .2rem;
}
.timeline-testata p {
    margin: 0;
    font-size: .88rem;
    color: var(--c-pietra);
}
.timeline-verticale {
    writing-mode: vertical-rl;
    font-family: var(--font-cinese-display);
    font-size: 1.25rem;
    letter-spacing: .15em;
    color: var(--c-sigillo);
    border-left: 2px solid var(--c-sigillo);
    padding-left: .35rem;
    line-height: 1;
}
.timeline-verticale:first-child {
    border-left: 0;
    border-right: 2px solid var(--c-sigillo);
    padding-left: 0;
    padding-right: .35rem;
}
.timeline-corpo {
    position: relative;
}
.timeline-freccia {
    position: absolute;
    top: 1.35rem;
    z-index: 2;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    border: 1px solid var(--c-bordo, #ddd);
    background: #fff;
    color: var(--c-inchiostro);
    font-size: 1.4rem;
    line-height: 1;
    box-shadow: 0 4px 12px rgba(16, 36, 29, .12);
    cursor: pointer;
}
.timeline-freccia.indietro { left: .4rem; }
.timeline-freccia.avanti { right: .4rem; }
.timeline-freccia[hidden] { display: none; }
.timeline-freccia:disabled {
    opacity: 0;
    pointer-events: none;
}
/* quando la linea scorre, i bordi sfumano: si capisce che continua */
.timeline-scorre .timeline-binario {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 2.5rem, #000 calc(100% - 2.5rem), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 2.5rem, #000 calc(100% - 2.5rem), transparent 100%);
}
.timeline-binario {
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    padding: 1rem 1.25rem .75rem;
    outline: none;
}
.timeline-tappe {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    display: flex;
    width: max-content;
    min-width: 100%;
}
.timeline-tappa {
    position: relative;
    flex: 1 0 9.5rem;
    max-width: 13rem;
    scroll-snap-align: center;
}
/* la linea: un tratto per tappa, che si unisce a quello della vicina */
.timeline-tappa::before {
    content: "";
    position: absolute;
    top: 1.35rem;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--c-inchiostro);
    opacity: .55;
}
.timeline-tappa:first-child::before { left: 50%; }
.timeline-tappa:last-child::before { right: 50%; }
.timeline-tappa a {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .1rem;
    padding: 0 .4rem .5rem;
    border-radius: 10px;
    text-decoration: none;
    color: var(--c-inchiostro);
}
.timeline-sigillo {
    display: grid;
    place-items: center;
    width: 2.7rem;
    height: 2.7rem;
    margin-bottom: .45rem;
    border-radius: 6px;
    background: var(--c-sigillo);
    color: #fff;
    font-family: var(--font-cinese-display);
    font-size: 1.35rem;
    line-height: 1;
    box-shadow: inset 0 0 0 3px var(--c-sigillo), inset 0 0 0 4.5px rgba(255, 255, 255, .7);
    transition: transform .2s ease, box-shadow .2s ease;
}
.timeline-nome {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.2;
}
.timeline-pinyin {
    font-size: .78rem;
    color: var(--c-giada-scuro, #007a52);
}
.timeline-italiano {
    font-size: .85rem;
    font-weight: 700;
}
.timeline-periodo {
    font-size: .74rem;
    color: var(--c-pietra);
    line-height: 1.3;
}
.timeline-tappa a:hover .timeline-sigillo,
.timeline-tappa a:focus-visible .timeline-sigillo {
    transform: translateY(-3px) rotate(-4deg);
}
.timeline-tappa a:focus-visible {
    outline: 2px solid var(--c-giada);
    outline-offset: 2px;
}
.timeline-tappa a.timeline-voce-attiva {
    background: #fff;
    box-shadow: 0 6px 16px rgba(16, 36, 29, .10);
}
.timeline-tappa a.timeline-voce-attiva .timeline-sigillo {
    box-shadow: inset 0 0 0 3px var(--c-sigillo), inset 0 0 0 4.5px #fff, 0 0 0 4px rgba(194, 59, 50, .22);
}
/* l'ancora non finisce sotto la barra di navigazione fissa */
.indice-schede > .turistico-scheda {
    scroll-margin-top: 72px;
}

/* su schermi stretti la linea del tempo fa da indice: l'indice verticale,
   che lì comparirebbe sopra le schede come secondo elenco, si nasconde */
@media (max-width: 900px) {
    .timeline-dinastie + .indice-layout .indice-verticale {
        display: none;
    }
}
@media (max-width: 700px) {
    .timeline-verticale,
    .timeline-freccia {
        display: none !important;
    }
    .timeline-scorre .timeline-binario {
        -webkit-mask-image: none;
        mask-image: none;
    }
    .timeline-binario {
        overflow-x: visible;
        padding: .75rem 1rem .25rem;
    }
    .timeline-tappe {
        flex-direction: column;
        width: auto;
    }
    .timeline-tappa {
        flex: none;
        max-width: none;
    }
    .timeline-tappa::before {
        top: 0;
        bottom: 0;
        left: calc(.4rem + 1.35rem - 1px);
        right: auto;
        width: 2px;
        height: auto;
    }
    .timeline-tappa:first-child::before { top: 1.35rem; left: calc(.4rem + 1.35rem - 1px); }
    .timeline-tappa:last-child::before { bottom: auto; height: 1.35rem; right: auto; }
    .timeline-tappa a {
        display: grid;
        grid-template-columns: 2.7rem 1fr;
        column-gap: .75rem;
        text-align: left;
        align-items: baseline;
        padding: .35rem .4rem;
    }
    .timeline-sigillo {
        grid-row: 1 / span 4;
        align-self: start;
        margin-bottom: 0;
    }
    .timeline-tappa a > :not(.timeline-sigillo) {
        grid-column: 2;
    }
}
@media (prefers-reduced-motion: reduce) {
    .timeline-sigillo { transition: none; }
    .timeline-tappa a:hover .timeline-sigillo,
    .timeline-tappa a:focus-visible .timeline-sigillo { transform: none; }
}

/* --- Ruote dello zodiaco (zodiaco_rendi_ruote, assets/js/zodiaco.js) --- */
.zodiaco-ruote {
    margin: 0 0 1.25rem;
    border: 1px solid var(--c-bordo, #ddd);
    border-radius: 14px;
    background: #fdf8ef;
}
.zodiaco-ruote > summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem 1rem;
    padding: .85rem 1.1rem;
    cursor: pointer;
    list-style: none;
    font-weight: 700;
}
.zodiaco-ruote > summary::-webkit-details-marker { display: none; }
.zodiaco-ruote > summary::after {
    content: "\25BE";
    margin-left: auto;
    color: var(--c-pietra);
    transition: transform .2s ease;
}
.zodiaco-ruote[open] > summary::after { transform: rotate(180deg); }
.zodiaco-ruote > summary:focus-visible { outline: 2px solid var(--c-giada); outline-offset: 2px; border-radius: 14px; }
.zodiaco-ruote-titolo { color: var(--c-inchiostro); }
.zodiaco-ruote-titolo i { color: var(--c-sigillo); }
.zodiaco-ruote-sintesi { font-weight: 500; color: var(--c-pietra); font-size: .9rem; }
.zodiaco-corpo { padding: 0 1.1rem 1.1rem; }
.zodiaco-data {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .5rem .75rem;
    margin: .25rem 0 1rem;
    font-size: .88rem;
    color: var(--c-pietra);
}
.zodiaco-data input {
    padding: .35rem .55rem;
    border: 1px solid var(--c-bordo, #ccc);
    border-radius: 8px;
    font: inherit;
    color: var(--c-inchiostro);
}
.zodiaco-oggi {
    padding: .35rem .8rem;
    border-radius: 999px;
    border: 1px solid var(--c-giada);
    background: #fff;
    color: var(--c-giada-scuro);
    font-weight: 700;
}
.zodiaco-oggi:hover, .zodiaco-oggi:focus-visible { background: var(--c-giada); color: #fff; }
.zodiaco-coppia {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
}
.zodiaco-ruota {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 0;
}
.zodiaco-ruota h3 {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--c-inchiostro);
    margin: 0 0 .2rem;
}
/* la freccia: un triangolo che indica il segno, e che fa girare la ruota */
.zodiaco-freccia {
    width: 0;
    height: 0;
    padding: 0;
    border: 0;
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    border-top: 20px solid #2f80c8;
    background: none;
    cursor: pointer;
    margin-bottom: .35rem;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .25));
    transition: transform .2s ease;
}
.zodiaco-cinese .zodiaco-freccia { border-top-color: var(--c-sigillo); }
.zodiaco-freccia:hover, .zodiaco-freccia:focus-visible { transform: translateY(3px); }
.zodiaco-freccia:focus-visible { outline: 2px solid var(--c-giada); outline-offset: 4px; }
.zodiaco-cornice {
    width: min(100%, 320px);
    aspect-ratio: 1;
    border-radius: 50%;
    box-shadow: 8px 12px 22px rgba(16, 36, 29, .28);   /* l'ombra non gira con la ruota */
}
.zodiaco-cornice img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 50%;
}
.zodiaco-cornice img.in-rotazione {
    /* curva che oltrepassa il segno e torna indietro: l'effetto elastico */
    transition: transform 2.6s cubic-bezier(.17, .89, .32, 1.18);
}
.zodiaco-segno {
    margin: .9rem 0 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--c-inchiostro);
}
.zodiaco-segno .testo-cinese { font-size: 1.25rem; color: var(--c-sigillo); }
.zodiaco-pinyin { font-weight: 500; color: var(--c-giada-scuro); font-size: .9rem; }
.zodiaco-periodo { display: block; font-size: .8rem; font-weight: 500; color: var(--c-pietra); }
.zodiaco-nota { margin: 1rem auto 0; max-width: 46rem; font-size: .78rem; color: var(--c-pietra); text-align: center; }
@media (max-width: 640px) {
    .zodiaco-coppia { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .zodiaco-cornice img.in-rotazione { transition: none; }
}