/* ═══════════════════════════════════════════════════════════
   tdl.css — libreria comune delle pagine PHP "welcome" (navbar, footer,
   bordo pagina, video di sfondo, griglia, form, bottoni).

   RICHIEDE /ita/core/css/base.css caricato PRIMA: palette (--gold, --text-main,
   --border, …) e @font-face. Questo file non ridefinisce colori né font.
   Estratto una tantum dal progetto Vue "welcome" (2026-09-09), scritto a mano,
   nessuna build. Vedi NOTES_refactor_manuale.md.
═══════════════════════════════════════════════════════════ */

:root {
    --tdl-nav-h: 4rem;           /* altezza barra di navigazione */
    --tdl-bg-page: #0C1013;      /* fondo pagina (dietro al video) */
    --tdl-bp-md: 768px;
    --tdl-bp-lg: 992px;
}

/* ── Reset minimo ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
html, body { width: 100%; height: 100%; margin: auto; }
body {
    min-height: 100%;
    margin: 0;
    padding: 0;
    background-color: var(--tdl-bg-page);
    color: #fff;
    font-family: 'Celestia', Georgia, serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
}
[hidden] { display: none !important; }
h1, h2, h3, h4, h5, h6 {
    margin: 0 0 1rem;
    font-weight: 500;
    line-height: 1.2;
    font-family: 'minor-headers', Georgia, serif;
}
p { margin: 0 0 1.7rem; }
b, strong { font-weight: 600; }
a { color: #fff; text-decoration: none; }
a:hover { color: var(--gold); }
img, video { max-width: 100%; vertical-align: middle; }
ul, ol { margin: 0 0 1rem; padding-left: 2rem; }
ul ul { margin-bottom: 0; }
table { border-collapse: collapse; }
button, input, select, textarea { font: inherit; margin: 0; color: inherit; }
button { cursor: pointer; }
button:focus:not(:focus-visible) { outline: 0; }
.alt-txt-color { color: var(--gold); }
.stroked-text {
    text-shadow: -1px -1px 0 #0e0e0e, 0 -1px 0 #0e0e0e, 1px -1px 0 #0e0e0e, 1px 0 0 #0e0e0e,
                 1px 1px 0 #0e0e0e, 0 1px 0 #0e0e0e, -1px 1px 0 #0e0e0e, -1px 0 0 #0e0e0e;
}

/* ── Layout: container, mini griglia, utility ─────────────── */
.tdl-container { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 .75rem; }
.tdl-row { display: flex; flex-wrap: wrap; margin: 0 -.75rem; }
.tdl-row > * { flex: 0 0 auto; width: 100%; max-width: 100%; padding: 0 .75rem; }
.tdl-col-1  { width: 8.3333%; } .tdl-col-2  { width: 16.6667%; } .tdl-col-3 { width: 25%; }
.tdl-col-4  { width: 33.3333%; } .tdl-col-6 { width: 50%; } .tdl-col-8 { width: 66.6667%; }
.tdl-col-9  { width: 75%; } .tdl-col-12 { width: 100%; }
@media (min-width: 768px) {
    .tdl-col-md-2 { width: 16.6667%; } .tdl-col-md-3 { width: 25%; } .tdl-col-md-4 { width: 33.3333%; }
    .tdl-col-md-6 { width: 50%; } .tdl-col-md-8 { width: 66.6667%; } .tdl-col-md-12 { width: 100%; }
}
@media (min-width: 992px) {
    .tdl-col-lg-3 { width: 25%; } .tdl-col-lg-4 { width: 33.3333%; } .tdl-col-lg-6 { width: 50%; }
    .tdl-col-lg-8 { width: 66.6667%; } .tdl-col-lg-12 { width: 100%; }
    .tdl-col-lg-2 { width: 16.6667%; } .tdl-col-lg-10 { width: 83.3333%; }
}
.tdl-gap { display: block; height: 20px; }
.tdl-gap::before, .tdl-gap::after { content: ""; display: table; clear: both; }
.tdl-text-center { text-align: center !important; }
/* visibilità per breakpoint lg (992px) */
@media (max-width: 991.98px) { .tdl-lg-only { display: none !important; } }
@media (min-width: 992px)    { .tdl-lg-hide { display: none !important; } }

/* ── Bordo pagina (cornice fissa) ─────────────────────────── */
.tdl-page-border .tdl-page-border-t, .tdl-page-border .tdl-page-border-r,
.tdl-page-border .tdl-page-border-b, .tdl-page-border .tdl-page-border-l {
    position: fixed; pointer-events: none; user-select: none;
    background-size: 100% 100%; z-index: 2000;
}
.tdl-page-border .tdl-page-border-t, .tdl-page-border .tdl-page-border-b { left: 0; width: 100%; height: 100px; }
.tdl-page-border .tdl-page-border-t { top: 0; background-image: url("/assets/tdl/img/border-top.png"); }
.tdl-page-border .tdl-page-border-b { bottom: 0; background-image: url("/assets/tdl/img/border-bottom.png"); }
.tdl-page-border .tdl-page-border-r, .tdl-page-border .tdl-page-border-l { top: 0; width: 100px; height: 100vh; }
.tdl-page-border .tdl-page-border-r { right: 0; background-image: url("/assets/tdl/img/border-right.png"); }
.tdl-page-border .tdl-page-border-l { left: 0; background-image: url("/assets/tdl/img/border-left.png"); }
@media (max-width: 575px) {
    .tdl-page-border .tdl-page-border-t, .tdl-page-border .tdl-page-border-b { height: 50px; }
    .tdl-page-border .tdl-page-border-r, .tdl-page-border .tdl-page-border-l { width: 50px; }
}

/* ── Video di sfondo ──────────────────────────────────────── */
.tdl-video-bg {
    position: fixed; inset: 0; height: 100vh;
    background-position: 50% 50%; background-size: cover;
    z-index: -1; opacity: .5;
}
.tdl-video-bg video { width: 100%; height: 100%; object-fit: cover; transition: opacity .3s; }

/* ── Overlay (menu mobile) ────────────────────────────────── */
.tdl-overlay {
    position: fixed; inset: 0;
    background-color: #0e0e0e; opacity: 0;
    z-index: 1001; cursor: pointer;
    transition: opacity .3s;
}
.tdl-overlay.is-on { opacity: .8; }

/* ── Navbar ───────────────────────────────────────────────── */
.tdl-nav {
    position: fixed; top: 0; left: 0; width: 100%;
    z-index: 1000;
    font-family: 'minor-headers', Georgia, serif;
    transition: transform .25s cubic-bezier(.4, 0, .2, 1), visibility .25s;
    will-change: transform, visibility;
}
.tdl-nav.is-hide { visibility: hidden; transform: translateY(-100%); }
.tdl-nav.is-show { visibility: visible; transform: translateY(0); }
/* sfondo "pergamena strappata" */
.tdl-nav-bg {
    position: absolute; top: 0; left: 0; right: 0; height: 115px;
    background: url("/assets/top_menu_bg.png");
    filter: drop-shadow(-1px 8px 3px rgba(0, 0, 0, .5));
    pointer-events: none; z-index: 1;
}
/* Da 1400 px l'immagine (1920×155) segue la larghezza della finestra. Prima
   `background-size: contain` su un box alto 115 px: fra 1400 e 1424 px il
   contain scalava per larghezza, l'immagine restava più bassa del box e la
   ripetizione verticale mostrava una riga nera in fondo. Ora il box ha le
   proporzioni dell'immagine e non c'è niente da ripetere. */
@media (min-width: 1400px) {
    .tdl-nav-bg { height: auto; aspect-ratio: 1920 / 155; background-size: 100% 100%; background-repeat: no-repeat; background-position: top center; }
}
.tdl-nav-bar {
    position: relative; display: flex; align-items: center; justify-content: space-between;
    height: var(--tdl-nav-h); margin: 0 4.5rem; z-index: 5; pointer-events: all;
}
@media (max-width: 768px) { .tdl-nav-bar { margin: 0 1.25rem; } }
.tdl-nav-bar::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 100%;
    background: url("/assets/dotted-line-muted.png") center bottom repeat-x;
    pointer-events: none; z-index: 10;
}
.tdl-nav-logo {
    flex: 0 0 auto; position: relative; display: flex; align-items: center;
    height: 100%; margin-top: 3.7rem; z-index: 12; text-decoration: none;
}
.tdl-nav-logo-video { width: 120px; height: auto; display: block; filter: drop-shadow(0 .3rem .6rem rgba(0, 0, 0, .7)); }
.tdl-nav-right { display: flex; align-items: stretch; height: 100%; }
.tdl-nav-items { display: flex; align-items: stretch; list-style: none; margin: 0; padding: 0; height: 100%; }
.tdl-nav-items li { display: flex; align-items: stretch; }
.tdl-nav-items a {
    position: relative; display: flex; align-items: center; height: 100%;
    padding: 0 24px; font-size: 1rem; letter-spacing: .12em;
    color: var(--text-muted); text-decoration: none; white-space: nowrap;
    border-bottom: 2px solid transparent; transition: color .15s;
}
.tdl-nav-items a::after {
    content: ""; position: absolute; bottom: -2px; left: 0; right: 0; height: 2px;
    background: var(--gold); transform: scaleX(0); transition: transform .2s;
}
.tdl-nav-items a:hover, .tdl-nav-items a.is-active { color: var(--gold); }
.tdl-nav-items a:hover::after, .tdl-nav-items a.is-active::after { transform: scaleX(1); }
.tdl-nav-icons { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; height: 100%; }
.tdl-nav-icons li { display: flex; align-items: center; }
.tdl-nav-burger { display: flex; align-items: center; padding: 0 12px; color: #fff; text-decoration: none; transition: opacity .2s; }
.tdl-nav-burger:hover { opacity: .75; color: #fff; }
/* icona burger (3 file di punti) */
.tdl-burger { position: relative; display: inline-block; width: 15px; height: 17px; transition: transform .3s; }
.tdl-burger > span {
    position: absolute; display: block; top: 50%; width: 3px; height: 3px; margin-top: -1.5px;
    background-color: #fff; border-radius: 1.5px;
}
.tdl-burger > span::before, .tdl-burger > span::after {
    content: ""; position: absolute; display: block; left: 6px; width: 3px; height: 3px;
    background-color: #fff; border-radius: 1.5px;
}
.tdl-burger > span::after { left: 400%; }
.tdl-burger .tdl-t-1 { margin-top: -7.5px; }
.tdl-burger .tdl-t-3 { margin-top: 4.5px; }
/* avatar account: OVALE 60×80 (come .avatar-wrapper della SPA, con le
   cornici a tema di HeaderNavbarIcons): anello esterno oro tenue (::before),
   anello interno scuro (::after), ritratto in cover sopra uno sfondo base */
.tdl-nav-avatar-li { position: relative; width: 64px; height: 44px; margin-left: .5rem; z-index: 12; }
.tdl-nav-avatar {
    position: absolute; top: 8px; left: 0; right: 0; width: 60px; height: 80px; margin: auto;
    display: block; border-radius: 50%;
    background: #161616 radial-gradient(circle at 50% 36%, rgba(201, 168, 76, .25), transparent 72%);
}
.tdl-nav-avatar::before {
    content: ""; position: absolute; inset: -6px; border-radius: 50%;
    border: 6px solid var(--border);
    box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
}
.tdl-nav-avatar::after {
    content: ""; position: absolute; inset: -3px; border-radius: 50%;
    border: 2px solid #0f0f0f;
    box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
}
.tdl-avatar {
    position: absolute; inset: 0; display: block; border-radius: 50%;
    background-repeat: no-repeat; background-position: center; background-size: cover;
}

/* ── Drawer mobile ────────────────────────────────────────── */
.tdl-mob {
    position: fixed; top: 0; right: 0; height: 100vh; width: min(80vw, 300px);
    z-index: 2000; display: flex; flex-direction: column; align-items: center;
    padding: 2rem 1.25rem; overflow-y: auto;
    background: rgba(12, 10, 8, .97);
    border-left: 1px solid rgba(201, 168, 76, .35);
    box-shadow: -10px 0 40px rgba(0, 0, 0, .6);
    font-family: 'minor-headers', Georgia, serif;
    transform: translateX(100%);
    transition: transform .4s ease;
}
.tdl-mob.is-open { transform: translateX(0); }
.tdl-mob-logo { display: block; margin-bottom: 1.5rem; }
.tdl-mob-logo video, .tdl-mob-logo img { width: 90px; height: auto; display: block; filter: drop-shadow(0 .3rem .6rem rgba(0, 0, 0, .7)); }
.tdl-mob-items { list-style: none; margin: 0; padding: 0; width: 100%; }
.tdl-mob-items li { width: 100%; text-align: center; }
.tdl-mob-items a {
    display: block; padding: .9rem 0; font-size: 1rem; letter-spacing: .18em; text-transform: uppercase;
    color: var(--text-muted); text-decoration: none;
    border-bottom: 1px solid rgba(201, 168, 76, .12);
    transition: color .2s, background .2s;
}
.tdl-mob-items a:hover { color: var(--gold-light); background: rgba(201, 168, 76, .06); }
.tdl-mob-items li.is-active a { color: var(--gold); }
.tdl-mob-sep { border-bottom: 1px solid rgba(201, 168, 76, .35); margin-bottom: .4rem; }

/* ── Navbar compatta (telefono e tablet, sotto i 992 px) ──────
   Una sola riga alta 3.5rem su tutto il portale: logo statico, titolo di
   sezione, lente (apre il campo di ricerca sulla stessa riga: tdl-nav.js
   mette .is-cerca sulla nav), burger, avatar. La pergamena, il logo video
   e la linea puntinata restano al desktop. Le pagine che si distanziano
   dalla barra con var(--tdl-nav-h) seguono da sole. */
.tdl-nav-logo-img { display: none; }
.tdl-nav-titolo { display: none; }
.tdl-nav-cerca-input, .tdl-nav-cerca-chiudi { display: none; }
@media (max-width: 991.98px) {
    :root { --tdl-nav-h: 3.5rem; }
    .tdl-nav-bg { display: none; }
    .tdl-nav-bar {
        margin: 0; padding: 0 .75rem; gap: .5rem;
        background: rgba(13, 13, 13, .97);
        border-bottom: 1px solid var(--border);
        box-shadow: 0 4px 20px rgba(0, 0, 0, .5);
    }
    .tdl-nav-bar::after { display: none; }
    .tdl-nav-logo { margin-top: 0; }
    .tdl-nav-logo-img { display: block; width: 36px; height: auto; filter: drop-shadow(0 .2rem .4rem rgba(0, 0, 0, .7)); }
    .tdl-nav-titolo {
        display: block; flex: 1 1 auto; min-width: 0;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        font-size: .9rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold);
    }
    .tdl-nav-right { flex: 0 0 auto; }
    .tdl-nav-ico {
        flex-shrink: 0; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 3px;
        display: flex; align-items: center; justify-content: center;
        background: none; color: var(--gold); cursor: pointer; transition: background .2s;
    }
    .tdl-nav-ico:hover, .tdl-nav-ico:focus-visible { background: rgba(201, 168, 76, .15); outline: 0; }
    .tdl-nav-cerca { display: flex; align-items: center; gap: .25rem; height: 100%; margin: 0; }
    .tdl-nav-cerca-chiudi { display: none; }   /* dopo .tdl-nav-ico: chiusa finché la nav non ha .is-cerca */
    .tdl-nav-cerca-input {
        flex: 1 1 auto; min-width: 0; padding: .4rem .2rem; background: none;
        border: 0; border-bottom: 1px solid var(--gold);
        color: var(--text-main); font-family: 'Celestia', Georgia, serif; font-size: 1rem; outline: 0;
    }
    .tdl-nav-cerca-input::placeholder { color: var(--text-muted); font-family: 'minor-headers', Georgia, serif; font-size: .9rem; letter-spacing: .04em; }
    .tdl-nav-cerca-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }   /* la «x» la disegniamo noi */
    /* ricerca aperta: il campo prende tutta la riga, titolo/burger/avatar si ritirano */
    .tdl-nav.is-cerca .tdl-nav-titolo, .tdl-nav.is-cerca .tdl-nav-burger-li, .tdl-nav.is-cerca .tdl-nav-avatar-li { display: none; }
    .tdl-nav.is-cerca .tdl-nav-right, .tdl-nav.is-cerca .tdl-nav-icons,
    .tdl-nav.is-cerca .tdl-nav-cerca-li, .tdl-nav.is-cerca .tdl-nav-cerca { flex: 1 1 auto; min-width: 0; }
    .tdl-nav.is-cerca .tdl-nav-cerca-input { display: block; }
    .tdl-nav.is-cerca .tdl-nav-cerca-chiudi { display: flex; }
    /* avatar: l'ovale 60×80 non ci sta in 56 px */
    .tdl-nav-avatar-li { width: 44px; height: 44px; margin-left: .25rem; }
    .tdl-nav-avatar { top: 2px; width: 34px; height: 40px; }
    .tdl-nav-avatar::before { inset: -4px; border-width: 4px; }
    .tdl-nav-avatar::after { inset: -2px; border-width: 1px; }
}

/* ── Footer ───────────────────────────────────────────────── */
.tdl-footer { position: relative; color: #eee; background-color: #000; margin-top: 60px; z-index: 1; }
.tdl-footer-corner {
    position: absolute; bottom: 100%; left: 0; width: 100%; max-height: 250px;
    pointer-events: none; user-select: none;
}
.tdl-legal-links {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: .35rem .55rem; margin-top: .4rem;
}
.tdl-legal-sep { color: rgba(201, 168, 76, .4); user-select: none; }
.tdl-iub-link {
    font-family: 'minor-headers', Georgia, serif; font-size: .72rem; letter-spacing: .16em;
    text-transform: uppercase; color: var(--text-muted); text-decoration: none; cursor: pointer;
    transition: color .2s;
}
.tdl-iub-link:hover, .tdl-iub-link:focus { color: var(--gold); }

/* ── Tabber (porting di .dtl-tabs di dettagli_classe.php) ─── */
/* <div class="tdl-tabs" data-tdl-tabs>
     <nav class="tdl-tabs-nav"><button class="tdl-tab active" data-pane="id">…</button></nav>
     <div class="tdl-pane active" id="id">…</div>
   </div>  — attivazione in manuale.js (tdlTabs) */
.tdl-tabs-nav { display: flex; margin: 1.4rem 0 0; border-bottom: 1px solid var(--border); }
.tdl-tab {
    position: relative; flex: 1; padding: .7rem .5rem;
    background: none; border: 0; border-right: 1px solid var(--border-dim); border-radius: 0;
    font-family: 'minor-headers', Georgia, serif; font-size: .85rem; letter-spacing: .2em; text-transform: uppercase;
    color: var(--text-muted); cursor: pointer; transition: color .25s, background .25s;
    white-space: nowrap; user-select: none;
}
.tdl-tab:last-child { border-right: 0; }
.tdl-tab:hover { color: var(--gold-light); background: rgba(201, 168, 76, .04); }
.tdl-tab.active { color: var(--gold); background: linear-gradient(180deg, rgba(201, 168, 76, .08) 0%, transparent 100%); }
.tdl-tab.active::after { content: ""; position: absolute; bottom: -1px; left: 18%; right: 18%; height: 2px; background: var(--gold); }
.tdl-pane { display: none; padding-top: 1rem; }
.tdl-pane.active { display: block; }
@media (max-width: 575px) { .tdl-tab { white-space: normal; font-size: .72rem; letter-spacing: .12em; } }

/* ── Form e bottoni (tema gold/dark) ──────────────────────── */
.tdl-label {
    display: block; margin-bottom: .3rem;
    font-family: 'minor-headers', Georgia, serif; font-size: .8rem; letter-spacing: .12em;
    text-transform: uppercase; color: var(--text-muted);
}
.tdl-input, .tdl-select {
    display: block; width: 100%; padding: .45rem .7rem;
    background: rgba(14, 14, 14, .9); color: var(--text-main);
    border: 1px solid var(--border); border-radius: 0;
    font-family: 'Celestia', Georgia, serif; font-size: 1rem; line-height: 1.4;
    transition: border-color .2s, box-shadow .2s;
}
.tdl-input:focus, .tdl-select:focus {
    outline: 0; border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold-glow);
}
.tdl-select option { background: #0f0f0f; color: var(--text-main); }
.tdl-btn {
    display: inline-block; padding: .5rem 1.4rem;
    font-family: 'minor-headers', Georgia, serif; font-size: .85rem; letter-spacing: .14em;
    text-transform: uppercase; text-decoration: none; text-align: center; white-space: nowrap;
    color: var(--gold); background: rgba(13, 13, 13, .97);
    border: 1px solid var(--border); border-radius: 0; cursor: pointer;
    transition: color .2s, border-color .2s, background .2s;
}
.tdl-btn:hover, .tdl-btn:focus { color: var(--gold-light); border-color: var(--gold); background: var(--gold-glow); outline: 0; }
/* primario = lo stile «trasparente» dei bottoni della home (.character-button):
   bordo oro, fondo appena dorato, diventa oro pieno solo al passaggio (prima
   era oro pieno sempre: troppo acceso) */
.tdl-btn.is-primary { color: var(--gold); background: var(--gold-glow); border-color: var(--gold); letter-spacing: .22em; }
.tdl-btn.is-primary:hover, .tdl-btn.is-primary:focus { color: #080808; background: var(--gold); box-shadow: 0 0 18px rgba(201, 168, 76, .25); }
.tdl-btn:disabled { opacity: .3; pointer-events: none; }

/* ── Layout del portale (account/, personaggi/: navbar + cornice, niente footer) ── */
.portale-main { position: relative; min-height: 100vh; }
.tdl-gap-2 { display: block; height: 40px; }
.visually-hidden {
    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;
}

/* ── Swiper: frecce del tema (plate + chevron PNG) ─────────── */
/* Sul contenitore .swiper: <div class="swiper tdl-swiper-arrows">. Dimensioni e
   rientro via custom property (--tdl-arrow-w/h/inset). Le PNG puntano a
   sinistra: il "next" è ribaltato. Swiper 12+ inietta un <svg> blu: nascosto.
   NB: i bottoni sono figli di .swiper (overflow:hidden) → rientri positivi. */
.tdl-swiper-arrows { --tdl-arrow-w: 34px; --tdl-arrow-h: 50px; --tdl-arrow-inset: 8px; }
.tdl-swiper-arrows .swiper-button-prev, .tdl-swiper-arrows .swiper-button-next {
    width: var(--tdl-arrow-w); height: var(--tdl-arrow-h); margin-top: calc(var(--tdl-arrow-h) / -2);
    z-index: 11; opacity: .85; transition: opacity .2s, transform .2s;
    background: url("/assets/tdl/img/Button_Arrow_Background.png") center / contain no-repeat;
}
.tdl-swiper-arrows .swiper-button-prev { left: var(--tdl-arrow-inset); }
.tdl-swiper-arrows .swiper-button-next { right: var(--tdl-arrow-inset); transform: scaleX(-1); }
.tdl-swiper-arrows .swiper-navigation-icon { display: none; }
.tdl-swiper-arrows .swiper-button-prev::after, .tdl-swiper-arrows .swiper-button-next::after {
    content: ""; position: absolute; inset: 0;
    background: url("/assets/tdl/img/Button_Arrow_Foreground.png") center / contain no-repeat;
}
.tdl-swiper-arrows .swiper-button-prev:hover { opacity: 1; transform: scale(1.08); }
.tdl-swiper-arrows .swiper-button-next:hover { opacity: 1; transform: scaleX(-1) scale(1.08); }
.tdl-swiper-arrows .swiper-button-disabled { opacity: .25; }

/* ── Card 3D con tilt (porting di Cards.vue; JS: tdl-cards.js) ── */
:root { --card-width: 260px; --card-height: 400px; }
.tdl-card-wrap {
    margin: 10px; cursor: pointer;
    transform: perspective(800px);
    transform-style: flat;   /* preserve-3d rompe l'hit-testing del link in Chrome */
}
.tdl-card {
    position: relative; flex: 0 0 240px;
    width: var(--card-width); height: var(--card-height); margin: auto;
    background-color: #333; overflow: hidden; border-radius: 10px;
    box-shadow: rgba(0, 0, 0, .66) 0 30px 60px 0, inset #1a1a1a 0 0 0 5px, inset rgba(201, 168, 76, .45) 0 0 0 6px;
    transition: 1s cubic-bezier(.445, .05, .55, .95);
    /* contesto di stacking sempre presente: la texture .tdl-card-back (z-index
       -1) sta sopra il fondo #333 anche a riposo, non solo quando l'hover
       applica il transform (nella SPA il transform c'era sempre). */
    isolation: isolate;
}
.tdl-card-back, .tdl-card-bg {
    box-sizing: content-box; position: absolute; top: -20px; left: -20px;
    width: 100%; height: 100%; padding: 20px;
    background-repeat: no-repeat; background-position: center; background-size: cover;
    pointer-events: none;
}
.tdl-card-back { opacity: .3; z-index: -1; transition: 1s cubic-bezier(.445, .05, .55, .95); }
.tdl-card-bg {
    z-index: 0; background-position: top center; padding: .5rem; top: -10px;
    transition: 1s cubic-bezier(.445, .05, .55, .95), opacity 5s 1s cubic-bezier(.445, .05, .55, .95);
}
/* ritratto come <img loading="lazy"> (WebP via tdl_webp) al posto del background: copre il padding box come faceva lo sfondo */
.tdl-card-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.tdl-card-info {
    position: absolute; bottom: 0; width: 100%; padding: 20px; color: #fff; z-index: 1;
    transform: translateY(40%);
    transition: .6s 1.6s cubic-bezier(.215, .61, .355, 1);
}
.tdl-card-info * { position: relative; z-index: 1; }
.tdl-card-info a { z-index: 3; position: relative; text-decoration: none; border: 0; }
.tdl-card-info p {
    opacity: 0; margin: 0; font-size: 1rem; color: #fff;
    text-shadow: rgba(0, 0, 0, 1) 0 2px 3px;
    transition: .6s 1.6s cubic-bezier(.215, .61, .355, 1);
}
.tdl-card-info::after {
    content: ""; position: absolute; top: 0; left: 0; z-index: 0; width: 100%; height: 100%;
    background-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, .6) 100%);
    opacity: 0; transform: translateY(100%);
    transition: 5s 1s cubic-bezier(.445, .05, .55, .95);
}
.tdl-card-title {
    display: inline-block; width: 100%; margin: 6px 0 5px;
    font-family: 'minor-headers', Georgia, serif; font-weight: 300; font-size: 2rem; line-height: 1.2;
    color: #fff;
}
.tdl-card-wrap:hover .tdl-card-info { transform: translateY(0); }
.tdl-card-wrap:hover .tdl-card-info p { opacity: 1; }
.tdl-card-wrap:hover .tdl-card-info, .tdl-card-wrap:hover .tdl-card-info p { transition: .6s cubic-bezier(.23, 1, .32, 1); }
.tdl-card-wrap:hover .tdl-card-info::after { transition: 5s cubic-bezier(.23, 1, .32, 1); opacity: 1; transform: translateY(0); }
.tdl-card-wrap:hover .tdl-card-bg { transition: .6s cubic-bezier(.23, 1, .32, 1), opacity 5s cubic-bezier(.23, 1, .32, 1); opacity: .8; }
.tdl-card-wrap:hover .tdl-card {
    transition: .6s cubic-bezier(.23, 1, .32, 1), box-shadow 2s cubic-bezier(.23, 1, .32, 1);
    box-shadow: rgba(201, 168, 76, .28) 0 0 40px 5px, rgba(201, 168, 76, 1) 0 0 0 1px,
                rgba(0, 0, 0, .66) 0 30px 60px 0, inset #1a1a1a 0 0 0 5px, inset rgba(201, 168, 76, .9) 0 0 0 6px;
}

/* ── Pergamena strappata (manuale, profilo, home) ─────────── */
/* Fondo di carta scura con i bordi strappati sopra e sotto (::before/::after,
   3rem fuori dal box: il contenitore non deve avere overflow:hidden). */
.tdl-sheet { position: relative; background: url("/assets/tdl/img/paper-texture-blk.jpg") repeat center; }
.tdl-sheet::before, .tdl-sheet::after {
    content: ""; display: block; position: absolute; left: 0; width: 100%; height: 3rem;
    background: url("/assets/tdl/img/paper-texture-blk.jpg") center repeat;
    filter: drop-shadow(-1px 8px 3px rgba(0, 0, 0, .5));
    -webkit-mask-image: url("/assets/tdl/img/ripped.png");
            mask-image: url("/assets/tdl/img/ripped.png");
    mask-position: center; mask-repeat: repeat-x; mask-size: auto 100%;
    pointer-events: none;
}
.tdl-sheet::before { top: -3rem; transform: scaleY(-1); }
.tdl-sheet::after  { bottom: -3rem; z-index: 1; }

/* ── Pagina 404 (portale/lib/tdl_layout_portale.php (rotta 404), porting di NotFound.vue) ── */
.tdl-404 { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; }
.tdl-404-bg {
    position: absolute; inset: 0; z-index: 0;
    background: url("/assets/tdl/img/404.jpg") no-repeat 50% 30% / cover;
}
.tdl-404-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(8, 8, 8, .35), rgba(8, 8, 8, .75)); }
.tdl-404-body { position: relative; z-index: 1; text-align: center; padding: calc(var(--tdl-nav-h) + 2rem) .75rem 4rem; }
.tdl-404-code { font-family: 'Ringbearer', Georgia, serif; font-size: clamp(4rem, 12vw, 7rem); line-height: 1; margin: 0; color: var(--text-main); }
.tdl-404-title { font-family: 'Ringbearer', Georgia, serif; font-size: clamp(1.3rem, 4vw, 2.5rem); margin: .5rem 0 2rem; color: var(--gold-light); }
.tdl-404-lead { max-width: 46rem; margin: 0 auto 2.5rem; font-size: 1.15rem; line-height: 1.6; color: var(--text-main); }
.tdl-404-btn { font-size: 1rem; padding: .7rem 2rem; margin: .3rem; }
/* 403: stessa pagina, sfondo dedicato (provvisorio: quello della 404 finché non arriva 403.jpg) */
.tdl-403 .tdl-404-bg { background-image: url("/assets/tdl/img/404.jpg"); }
.tdl-404-btn:hover { box-shadow: 0 0 5px 0 var(--gold) inset, 0 0 10px 1px var(--gold); }