.testata-container .testata {
    width: 100%;
    aspect-ratio: 19 / 9;
    /* desktop: cinemascope, panoramico */
    min-height: clamp(280px, 40vw, 520px);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    text-align: center;
    padding: clamp(1rem, 3vw, 2.5rem);
    position: relative;
    overflow: hidden;
    flex-wrap: wrap;
    align-content: end;
    isolation: isolate;
}

.testata-container .testata .leggi {
    color: #FFF;
    display: block;
    width: 100%;
    z-index: 2;
    font-family: var(--global-secondary-font-family);
    font-size: 1.1em;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    margin-bottom: 1em;
    opacity: 0;
    transition: opacity 0.3s;
}

/* Sempre visibile, nessuna animazione di apparizione */
.testata-container .testata .categoria {
    color: #FFF;
    display: block;
    z-index: 2;
    font-family: var(--global-secondary-font-family);
    font-size: 1.25em;
    letter-spacing: 0.01em;
    padding: 0.1em 0.5em;
    background-color: var(--global-primary-background);
    border-radius: 3px;
    transition: transform 0.3s;
    will-change: transform;
}


.testata-container .testata .title {
    color: #FFF;
    text-decoration: none;
    font-size: clamp(1.6rem, 4.75vw, 3.5rem);
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    position: relative;
    z-index: 2;
    text-shadow: 2px 2px 2px #000000;
    display: block;
    width: 100%;
    margin-top: 0.35em;
    margin-bottom: 0.1em;
    transition: transform 0.3s;
    will-change: transform;
}

.testata-container .testata:hover .leggi {
    opacity: 1;
}

/* Hover: categoria e title si "sollevano" (lift visivo, niente layout shift)
   mentre .leggi compare in fade al suo posto */
.testata-container .testata:hover .categoria,
.testata-container .testata:hover .title {
    transform: translateY(-0.2em);
}

/* Opacità animabili tramite @property: l'unico modo affidabile per
   animare un gradient cross-browser (transition su background-image
   non è supportata in modo coerente) */
/* Quanto scurisce in ogni punto del bordo verticale dell'immagine.
   0%   = niente velo (immagine pulita)
   100% = nero pieno (immagine coperta) */
@property --scurimento-alto {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 0%;
}

@property --scurimento-medio-alto {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 0%;
}

@property --scurimento-medio-basso {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 30%;
}

@property --scurimento-basso {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 80%;
}

/* Overlay scuro per leggibilità del testo.
   Il backdrop-filter "stilizza" solo ciò che ci sta sotto (bg image + grana),
   senza toccare i testi e il badge categoria che stanno sopra (z-index 2). */
.testata-container .testata::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(in oklab to bottom,
        rgb(0 0 0 / var(--scurimento-alto))        0%,
        rgb(0 0 0 / var(--scurimento-medio-alto))  40%,
        rgb(0 0 0 / var(--scurimento-medio-basso)) 67%,
        rgb(0 0 0 / var(--scurimento-basso))       100%);
    z-index: 1;
    backdrop-filter: contrast(1.1) saturate(1.15);
    -webkit-backdrop-filter: contrast(1.1) saturate(1.15);
    transition:
        --scurimento-alto 0.3s,
        --scurimento-medio-alto 0.3s,
        --scurimento-medio-basso 0.3s,
        --scurimento-basso 0.3s;
}

/* Hover: scurisce di più ovunque */
.testata-container .testata:hover::before {
    --scurimento-alto: 10%;
    --scurimento-medio-alto: 25%;
    --scurimento-medio-basso: 55%;
    --scurimento-basso: 85%;
}

/* Grana fotografica via SVG feTurbulence inline.
   Maschera la compressione JPEG e dà un look "filmico" — è uno dei trucchi
   più usati su siti editoriali per nobilitare immagini di qualità non eccelsa.
   sta sotto al gradient (z:0) e sopra al bg image. */
.testata-container .testata::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1; /* sopra al gradient scuro (anch'esso z:1 ma source-prima) — grana visibile anche nelle zone scure */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='1'/></svg>");
    opacity: 0.2;
    mix-blend-mode: overlay;
}

/* Mobile overrides — in fondo al file così le regole vincono nel cascade */
@media (max-width: 768px) {
    .testata-container .testata {
        aspect-ratio: 4 / 3;
        /* mobile: leggermente landscape, hero non invasivo */
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: flex-end;
        align-items: center;
    }

    .testata-container .testata .categoria {
        font-size: 0.8em;
    }

    .testata-container .testata .leggi,
    .testata-container .testata:hover .leggi {
        display: none;
    }

    .testata-container .testata .title {
        margin-top: 0.4em;
        margin-bottom: 0.05em;
    }

    /* Su mobile niente animazioni di lift in :hover (resta solo il
       cambio del gradient sull'overlay ::before) */
    .testata-container .testata:hover .categoria,
    .testata-container .testata:hover .title {
        transform: none;
    }
}

pre.sourcerer {
	padding: 0px;
	border: none;
	font-family: var(--global-font-family);
	font-size: var(--global-font-size);
}

pre.sourcerer * {
	font-family: var(--global-font-family);
	font-size: var(--global-font-size);

}


.tm-page-container {
background: url("/images/servizio/copertina-viaggi-sx.jpg") calc(50% - 936px) top / 673px 1251px no-repeat, url("/images/servizio/copertina-viaggi-dx.jpg") calc(50% + 936px) top / 671px 1251px no-repeat white !important;
}

/*
.tm-page {
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.01), 0 1px 1px -0.5px rgba(0, 0, 0, 0.06), 0 3px 3px -1.5px rgba(0, 0, 0, 0.06), 0 6px 6px -3px rgba(0, 0, 0, 0.06), 0 12px 12px -6px rgba(0, 0, 0, 0.06), 0 24px 24px -12px rgba(0, 0, 0, 0.03);
}

*/