/**
 * TGM · Slider hero stile 2016 — v2.26 (v2.26.1: rapporto dimezzato in altezza)
 * Fascia grande in cima alla home: una slide alla volta (due su desktop
 * molto largo), overlay categoria+titolo su gradiente. Rapporto 20:7 (metà
 * dell'altezza del 10:7 originale): con `object-fit:cover` si vede solo la
 * striscia orizzontale centrale dell'immagine, non l'intera inquadratura.
 * Stessa palette del resto del sito (rosso di brand var(--tgm-red), v2.52).
 */

.tgm-hero-strip {
    border-bottom: 3px solid var(--tgm-red);
    background: #000;
}
.tgm-hero-inner {
    display: flex;
    align-items: stretch;
    max-width: var(--global-content-width, 1290px);
    margin: 0 auto;
}
.tgm-hero-viewport { overflow: hidden; flex: 1; touch-action: pan-y; }
.tgm-hero-track {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    transition: transform .4s ease;
}
.tgm-hero-item {
    flex: 0 0 100%;
    max-width: 100%;
    box-sizing: border-box;
}
@media (min-width: 1400px) {
    .tgm-hero-item { flex-basis: 50%; max-width: 50%; }
    .tgm-hero-item + .tgm-hero-item { border-left: 2px solid #000; }
}

.tgm-hero-link {
    position: relative;
    display: block;
    text-decoration: none;
    color: #fff;
}
.tgm-hero-media {
    display: block;
    width: 100%;
    aspect-ratio: 20 / 7;
    background: #222;
    overflow: hidden;
}
.tgm-hero-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.tgm-hero-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 2.2em 1.6em 1.2em;
    background: linear-gradient(to top, rgba(0, 0, 0, .88) 0%, rgba(0, 0, 0, .55) 55%, rgba(0, 0, 0, 0) 100%);
}
/* v2.65 — layout a DUE COLONNE: box data a sinistra (colonna fissa,
   larghezza del componente stesso), cat+titolo a destra (colonna fluida).
   Il box data (.tgm-card-datebox, componente condiviso con la griglia, CSS
   in card-2016.css) NON è floatato di proposito: float+un titolo con
   -webkit-line-clamp è un'interazione fragile/inconsistente tra browser —
   qui invece è un vero flex item, `align-items:flex-start` lo tiene
   ancorato in alto senza stirarsi sull'altezza del titolo. */
.tgm-hero-row {
    display: flex;
    align-items: flex-start;
    gap: .9em;
}
.tgm-hero-row .tgm-card-datebox {
    flex: 0 0 auto; /* colonna fissa: mai si comprime, mai si allarga */
    margin: 0;
}
.tgm-hero-col {
    flex: 1 1 auto; /* colonna fluida: prende tutto lo spazio restante */
    min-width: 0;   /* permette a .tgm-hero-title di andare a capo invece di espandere il flex item */
    display: flex;
    flex-direction: column;
}
.tgm-hero-cat {
    display: inline-block;
    font-family: "Oswald", sans-serif;
    font-weight: 600;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #fff;
    background: var(--tgm-red);
    padding: .2em .6em;
    margin-bottom: .5em;
}
.tgm-hero-title {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: "Oswald", sans-serif;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 1.5rem;
    line-height: 1.25;
    letter-spacing: .01em;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}
.tgm-hero-link:hover .tgm-hero-title { color: #f5c6c6; }

.tgm-hero-nav {
    flex: 0 0 auto;
    width: 42px;
    border: 0;
    cursor: pointer;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font-size: 1.2rem;
}
.tgm-hero-nav:hover { background: var(--tgm-red); }

.tgm-hero-dots { display: flex; justify-content: center; gap: 7px; padding: 10px 0; background: #000; }
.tgm-hero-dots button {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 0;
    padding: 0;
    cursor: pointer;
    background: rgba(255, 255, 255, .3);
}
.tgm-hero-dots button.is-active { background: var(--tgm-red); }

@media (max-width: 1024px) {
    .tgm-hero-title { font-size: 1.25rem; }
    .tgm-hero-overlay { padding: 1.8em 1.3em 1em; }
}
@media (max-width: 600px) {
    .tgm-hero-title { font-size: 1.05rem; -webkit-line-clamp: 2; }
    .tgm-hero-overlay { padding: 1em 1em .8em; }
    .tgm-hero-cat { font-size: .65rem; padding: .18em .5em; margin-bottom: .35em; }
    /* v2.65: spazio stretto su mobile — il box data passa SOPRA cat+titolo
       (mai accanto, mai sovrapposto) invece che a due colonne. */
    .tgm-hero-row { flex-direction: column; align-items: flex-start; gap: .35em; }
    /* Stessa riduzione già usata per il box data nella griglia a questo
       stesso breakpoint (card-2016.css) — non un valore nuovo. */
    .tgm-hero-row .tgm-card-datebox .tgm-db-day { font-size: 32px; }
    .tgm-hero-row .tgm-card-datebox { padding: 3px 7px; }
    .tgm-hero-nav { width: 32px; font-size: 1rem; }
}