/**
 * TGM · Carosello "in vetrina" stile 2016 — v2.25
 * Fascia sotto lo slider "recenti" (v2.9): thumbnail 3:2, categoria, titolo
 * Oswald maiuscolo. Stessa palette/struttura dello slider recenti per coerenza
 * (rosso di brand var(--tgm-red), v2.52, card grigia #f5f5f5 come in v2.11).
 */

.tgm-showcase-strip {
    border-bottom: 1px solid rgba(128, 128, 128, .25);
    background: #fff;
}
.tgm-showcase-heading {
    max-width: var(--global-content-width, 1290px);
    margin: 0 auto;
    padding: .5em .9em 0;
    font-family: "Oswald", sans-serif;
    font-weight: 600;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--tgm-red);
}
.tgm-showcase-inner {
    display: flex;
    align-items: stretch;
    max-width: var(--global-content-width, 1290px);
    margin: 0 auto;
}
.tgm-showcase-viewport { overflow: hidden; flex: 1; }
.tgm-showcase-track {
    display: flex;
    margin: 0;
    padding: .6em;
    list-style: none;
    transition: transform .4s ease;
}
.tgm-showcase-item {
    flex: 0 0 25%;
    max-width: 25%;
    box-sizing: border-box;
    padding: 0 .5em;
}
.tgm-showcase-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
    background: #f5f5f5;
    border: 1px solid rgba(128, 128, 128, .2);
    overflow: hidden;
}
.tgm-showcase-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    background: #ddd;
    overflow: hidden;
}
.tgm-showcase-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.tgm-showcase-body { padding: .55em .7em .7em; }
/* v2.65 — layout a DUE COLONNE: box data a sinistra, cat+titolo a destra
   (stesso principio dell'hero). Il box data (.tgm-card-datebox, componente
   condiviso con la griglia, CSS in card-2016.css) qui usa GIÀ la riduzione
   mobile della griglia (card-2016.css @600px, non un valore nuovo): la card
   della vetrina è larga solo ~25% del contenitore, il box a piena taglia
   (60x57px) sarebbe sproporzionato. Vero flex item (mai float), stesso
   motivo dell'hero: -webkit-line-clamp sul titolo è fragile con i float. */
.tgm-showcase-row {
    display: flex;
    align-items: flex-start;
    gap: .5em;
}
.tgm-showcase-row .tgm-card-datebox {
    flex: 0 0 auto;
    margin: 0;
    padding: 3px 7px;
}
.tgm-showcase-row .tgm-card-datebox .tgm-db-day { font-size: 32px; }
.tgm-showcase-col {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.tgm-showcase-cat {
    display: block;
    font-family: "Oswald", sans-serif;
    font-weight: 600;
    font-size: .66rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--tgm-red);
    margin-bottom: .3em;
}
.tgm-showcase-title {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: "Oswald", sans-serif;
    text-transform: uppercase;
    font-size: .82rem;
    line-height: 1.3;
    letter-spacing: .01em;
}
.tgm-showcase-link:hover .tgm-showcase-title { color: var(--tgm-red); }

.tgm-showcase-nav {
    flex: 0 0 auto;
    width: 34px;
    border: 0;
    cursor: pointer;
    background: rgba(128, 128, 128, .12);
    color: inherit;
    font-size: 1rem;
}
.tgm-showcase-nav:hover { background: var(--tgm-red); color: #fff; }

.tgm-showcase-dots { display: flex; justify-content: center; gap: 6px; padding: 0 0 8px; }
.tgm-showcase-dots button {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 0;
    padding: 0;
    cursor: pointer;
    background: rgba(128, 128, 128, .4);
}
.tgm-showcase-dots button.is-active { background: var(--tgm-red); }

@media (max-width: 1024px) {
    .tgm-showcase-item { flex-basis: 50%; max-width: 50%; }
}
@media (max-width: 600px) {
    .tgm-showcase-item { flex-basis: 100%; max-width: 100%; }
    .tgm-showcase-title { -webkit-line-clamp: 2; }
    /* v2.65: stesso principio dell'hero — su mobile lo spazio in riga non
       basta (il titolo è già limitato a 2 righe), il box data passa SOPRA
       cat+titolo invece di rubargli larghezza in colonna. */
    .tgm-showcase-row { flex-direction: column; align-items: flex-start; gap: .25em; }
}