/* ============================================================
   STORYLINE TIMELINE - FRONTEND STYLES
   ============================================================ */

/* Reset & Base */
.storyline-timeline-wrapper {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    font-family: var(--storyline-font-family, 'Helvetica Neue', Arial, sans-serif);
}

.storyline-timeline-wrapper * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Container */
.kentauron-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #0d0d0d;
    color: #fff;
    z-index: 99999;
    overflow: hidden;
}

/* ============================================================
   LOGO
   ============================================================ */
.kentauron-logo {
    position: fixed;
    z-index: 100001;
    pointer-events: auto;
    transition: top 1.8s cubic-bezier(0.77, 0, 0.175, 1),
                left 1.8s cubic-bezier(0.77, 0, 0.175, 1),
                transform 1.8s cubic-bezier(0.77, 0, 0.175, 1);
}

.kentauron-logo.hero-position {
    top: calc(50% - 240px);
    left: 50%;
    transform: translate(-50%, 0);
}

.kentauron-logo.hero-position img {
    width: clamp(120px, 15vw, 200px);
    filter: drop-shadow(0 0 20px rgba(211, 155, 85, 0.3));
}

.kentauron-logo.corner-position {
    top: 30px;
    left: 30px;
    transform: translate(0, 0);
}

.kentauron-logo.corner-position img {
    width: clamp(80px, 8vw, 120px);
    filter: drop-shadow(0 0 15px rgba(211, 155, 85, 0.4));
}

.kentauron-logo a {
    display: block;
    text-decoration: none;
    cursor: pointer;
}

.kentauron-logo img {
    height: auto;
    display: block;
    transition: width 0.8s cubic-bezier(0.77, 0, 0.175, 1),
                filter 0.8s cubic-bezier(0.77, 0, 0.175, 1),
                transform 0.3s ease;
    cursor: pointer;
}

.kentauron-logo a:hover img {
    transform: scale(1.05);
}

/* ============================================================
   HAMBURGER MENU
   ============================================================ */
.kentauron-hamburger-fixed {
    position: fixed;
    top: 30px;
    right: 30px;
    z-index: 100002;
}

.kentauron-menu-wrapper {
    position: relative;
}

.kentauron-hamburger {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    z-index: 100002;
    border-radius: 4px;
    transition: background 0.3s ease;
}

.kentauron-hamburger span {
    display: block;
    width: 25px;
    height: 2px;
    background: #fff;
    transition: all 0.3s ease;
}

.kentauron-hamburger:hover {
    background: #d39b55;
}

.kentauron-hamburger:hover span {
    background: #fff;
}

.kentauron-hamburger.open span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.kentauron-hamburger.open span:nth-child(2) {
    opacity: 0;
}

.kentauron-hamburger.open span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

.kentauron-menu-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 10px;
    background: rgba(0, 0, 0, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 10px 0;
    min-width: 180px;
    max-width: 250px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    list-style: none;
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.kentauron-menu-dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.kentauron-menu-dropdown li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.kentauron-menu-dropdown a {
    display: block;
    padding: 10px 20px;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: all 0.3s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kentauron-menu-dropdown a:hover {
    color: #d39b55;
    background: rgba(211, 155, 85, 0.1);
}

/* ============================================================
   SCROLL ORIZZONTALE
   ============================================================ */
.kentauron-horizontal {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    height: 100vh;
    overflow-x: auto;
    overflow-y: hidden;
    cursor: grab;
    scroll-behavior: auto;
}

.kentauron-horizontal:active {
    cursor: grabbing;
}

.kentauron-horizontal::-webkit-scrollbar {
    display: none;
}
.kentauron-horizontal {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Snap "a calamita" sulla slide più vicina: solo per dispositivi touch
   (dito/schermo tattile). Sul touch lo scroll è gestito nativamente dal
   browser (nessun incremento manuale via JS come per la rotella del
   mouse), quindi qui lo scroll-snap CSS non entra in conflitto con
   nient'altro. Su desktop lo stesso identico effetto è invece gestito
   via JS in frontend.js (vedi commento lì sul perché).
   NOTA: -webkit-overflow-scrolling:touch è stato rimosso dalla regola
   sopra apposta — su iOS Safari è nota per entrare in conflitto con
   scroll-snap-type e impedirgli di funzionare. */
@media (hover: none) and (pointer: coarse) {
    .kentauron-horizontal {
        scroll-snap-type: x mandatory;
    }

    .kentauron-section {
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }
}

/* Opzione "Calamita sì/no": disattiva lo snap touch qui sopra quando
   spenta nelle impostazioni della timeline (lo snap via rotella su
   desktop è già gestito via JS, si autoesclude da solo). */
.storyline-timeline-wrapper.storyline-no-snap .kentauron-horizontal {
    scroll-snap-type: none !important;
}

.storyline-timeline-wrapper.storyline-no-snap .kentauron-section {
    scroll-snap-align: none !important;
    scroll-snap-stop: normal !important;
}

/* ============================================================
   SEZIONI
   ============================================================ */
.kentauron-section {
    min-width: 100vw;
    width: 100vw;
    height: 100vh;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.kentauron-section.hero {
    justify-content: center;
    background: #000;
}

/* ============================================================
   BACKGROUND
   ============================================================ */
.kentauron-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.kentauron-bg video,
.kentauron-bg img,
.kentauron-bg picture {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.kentauron-bg.kentauron-bg-clickable {
    cursor: zoom-in;
}

/* ============================================================
   ANIMAZIONE DI CARICAMENTO INIZIALE
   ============================================================ */
.storyline-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 100020;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    /* Rete di sicurezza puramente CSS: se per qualunque motivo il JS non
       dovesse partire (errore, conflitto, script bloccato), l'overlay
       sparisce comunque da solo dopo pochi secondi invece di restare
       bloccato per sempre a coprire la timeline. */
    animation: storyline-loading-failsafe 0s 6s forwards;
}

.storyline-loading-overlay.storyline-loading-hidden {
    opacity: 0;
    visibility: hidden;
}

.storyline-loading-overlay img {
    width: 100px;
    height: 100px;
    max-width: 30vw;
    max-height: 30vw;
}

@keyframes storyline-loading-failsafe {
    to {
        opacity: 0;
        visibility: hidden;
    }
}

/* ============================================================
   LIGHTBOX IMMAGINE DI SFONDO
   ============================================================ */
.kentauron-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.92);
    z-index: 100010;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    cursor: zoom-out;
}

.kentauron-lightbox.active {
    opacity: 1;
    visibility: visible;
}

.kentauron-lightbox img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.6);
}

.kentauron-bg video {
    display: block;
}

.kentauron-img-clickable {
    cursor: zoom-in;
}

.kentauron-side-images {
    pointer-events: auto;
}

.kentauron-section.hero .kentauron-bg img {
    filter: blur(15px);
    transform: scale(1.05);
}

/* Opzione "immagine hero come cover reale": disattiva la sfocatura e lo
   zoom decorativi, mostrando l'immagine di fallback nitida e a piena
   risoluzione — il titolo/sottotitolo restano comunque in sovraimpressione.
   Indipendente per desktop e mobile (stesso schema delle classi
   storyline-sr-only-*): ciascuna regola vale solo nel proprio breakpoint. */
@media (min-width: 769px) {
    .kentauron-section.hero.hero-sharp-cover-desktop .kentauron-bg img {
        filter: none;
        transform: none;
    }
}

@media (max-width: 768px) {
    .kentauron-section.hero.hero-sharp-cover-mobile .kentauron-bg img {
        filter: none;
        transform: none;
    }
}

.kentauron-bg.map-bg img {
    object-fit: contain;
    background: #1a1a1a;
    filter: sepia(0.3) brightness(0.9);
    image-rendering: auto;
}

/* ============================================================
   OVERLAY
   ============================================================ */
.kentauron-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        rgba(0,0,0,0.85) 0%, 
        rgba(0,0,0,0.5) 40%, 
        rgba(0,0,0,0.2) 70%,
        rgba(0,0,0,0.1) 100%);
    z-index: 1;
    pointer-events: none;
}

.kentauron-section.hero .kentauron-overlay {
    background: radial-gradient(ellipse at center, 
        rgba(0,0,0,0.2) 0%, 
        rgba(0,0,0,0.7) 100%);
}

.kentauron-section.map-section .kentauron-overlay {
    background: linear-gradient(90deg, 
        rgba(0,0,0,0.8) 0%, 
        rgba(0,0,0,0.4) 50%, 
        rgba(0,0,0,0.1) 100%);
}

/* ============================================================
   ACCESSIBILITÀ - TESTO INCORPORATO NELL'IMMAGINE
   ============================================================
   Quando il testo è già disegnato dentro l'immagine di sfondo, il
   markup HTML del testo resta nella pagina (per screen reader e motori
   di ricerca) ma va nascosto visivamente SENZA usare display:none o
   visibility:hidden, che lo rimuoverebbero anche dall'albero di
   accessibilità. Questo è il pattern standard (lo stesso usato dalla
   classe .screen-reader-text del core di WordPress): il contenuto resta
   semanticamente presente e raggiungibile, solo compresso in un'area di
   1px e ritagliato — nessun rischio di essere scambiato per contenuto
   nascosto in modo scorretto (cloaking) dai motori di ricerca.

   L'opzione è indipendente per l'immagine desktop e quella mobile (una
   slide può avere il testo incorporato solo in una delle due), quindi
   ci sono due classi, ciascuna attiva solo nel proprio breakpoint: così
   non serve "annullare" le regole responsive esistenti di
   .kentauron-content quando si passa da un formato all'altro.
*/
.storyline-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

@media (min-width: 769px) {
    .storyline-sr-only-desktop {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }
}

@media (max-width: 768px) {
    .storyline-sr-only-mobile {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }
}

/* Stesso principio per il velo scuro di leggibilità: si disattiva solo
   nel breakpoint corrispondente all'immagine che ha il testo incorporato. */
@media (min-width: 769px) {
    .storyline-overlay-hide-desktop {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .storyline-overlay-hide-mobile {
        display: none !important;
    }
}

/* ============================================================
   CONTENUTO
   ============================================================ */
.kentauron-content {
    position: relative;
    z-index: 2;
    padding-left: 8vw;
    max-width: 800px;
    width: 100%;
}

.kentauron-section.hero .kentauron-content {
    text-align: center;
    padding-left: 0;
    max-width: 800px;
}

.kentauron-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5em;
    margin-bottom: 20px;
    opacity: 0.8;
    font-weight: 300;
    background: rgb(255, 68, 9);
    border-radius: 100px;
    padding: 10px 16px;
    position: absolute;
    top: -50px;
}

.kentauron-subtitle {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 15px;
    opacity: 0.75;
    font-weight: 300;
    display: block;
}

.kentauron-title {
    font-size: clamp(28px, 4.5vw, 60px);
    font-weight: 200;
    letter-spacing: -0.01em;
    margin-bottom: 20px;
    line-height: 1.05;
    color: var(--primary-color, #d39b55);
}

.kentauron-section.hero .kentauron-title {
    font-size: clamp(36px, 7vw, 90px);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 300;
}

.kentauron-text {
    font-size: clamp(17.33px, 1.25vw, 23.33px);
    line-height: 1.8;
    opacity: 1;
    font-weight: 300;
    width: 50%;
}

.kentauron-line {
    width: 50px;
    height: 1px;
    background: rgba(255,255,255,0.3);
    margin: 30px 0;
}

.kentauron-section.hero .kentauron-line {
    margin: 30px auto;
}

.kentauron-section.hero .kentauron-hero-title {
    width: 100%;
    margin: 0 0 40px;
    line-height: 1.15;
    overflow-wrap: break-word;
}

.kentauron-scroll-hint {
    color: rgba(255,255,255,0.5);
    font-weight: 200;
    font-size: 14px;
    margin: 0;
    padding-top: 10px;
    letter-spacing: 0.1em;
    cursor: pointer;
}

.typing-cursor {
    display: inline-block;
    width: 3px;
    height: 1em;
    background: #d39b55;
    margin-left: 4px;
    vertical-align: bottom;
}

/* ============================================================
   BADGE E WATERMARK
   ============================================================ */
.kentauron-doc-badge {
    display: inline-block;
    padding: 4px 14px;
    border: 1px solid rgba(211, 155, 85, 0.4);
    border-radius: 20px;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #d39b55;
    margin-bottom: 15px;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(5px);
}

.kentauron-year-watermark {
    position: absolute;
    bottom: -5%;
    right: 5%;
    font-size: 20vw;
    font-weight: 700;
    color: rgba(255,255,255,0.02);
    z-index: 1;
    pointer-events: none;
    line-height: 0.8;
}

/* ============================================================
   SIDE IMAGES
   ============================================================ */
.kentauron-side-images {
    position: absolute;
    right: 8vw;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 1.5vw;
    z-index: 2;
}

.kentauron-side-image {
    width: 20vw;
    min-width: 200px;
    height: 20vw;
    min-height: 200px;
    object-fit: cover;
    transition: transform 0.8s ease, filter 0.8s ease;
    filter: brightness(0.6);
    cursor: pointer;
    border: 1px solid rgba(255,255,255,0.05);
}

.kentauron-side-image:hover {
    transform: scale(1.08);
    filter: brightness(1);
}

/* ============================================================
   TIMELINE BAR
   ============================================================ */
.kentauron-timeline-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.7) 70%, transparent 100%);
    z-index: 100000;
    display: flex;
    align-items: flex-end;
    padding: 0 5vw 15px;
    border-top: none;
}

.kentauron-timeline-track {
    flex: 1;
    height: 40px;
    position: relative;
    margin: 0 20px;
    cursor: pointer;
}

.kentauron-timeline-track::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: rgba(255,255,255,0.15);
}

.kentauron-timeline-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 1px;
    background: #fff;
    transition: width 0.05s linear;
    z-index: 2;
}

.kentauron-timeline-ticks {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    pointer-events: none;
}

.kentauron-tick {
    width: 1px;
    background: rgba(255,255,255,0.3);
    transition: height 0.15s ease-out, background 0.3s ease, box-shadow 0.3s ease;
    height: 8px;
    position: relative;
}

.kentauron-tick.passed {
    background: rgba(255,255,255,0.7);
    height: 12px;
}

.kentauron-tick.active {
    background: #fff;
    height: 30px;
    box-shadow: 0 0 8px rgba(255,255,255,0.4);
}

.kentauron-tick.near-active {
    height: 18px;
    background: rgba(255,255,255,0.5);
}

.kentauron-timeline-labels {
    display: flex;
    justify-content: space-between;
    position: absolute;
    bottom: 45px;
    left: 0;
    width: 100%;
    pointer-events: none;
}

.kentauron-timeline-label {
    font-size: 10px;
    letter-spacing: 0.2em;
    opacity: 0;
    transition: all 0.4s ease;
    transform: translateX(-50%);
    white-space: nowrap;
    color: #fff;
    font-weight: 300;
}

.kentauron-timeline-label.visible {
    opacity: 0.5;
}

.kentauron-timeline-label.active {
    opacity: 1;
    font-weight: 500;
    font-size: 12px;
}

.kentauron-timeline-label.hover {
    opacity: 1;
    color: rgb(255, 68, 9);
}

/* ============================================================
   FRECCE NAVIGAZIONE
   ============================================================ */
.kentauron-arrow {
    background: none;
    border: none;
    color: rgba(255,255,255,0.3);
    font-size: 18px;
    cursor: pointer;
    transition: color 0.3s ease;
    padding: 10px 5px;
    z-index: 100001;
    margin-bottom: 5px;
}

.kentauron-arrow:hover {
    color: #fff;
}

.kentauron-arrow:disabled {
    opacity: 0.1;
    cursor: default;
    pointer-events: none;
}

/* ============================================================
   DONATION SLIDE
   ============================================================ */
.donation-section {
    justify-content: center;
    text-align: center;
}
.donation-section .kentauron-content {
    text-align: center;
    padding-left: 0;
    max-width: 700px;
}
.donation-section .kentauron-title {
    color: var(--primary-color, #d39b55);
    font-weight: 300;
    letter-spacing: 0.05em;
}
.donation-section .kentauron-text {
    width: 100%;
    margin: 0 auto 30px;
    color: rgba(255,255,255,0.8);
}
.donation-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}
.btn-donate {
    display: inline-block;
    padding: 16px 40px;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 16px;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    background: #d39b55;
    color: #0d0d0d;
    box-shadow: 0 4px 15px rgba(211, 155, 85, 0.3);
}
.btn-donate:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(211, 155, 85, 0.5);
    background: #e0b06e;
}
.btn-donate.paypal {
    background: #ffc439;
    color: #0d0d0d;
    box-shadow: 0 4px 15px rgba(255, 196, 57, 0.3);
}
.btn-donate.paypal:hover {
    box-shadow: 0 8px 25px rgba(255, 196, 57, 0.5);
    background: #ffd15e;
}
.btn-donate.other {
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255,255,255,0.3);
}
.btn-donate.other:hover {
    border-color: #d39b55;
    color: #d39b55;
    background: rgba(211, 155, 85, 0.1);
}

/* ============================================================
   RESPONSIVE MOBILE
   ============================================================ */
@media (max-width: 768px) {
    .kentauron-hamburger-fixed {
        top: 15px;
        right: 15px;
    }

    .kentauron-logo.hero-position {
        top: calc(50% - 120px);
    }

    .kentauron-logo.hero-position img {
        width: clamp(100px, 30vw, 150px);
    }

    .kentauron-logo.corner-position {
        top: 20px;
        left: 15px;
    }

    .kentauron-section {
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
    }

    .kentauron-content {
        padding: 25px;
        max-width: 100%;
        width: 100%;
        z-index: 3;
        background: linear-gradient(0deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 60%, transparent 100%);
        position: absolute;
        bottom: 80px;
        left: 0;
    }

    .kentauron-section.hero .kentauron-content {
        position: relative;
        bottom: auto;
        background: none;
    }

    /* Le slide con gallery restano in riga anche su mobile (testo a
       sinistra, immagini a destra), come su desktop, invece di impilarsi:
       non hanno un'immagine di sfondo su cui il testo debba sovrapporsi,
       quindi non serve — e non è voluto — il trattamento a colonna delle
       altre slide. */
    .kentauron-section.storyline-gallery-slide {
        flex-direction: row;
        /* "stretch" forzava content e gallery a riempire tutta
           l'altezza, lasciando il loro contenuto ancorato in alto con
           un vuoto enorme sotto, prima della filigrana dell'anno;
           "center" li impila centrati verticalmente invece. */
        align-items: center;
    }

    .kentauron-section.storyline-gallery-slide .kentauron-content {
        position: relative;
        bottom: auto;
        left: auto;
        background: none;
        /* La colonna di testo punta al 38% della larghezza della
           slide, ma non deve mai superare il limite massimo né scendere
           sotto quello minimo impostati in "Larghezza testo" — altrimenti,
           su una slide molto larga (es. layout panoramico con una
           larghezza personalizzata grande), il 38% da solo diventerebbe
           enorme. clamp() tiene la percentuale solo come punto di
           partenza, i due limiti vincono sempre. */
        width: clamp(var(--text-min-width-mobile, 140px), 38%, var(--text-max-width-mobile, 260px));
        max-width: var(--text-max-width-mobile, 260px);
        min-width: var(--text-min-width-mobile, 140px);
        flex: 0 1 auto;
        box-sizing: border-box;
        overflow-wrap: break-word;
        padding: 14px 8px 14px 14px;
    }

    .kentauron-section.storyline-gallery-slide .kentauron-title {
        font-size: 17px;
        line-height: 1.25;
    }

    .kentauron-section.storyline-gallery-slide .kentauron-text {
        font-size: 12.5px;
        line-height: 1.5;
        width: 100%;
    }

    .kentauron-section.storyline-gallery-slide .kentauron-gallery {
        padding: 14px 14px 14px 6px;
    }

    /* Colonna singola per le immagini: la metà destra dello schermo è
       comunque stretta, un'unica colonna resta leggibile meglio di una
       griglia a più colonne compressa. */
    .kentauron-section.storyline-gallery-slide .kentauron-gallery-fixed {
        grid-template-columns: 1fr;
    }

    .kentauron-title {
        font-size: 28px;
    }

    .kentauron-section.hero .kentauron-title {
        font-size: 36px;
    }

    .kentauron-text {
        font-size: 18.67px;
        width: 100%;
    }

    .kentauron-label {
        font-size: 10px;
    }

    .kentauron-year-watermark {
        font-size: 30vw;
        bottom: 25%;
        right: 5%;
    }

    .kentauron-timeline-bar {
        height: 70px;
        padding: 0 15px 12px;
    }

    .kentauron-timeline-track {
        height: 35px;
        margin: 0 10px;
    }

    .kentauron-timeline-label {
        font-size: 8px;
    }

    .kentauron-timeline-label.active {
        font-size: 10px;
    }

    .kentauron-overlay {
        background: linear-gradient(180deg, 
            rgba(0,0,0,0.3) 0%, 
            rgba(0,0,0,0.2) 50%, 
            rgba(0,0,0,0.9) 100%) !important;
    }

    .kentauron-tick {
        height: 6px;
    }

    .kentauron-tick.passed {
        height: 10px;
    }

    .kentauron-tick.active {
        height: 25px;
    }

    .kentauron-tick.near-active {
        height: 15px;
    }

    .kentauron-side-images {
        right: 15px;
        top: 35%;
        gap: 10px;
        z-index: 2;
    }

    .kentauron-side-image {
        width: 160px;
        min-width: 160px;
        height: 160px;
        min-height: 160px;
    }

    .kentauron-menu-dropdown {
        position: fixed;
        top: 60px;
        right: 15px;
        min-width: 220px;
        max-width: 280px;
        max-height: 70vh;
        overflow-y: auto;
        background: rgba(0, 0, 0, 0.95);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 4px;
        padding: 8px 0;
    }

    .kentauron-menu-dropdown > li > a {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 20px;
        font-size: 14px;
    }

    .kentauron-submenu {
        position: static !important;
        left: auto !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        display: none;
        width: 100% !important;
        min-width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        background: rgba(255, 255, 255, 0.03);
        border: none !important;
        border-left: 3px solid rgba(211, 155, 85, 0.5) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .kentauron-submenu.active {
        display: block;
    }

    .kentauron-submenu a {
        padding: 10px 15px 10px 20px !important;
        font-size: 13px !important;
        border-left: none !important;
    }

    .submenu-arrow {
        font-size: 18px !important;
        margin-left: 12px;
        min-width: 20px;
        text-align: center;
    }

    .kentauron-bg.map-bg img {
        object-fit: cover;
    }

    .donation-buttons {
        flex-direction: column;
        align-items: center;
    }
    .btn-donate {
        width: 80%;
        text-align: center;
    }
}

/* ============================================================
   SOTTOMENU DESKTOP
   ============================================================ */
@media (min-width: 769px) {
    .kentauron-submenu {
        position: absolute;
        left: 100%;
        top: 0;
        min-width: 200px;
        max-width: 280px;
    }

    .kentauron-menu-dropdown > li {
        position: relative;
    }

    .submenu-arrow {
        font-size: 14px !important;
    }
}

/* ============================================================
   ANIMAZIONI
   ============================================================ */
@keyframes logoGlow {
    0%, 100% { filter: drop-shadow(0 0 20px rgba(211, 155, 85, 0.3)); }
    50% { filter: drop-shadow(0 0 35px rgba(211, 155, 85, 0.6)); }
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* ============================================================
   STAMPA / EXPORT PDF
   ============================================================
   Converte il layout a scorrimento orizzontale a schermo intero in un
   documento verticale normale, una slide per pagina: dal dialogo di
   stampa del browser si può scegliere "Salva come PDF" oppure stampare
   su carta. Nessuna libreria esterna: è la stampa nativa del browser.

   Ogni sezione usa una griglia CSS a due righe: l'immagine di sfondo
   occupa tutta la larghezza in alto, testo e immagine laterale (quando
   presente) stanno affiancati nella riga sotto — senza dover toccare
   l'HTML, dato che l'assegnazione avviene tramite grid-area.
*/

/* Immagine di fallback dell'hero-video: invisibile a schermo, mostrata
   solo in stampa (il video stesso non è stampabile in modo affidabile,
   quindi qui serve un elemento indipendente da esso, non annidato). */
.storyline-print-only {
    display: none;
}

@media print {
    .kentauron-hamburger-fixed,
    .kentauron-arrow,
    .kentauron-timeline-bar,
    .kentauron-scroll-hint,
    .storyline-video-export-trigger,
    .storyline-print-trigger,
    .kentauron-logo,
    .storyline-loading-overlay,
    .kentauron-lightbox {
        display: none !important;
    }

    html, body {
        height: auto !important;
        overflow: visible !important;
    }

    .storyline-timeline-wrapper,
    .kentauron-container {
        position: static !important;
        width: auto !important;
        height: auto !important;
        overflow: visible !important;
        background: #fff !important;
    }

    .kentauron-horizontal {
        display: block !important;
        overflow: visible !important;
        width: auto !important;
        height: auto !important;
    }

    .kentauron-section {
        position: relative !important;
        display: grid !important;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "bg   bg"
            "text side";
        column-gap: 25px;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 90vh;
        page-break-after: always;
        break-after: page;
        padding: 30px 0;
        overflow: visible !important;
    }

    .kentauron-bg {
        grid-area: bg;
        position: relative !important;
        width: 100% !important;
        height: 320px !important;
        margin-bottom: 25px;
    }

    .kentauron-bg img,
    .kentauron-bg video,
    .kentauron-bg picture {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .kentauron-bg video {
        display: none !important; /* i video non si stampano in modo affidabile */
    }

    .storyline-print-only {
        display: block !important;
        width: 100%;
        height: 100%;
    }

    .storyline-print-only img,
    .storyline-print-only picture {
        width: 100%;
        height: 100%;
        object-fit: cover;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .kentauron-overlay,
    .kentauron-year-watermark {
        display: none !important;
    }

    .kentauron-content {
        grid-area: text;
        position: relative !important;
        max-width: 100% !important;
        margin: 0;
        color: #000 !important;
        text-align: left;
    }

    /* La hero non ha immagine laterale: il testo occupa tutta la riga */
    .kentauron-section.hero .kentauron-content {
        grid-column: 1 / -1;
        background: #fff !important;
        padding: 25px !important;
        margin-top: 20px;
        text-align: left !important;
    }

    .kentauron-title {
        color: #000 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .kentauron-text,
    .kentauron-subtitle {
        color: #222 !important;
    }

    .kentauron-side-images {
        grid-area: side;
        position: relative !important;
        top: auto;
        right: auto;
        transform: none;
        margin: 0;
        align-self: start;
    }

    .kentauron-side-image {
        width: 160px !important;
        min-width: 0 !important;
        height: 160px !important;
        min-height: 0 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* CTA come testo semplice, con l'URL visibile accanto (non si può
       cliccare su carta): pattern standard per i fogli di stile di
       stampa (usato ad es. da Bootstrap print.css). */
    .donation-buttons {
        display: block !important;
        margin-top: 15px;
    }

    .donation-buttons a.btn-donate {
        display: block !important;
        background: none !important;
        color: #000 !important;
        text-decoration: underline;
        padding: 4px 0 !important;
        font-size: 13px;
        border: none !important;
    }

    .donation-buttons a.btn-donate::after {
        content: " (" attr(href) ")";
        color: #555;
        text-decoration: none;
        font-size: 11px;
    }
}

/* ============================================================
   LAYOUT PANORAMICO
   ============================================================
   Modalità alternativa alle slide a schermo intero: intro e slide
   normali (non hero, non donazione, che restano sempre a schermo
   intero come "punti fermi" di apertura/chiusura) mantengono le
   proporzioni naturali della loro immagine e determinano da sole
   quanto sono larghe, con uno sfondo continuo (colore o motivo
   ripetuto) visibile negli spazi tra un'immagine e l'altra.

   Le variabili --panoramic-*/--text-* vengono impostate inline sul
   contenitore .kentauron-horizontal dal template, in base alle
   impostazioni della timeline.
*/
.kentauron-horizontal.storyline-panoramic {
    background-color: var(--panoramic-bg-color, #0d0d0d);
    background-position: center;
}

/* .storyline-panoramic-slide E .storyline-slide-noimg insieme (mai l'una
   senza l'altra: la seconda è aggiunta solo quando la prima è già
   presente) per essere sicuri di vincere sulla regola width:auto qui
   sotto indipendentemente dall'ordine nel file: a parità di specificità
   vince l'ultima regola dichiarata, e qui vogliamo che sia sempre
   quella con la larghezza esplicita a decidere. */
.kentauron-section.storyline-panoramic-slide.storyline-slide-noimg {
    width: var(--storyline-slide-w, 100vw);
    min-width: var(--storyline-slide-w, 100vw);
}

@media (max-width: 768px) {
    .kentauron-section.storyline-panoramic-slide.storyline-slide-noimg {
        width: var(--storyline-slide-w-mobile, 100vw);
        min-width: var(--storyline-slide-w-mobile, 100vw);
    }
}

.kentauron-section.storyline-panoramic-slide {
    width: auto;
    min-width: 0;
    flex-shrink: 0;
    /* Margine mirato SOLO dopo le immagini panoramiche (non tra hero e
       la prima immagine, né tra l'ultima e la slide donazione, che
       restano "punti fermi" a schermo intero senza margine forzato).
       Prima si usava "gap" sul contenitore flex, ma si applicava in
       modo uniforme tra OGNI coppia di elementi, comprese hero e
       donazione: con margin-right mirato solo qui, lo spazio compare
       esattamente e solo dove previsto. */
    margin-right: var(--panoramic-gap, 60px);
}

@media (max-width: 768px) {
    .kentauron-section.storyline-panoramic-slide {
        margin-right: var(--panoramic-gap-mobile, 30px);
    }
}

.kentauron-section.storyline-panoramic-slide .kentauron-bg {
    position: relative;
    width: auto;
    height: calc(100% - (var(--panoramic-vmargin, 0px) * 2));
    margin-top: var(--panoramic-vmargin, 0px);
    margin-bottom: var(--panoramic-vmargin, 0px);
}

@media (max-width: 768px) {
    .kentauron-section.storyline-panoramic-slide .kentauron-bg {
        height: calc(100% - (var(--panoramic-vmargin-mobile, 0px) * 2));
        margin-top: var(--panoramic-vmargin-mobile, 0px);
        margin-bottom: var(--panoramic-vmargin-mobile, 0px);
    }
}

.kentauron-section.storyline-panoramic-slide .kentauron-bg img,
.kentauron-section.storyline-panoramic-slide .kentauron-bg video,
.kentauron-section.storyline-panoramic-slide .kentauron-bg picture {
    width: auto;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Il blocco di testo ha dimensioni indipendenti dall'immagine: resta
   leggibile e posizionato allo stesso modo indipendentemente da quanto
   è larga l'immagine caricata per quella slide. */
/* :not(.storyline-gallery-slide) — una slide può essere sia panoramica
   (impostazione globale del layout) sia di tipo gallery (impostazione
   della singola slide): in quel caso il testo non deve comportarsi come
   nel panoramico normale (position:absolute ancorato in basso, pensato
   per stare sopra un'immagine di sfondo a piena slide), perché qui sotto
   c'è la griglia di immagini, non uno sfondo — altrimenti il testo vi si
   sovrapporrebbe. La regola più sotto per .storyline-gallery-slide se ne
   occupa già. */
.kentauron-section.storyline-panoramic-slide:not(.storyline-gallery-slide) .kentauron-content {
    position: absolute;
    bottom: 70px;
    left: var(--text-margin-left-desktop, 40px);
    max-width: var(--text-max-width-desktop, 500px);
    width: auto;
    z-index: 3;
    padding-left: 0;
}

@media (max-width: 768px) {
    .kentauron-section.storyline-panoramic-slide:not(.storyline-gallery-slide) .kentauron-content {
        left: var(--text-margin-left-mobile, 20px);
        max-width: var(--text-max-width-mobile, 260px);
        bottom: 40px;
    }
}


/* Larghezza del testo anche nel layout a slide a schermo intero (desktop):
   prima --text-max-width-* era usata solo dal layout panoramico. */
@media (min-width: 769px) {
    .kentauron-section:not(.hero):not(.storyline-panoramic-slide):not(.storyline-gallery-slide) .kentauron-content {
        box-sizing: content-box;
        max-width: var(--text-max-width-desktop, 800px);
    }

    .kentauron-section:not(.hero):not(.storyline-panoramic-slide):not(.storyline-gallery-slide) .kentauron-content .kentauron-text {
        width: 100%;
    }

    /* Le slide gallery erano rimaste escluse per errore: anche qui il testo
       non deve fermarsi al 50% (valore di default pensato per le slide
       standard con immagine a fianco), altrimenti la colonna di testo
       risulta a sua volta dimezzata dentro uno spazio già ristretto. */
    .kentauron-section.storyline-gallery-slide .kentauron-content .kentauron-text {
        width: 100%;
    }
}

/* ============================================================
   BADGE "POWERED BY"
   ============================================================
   Discreto, in basso a destra, non interferisce con nessun controllo
   della timeline. Rimovibile dalla versione PRO tramite il filtro
   'storyline_show_badge'.
*/
.storyline-powered-by {
    position: fixed;
    bottom: 90px;
    right: 14px;
    z-index: 100005;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.35);
    background: rgba(0, 0, 0, 0.25);
    padding: 3px 8px;
    border-radius: 100px;
    text-decoration: none;
    letter-spacing: 0.02em;
    transition: color 0.2s ease, background 0.2s ease;
    pointer-events: auto;
}

.storyline-powered-by:hover {
    color: rgba(255, 255, 255, 0.75);
    background: rgba(0, 0, 0, 0.45);
}

@media (max-width: 768px) {
    .storyline-powered-by {
        font-size: 9px;
        bottom: 78px;
        right: 8px;
    }
}
/* ============================================================
   SLIDE IMAGE GALLERY (terza opzione oltre a bg image + side image)
   ============================================================ */
.kentauron-gallery {
    position: relative;
    z-index: 2;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 8vw 40px 2vw;
    max-height: 100%;
    overflow-y: auto;
    box-sizing: border-box;
}

/* Indicatore "ci sono altre immagini, scorri" — solo quando il
   contenuto scorre davvero (classe aggiunta via JS) e finché non si
   arriva in fondo. */
.kentauron-gallery.has-more-below::after {
    content: '';
    position: sticky;
    display: block;
    bottom: 6px;
    left: calc(50% - 15px);
    margin-top: -22px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    background-image: linear-gradient(135deg, transparent 50%, #fff 50%),
                       linear-gradient(225deg, transparent 50%, #fff 50%);
    background-position: left 11px top 12px, right 11px top 12px;
    background-repeat: no-repeat;
    background-size: 8px 8px;
    pointer-events: none;
    z-index: 5;
    animation: storylineGalleryBounce 1.6s ease-in-out infinite;
}

@keyframes storylineGalleryBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(5px); }
}

.kentauron-gallery-fixed {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    width: 100%;
}

.kentauron-gallery-panoramic {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    width: 100%;
}

.kentauron-gallery-item {
    margin: 0;
}

.kentauron-gallery-fixed .kentauron-gallery-item img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    display: block;
    border-radius: 4px;
}

.kentauron-gallery-panoramic .kentauron-gallery-item img {
    height: 200px;
    width: auto;
    max-width: 100%;
    display: block;
    border-radius: 4px;
}

.kentauron-gallery-item figcaption {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 6px;
    text-align: center;
}

.storyline-gallery-slide .kentauron-content {
    flex: 0 1 auto;
}

@media (max-width: 768px) {
    .kentauron-gallery {
        padding: 20px;
        max-height: 55vh;
    }

    .kentauron-gallery-fixed {
        grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
        gap: 10px;
    }

    .kentauron-gallery-fixed .kentauron-gallery-item img {
        height: 110px;
    }

    .kentauron-gallery-panoramic .kentauron-gallery-item img {
        height: 130px;
    }
}

/* ============================================================
   LANGUAGE SWITCHER
   ============================================================ */
.storyline-lang-switcher {
    position: fixed;
    top: 20px;
    right: var(--storyline-lang-right, 80px);
    z-index: 1000;
}

.storyline-lang-switcher-btn {
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 100px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
}

.storyline-lang-switcher-btn:hover {
    background: rgba(0, 0, 0, 0.6);
}

.storyline-lang-switcher-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: rgba(20, 20, 20, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    overflow: hidden;
    min-width: 90px;
}

.storyline-lang-switcher.is-open .storyline-lang-switcher-menu {
    display: block;
}

.storyline-lang-switcher-option {
    display: block;
    padding: 8px 14px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: 0.04em;
}

.storyline-lang-switcher-option:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.storyline-lang-switcher-option.is-active {
    color: #d39b55;
}

@media (max-width: 768px) {
    .storyline-lang-switcher {
        top: 15px;
        right: var(--storyline-lang-right-mobile, 62px);
    }

    .storyline-lang-switcher-btn {
        padding: 5px 10px;
        font-size: 11px;
    }
}