/* ==========================================================================
   HOME
   --------------------------------------------------------------------------
   01. Header sopra la foto
   02. Hero con animazione d'ingresso
   03. Nastro scorrevole
   04. Prossimo incontro
   05. Ultime news
   06. Carosello giocatori
   07. Il club in numeri
   08. Mosaico media
   09. Fascia "Supportaci"
   ========================================================================== */


/* ==========================================================================
   01. HEADER SOPRA LA FOTO
   Sulla home l'header è trasparente sopra la hero e diventa pieno allo scroll.
   ========================================================================== */
.page-home main {
    margin-top: calc(var(--header-h) * -1);
    /* Il nastro in diagonale sporge ai lati: non deve creare scorrimento orizzontale */
    overflow-x: clip;
}

.page-home .main-header:not(.scrolled) {
    background: linear-gradient(180deg, rgba(11, 11, 14, 0.82), rgba(11, 11, 14, 0));
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.page-home .main-header:not(.scrolled)::before,
.page-home .main-header:not(.scrolled)::after {
    opacity: 0;
}


/* ==========================================================================
   02. HERO
   ========================================================================== */
.hero-slider {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: clamp(560px, 88vh, 820px);
    min-height: clamp(560px, 88svh, 820px);
    display: flex;
    background: var(--nero);
    color: var(--bianco);
}

/* --hero-scroll (da index.js) sposta lo sfondo più lentamente della pagina */
#hero-bg-slider {
    position: absolute;
    inset: -6% 0;
    z-index: -2;
    transform: translate3d(0, calc(var(--hero-scroll, 0) * 0.28px), 0);
}

.bg-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 30%;
    opacity: 0;
    transform: scale(1.1);
    transition: opacity 1.5s ease-in-out, transform 7s linear;
}

.bg-slide.active {
    opacity: 1;
    transform: scale(1);
}

/* Velo scuro, bagliore rosso e grana: tengono leggibile il titolo */
.hero-slider::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        var(--grana),
        radial-gradient(70% 55% at 50% 48%, rgba(227, 25, 55, 0.22), transparent 70%),
        linear-gradient(180deg, rgba(11, 11, 14, 0.8) 0%, rgba(11, 11, 14, 0.45) 30%, rgba(11, 11, 14, 0.62) 64%, var(--nero) 100%);
}

.animation-container {
    position: relative;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: calc(var(--header-h) + 24px) var(--gutter) 110px;
}

/* --- Stemma che entra rotolando e si apre in due --- */
.logo-animation-wrapper {
    position: relative;
    width: clamp(104px, 12vw, 160px);
    aspect-ratio: 1;
    opacity: 0;
    filter: drop-shadow(0 14px 30px rgba(0, 0, 0, 0.55));
}

.full-logo,
.left-half,
.right-half {
    position: absolute;
    inset: 0;
    background: url('../images/logo.png') center / cover no-repeat;
}

.full-logo {
    z-index: 2;
}

.left-half,
.right-half {
    z-index: 1;
    display: none;
    animation-fill-mode: forwards;
    transition: opacity 0.4s ease;
}

.left-half {
    clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
}

.right-half {
    clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
}

/* Se lo schermo si restringe le due metà non hanno più spazio ai lati del titolo */
.logo-animation-wrapper.no-room .left-half,
.logo-animation-wrapper.no-room .right-half {
    opacity: 0;
}

@keyframes move-and-rotate {
    0% {
        transform: translateX(-100vw) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateX(0) rotate(1080deg);
        opacity: 1;
    }
}

/* --split-distance viene calcolata da index.js sulla larghezza reale del titolo */
@keyframes split-and-open-left {
    from { transform: translateX(0); }
    to { transform: translateX(calc(var(--split-distance, 350px) * -1)) scale(0.95); }
}

@keyframes split-and-open-right {
    from { transform: translateX(0); }
    to { transform: translateX(var(--split-distance, 350px)) scale(0.95); }
}

/* Versione per schermi stretti: le metà si aprono e svaniscono */
@keyframes split-and-fade-left {
    0% { transform: translateX(0) scale(1); opacity: 1; }
    55% { transform: translateX(-90px) scale(0.95); opacity: 1; }
    100% { transform: translateX(-90px) scale(0.95); opacity: 0; }
}

@keyframes split-and-fade-right {
    0% { transform: translateX(0) scale(1); opacity: 1; }
    55% { transform: translateX(90px) scale(0.95); opacity: 1; }
    100% { transform: translateX(90px) scale(0.95); opacity: 0; }
}

/* --- Titolo --- */
.animated-title-container {
    position: absolute;
    left: 0;
    right: 0;
    padding: 0 var(--gutter);
    text-align: center;
    opacity: 0;
    visibility: hidden;
}

.animated-title {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0 0.22em;
    width: fit-content;
    margin-inline: auto;
    font-family: var(--font-titoli);
    font-weight: 400;
    font-size: clamp(3rem, 8.4vw, 7.4rem);
    line-height: 0.9;
    letter-spacing: 0.015em;
    text-transform: uppercase;
    text-shadow: 0 6px 34px rgba(0, 0, 0, 0.5);
}

.animated-title .word,
.animated-subtitle .word {
    opacity: 0;
    transform: translateY(1000px);
}

.animated-title .word {
    display: block;
}

.animated-title .word:last-child {
    color: var(--rosso);
    text-shadow: 0 6px 34px rgba(0, 0, 0, 0.65);
}

.animated-subtitle {
    margin-top: clamp(14px, 2vw, 24px);
    font-family: var(--font-titoli);
    font-size: clamp(1.15rem, 2.5vw, 2rem);
    line-height: 1.2;
    letter-spacing: 0.22em;
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.6);
}

.animated-subtitle .word {
    display: inline-block;
    margin: 0 0.12em;
}

@keyframes bounceInUp {
    0% {
        opacity: 0;
        transform: translateY(1000px);
    }
    60% {
        opacity: 1;
        transform: translateY(-30px);
    }
    80% {
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Elementi che compaiono a fine animazione: pulsanti, social, contatore --- */
.hero-actions,
.hero-social,
.hero-counter,
.hero-dots {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.9s var(--ease), transform 0.9s var(--ease), visibility 0.9s;
}

.hero-slider.intro-done .hero-actions,
.hero-slider.intro-done .hero-social,
.hero-slider.intro-done .hero-counter,
.hero-slider.intro-done .hero-dots {
    opacity: 1;
    visibility: visible;
}

.hero-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px 22px;
    margin-top: clamp(28px, 3.6vw, 44px);
    transform: translateY(16px);
}

.hero-slider.intro-done .hero-actions {
    transform: translateY(0);
}

/* Social in verticale sul bordo sinistro */
.hero-social {
    position: absolute;
    left: clamp(14px, 2.6vw, 40px);
    bottom: 96px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    color: rgba(255, 255, 255, 0.8);
}

.hero-social span {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.3em;
    text-transform: uppercase;
}

.hero-social::after {
    content: '';
    order: 1;
    width: 1px;
    height: 44px;
    background: rgba(255, 255, 255, 0.4);
}

.hero-social span {
    order: 0;
}

.hero-social a {
    order: 2;
    transition: color var(--t-veloce), transform var(--t-veloce);
}

.hero-social a:hover {
    color: var(--rosso-chiaro);
    transform: scale(1.2);
}

/* Contatore delle foto sul bordo destro */
.hero-counter {
    position: absolute;
    right: clamp(14px, 2.6vw, 40px);
    bottom: 96px;
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-family: var(--font-titoli);
    line-height: 1;
}

.hero-counter strong {
    font-weight: 400;
    font-size: clamp(2.4rem, 4vw, 3.6rem);
}

.hero-counter span {
    width: 34px;
    height: 2px;
    align-self: center;
    background: var(--rosso);
    transform: skewX(-30deg);
}

.hero-counter em {
    font-style: normal;
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.6);
}

.hero-dots {
    position: absolute;
    left: 50%;
    bottom: 104px;
    display: flex;
    gap: 8px;
    transform: translateX(-50%);
}

.hero-dots span {
    position: relative;
    width: 40px;
    height: 3px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.28);
    transform: skewX(-30deg);
}

.hero-dots span.active::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--bianco);
    transform-origin: left;
    animation: dot-progress 5s linear forwards;
}

@keyframes dot-progress {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

/* Intro già vista in questa sessione (classe messa su <html> da uno script nell'head):
   niente preloader, titolo e pulsanti subito al loro posto */
.intro-vista #preloader {
    display: none;
}

.intro-vista .animated-title-container,
.intro-vista .hero-slider .word,
.intro-vista .hero-actions,
.intro-vista .hero-social,
.intro-vista .hero-counter,
.intro-vista .hero-dots {
    opacity: 1;
    visibility: visible;
}

.intro-vista .hero-slider .word,
.intro-vista .hero-actions {
    transform: none;
}

/* Senza animazioni (prefers-reduced-motion) il titolo è subito al suo posto */
.hero-slider.intro-static .logo-animation-wrapper {
    display: none;
}

.hero-slider.intro-static .animated-title-container,
.hero-slider.intro-static .word {
    opacity: 1;
    visibility: visible;
    transform: none;
}


/* ==========================================================================
   03. NASTRO SCORREVOLE
   Fascia rossa in leggera diagonale a cavallo tra la hero e il match center.
   ========================================================================== */
.ticker {
    position: relative;
    z-index: 5;
    margin: -34px -3vw -30px;
    padding: 15px 0;
    overflow: hidden;
    background: var(--rosso);
    box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.8);
    color: var(--bianco);
    transform: rotate(-1.4deg);
}

.ticker-track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: scroll 60s linear infinite;
}

.ticker-track span {
    padding: 0 26px;
    font-family: var(--font-titoli);
    font-size: clamp(1.15rem, 2vw, 1.6rem);
    line-height: 1;
    letter-spacing: 0.1em;
    white-space: nowrap;
}

.ticker-track span:nth-of-type(even) {
    color: transparent;
    -webkit-text-stroke: 1px var(--bianco);
}

.ticker-track i {
    font-size: 0.8rem;
    opacity: 0.85;
}


/* ==========================================================================
   04. PROSSIMO INCONTRO
   ========================================================================== */
.next-match-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(84px, 9vw, 120px) 0 calc(clamp(64px, 8vw, 104px) + var(--taglio));
    background: var(--nero);
    color: var(--bianco);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--taglio)), 0 100%);
}

/* Erba in trasparenza (più larga della sezione: i bordi della foto restano fuori) */
.next-match-section::before {
    content: '';
    position: absolute;
    inset: 0 -14%;
    z-index: -2;
    background: url('../images/grass.jpg') center / cover no-repeat;
    opacity: 0.2;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 45%, #000 75%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 45%, #000 75%, transparent 100%);
}

.next-match-section::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        var(--grana),
        radial-gradient(55% 60% at 50% 62%, rgba(227, 25, 55, 0.26), transparent 70%);
}

.next-match-section .section-heading {
    margin-bottom: clamp(26px, 4vw, 40px);
}

.next-match-section .section-title {
    color: var(--bianco);
}

.next-match-section .eyebrow {
    color: var(--rosso-chiaro);
}

.next-match-section .eyebrow::after {
    content: '';
    width: 28px;
    height: 2px;
    background: currentColor;
}

@property --angolo {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

.match-card {
    position: relative;
    max-width: 940px;
    margin: 0 auto;
    padding: clamp(30px, 5vw, 56px) clamp(20px, 5vw, 56px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(22px, 3vw, 34px);
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: var(--raggio-lg);
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03));
    box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.09);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

/* Luce rossa che corre lungo il bordo della card */
.match-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    padding: 2px;
    border-radius: inherit;
    background: conic-gradient(from var(--angolo), transparent 0deg 250deg, var(--rosso-chiaro) 320deg, transparent 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: ruota-bordo 6s linear infinite;
    pointer-events: none;
}

@keyframes ruota-bordo {
    to { --angolo: 360deg; }
}

/* Finché db.json non è arrivato si vede solo "Caricamento..." */
.match-card[data-mode="loading"] > :not(.match-competition) {
    display: none;
}

.match-competition {
    padding: 8px 18px;
    border: 1px solid rgba(255, 77, 99, 0.5);
    border-radius: 3px;
    background: rgba(227, 25, 55, 0.16);
    color: #ff9aa7;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    transform: skewX(-10deg);
}

/* --- Sfida tra due squadre --- */
.match-main {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: clamp(12px, 4vw, 48px);
}

.match-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.match-team img {
    width: clamp(76px, 12vw, 128px);
    height: clamp(76px, 12vw, 128px);
    object-fit: contain;
    filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.55));
}

.match-team span {
    font-family: var(--font-titoli);
    font-size: clamp(1.4rem, 3.2vw, 2.4rem);
    line-height: 1;
    letter-spacing: 0.03em;
}

.match-vs {
    font-family: var(--font-titoli);
    font-size: clamp(2rem, 5vw, 3.6rem);
    font-style: italic;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.4);
}

/* --- Evento speciale o partitella in famiglia: titolo e stemma al posto della sfida --- */
.match-family h3 {
    font-family: var(--font-titoli);
    font-weight: 400;
    font-size: clamp(2.6rem, 7vw, 5rem);
    line-height: 0.95;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.match-family img {
    display: block;
    width: clamp(88px, 12vw, 124px);
    height: auto;
    margin: clamp(18px, 2.4vw, 26px) auto 0;
    filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.55));
}

.match-family p {
    margin-top: 16px;
    font-family: var(--font-titoli);
    font-size: clamp(1.3rem, 3vw, 1.9rem);
    letter-spacing: 0.06em;
    color: var(--rosso-chiaro);
}

/* Negli eventi il badge della competizione va sotto lo stemma */
.match-card[data-mode="event"] .match-competition { order: 1; }
.match-card[data-mode="event"] .match-countdown { order: 2; }
.match-card[data-mode="event"] .match-details { order: 3; }
.match-card[data-mode="event"] .match-actions { order: 4; }

/* --- Conto alla rovescia --- */
.match-countdown {
    display: flex;
    gap: clamp(8px, 2vw, 16px);
}

.countdown-unit {
    min-width: clamp(66px, 11vw, 96px);
    padding: 14px 8px 11px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 2px solid var(--rosso);
    border-radius: var(--raggio-sm);
    background: rgba(0, 0, 0, 0.4);
}

.countdown-unit strong {
    display: block;
    font-family: var(--font-titoli);
    font-weight: 400;
    font-size: clamp(1.9rem, 4.6vw, 3rem);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.countdown-unit small {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
}

/* --- Data, ora e luogo --- */
.match-details {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px clamp(22px, 4vw, 44px);
    padding-top: clamp(22px, 3vw, 30px);
    border-top: 1px solid rgba(255, 255, 255, 0.13);
}

.match-details li {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
}

.match-details i {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: var(--raggio-sm);
    background: rgba(227, 25, 55, 0.18);
    color: var(--rosso-chiaro);
}

.match-details small {
    display: block;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}

.match-details strong {
    font-weight: 500;
    line-height: 1.35;
    color: var(--bianco);
}

/* --- Aggiungi al calendario, indicazioni --- */
.match-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px 22px;
}

/* --- Fuori stagione --- */
.match-offseason p {
    font-family: var(--font-titoli);
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    line-height: 1.15;
    letter-spacing: 0.03em;
}


/* ==========================================================================
   05. ULTIME NEWS
   ========================================================================== */
@media (max-width: 992px) {
    /* Una in evidenza più quattro: niente card orfana in fondo */
    #main-news-grid .news-card:nth-child(n+6) {
        display: none;
    }
}

@media (max-width: 600px) {
    #main-news-grid .news-card:nth-child(n+5) {
        display: none;
    }
}


/* ==========================================================================
   06. CAROSELLO GIOCATORI
   ========================================================================== */
.squad-section {
    padding-block: calc(clamp(56px, 8vw, 104px) + var(--taglio));
    background: var(--nero);
    color: var(--bianco);
    clip-path: polygon(0 var(--taglio), 100% 0, 100% calc(100% - var(--taglio)), 0 100%);
}

.squad-section::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        var(--grana),
        radial-gradient(50% 70% at 100% 0%, rgba(227, 25, 55, 0.3), transparent 65%),
        radial-gradient(40% 60% at 0% 100%, rgba(227, 25, 55, 0.16), transparent 70%),
        var(--righe);
}

.squad-section.has-watermark::before {
    top: calc(var(--taglio) + 10px);
}

.squad-section .section-title {
    color: var(--bianco);
}

.squad-section .eyebrow {
    color: var(--rosso-chiaro);
}

.squad-controls {
    display: flex;
    align-items: center;
    gap: 10px 22px;
    flex-wrap: wrap;
}

.squad-arrows {
    display: flex;
    gap: 10px;
}

.squad-section .media-btn {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.25);
    color: var(--bianco);
}

/* Scorrimento orizzontale: parte allineato al contenuto e arriva al bordo dello schermo */
.squad-carousel {
    --rientro: max(var(--gutter), calc((100vw - var(--container)) / 2));
    display: flex;
    gap: clamp(12px, 1.6vw, 20px);
    padding: 14px var(--rientro) 28px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--rientro);
    scrollbar-width: none;
    cursor: grab;
}

.squad-carousel::-webkit-scrollbar {
    display: none;
}

.squad-carousel.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
    scroll-behavior: auto;
}

.squad-carousel.is-dragging .player-card {
    pointer-events: none;
}

.squad-carousel .player-card {
    flex: 0 0 clamp(190px, 21vw, 270px);
    scroll-snap-align: start;
}


/* ==========================================================================
   07. IL CLUB IN NUMERI
   ========================================================================== */
.club-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(32px, 6vw, 88px);
}

.club-media {
    position: relative;
}

/* Cornice rossa sfalsata dietro la foto */
.club-media::before {
    content: '';
    position: absolute;
    inset: 18px -18px -18px 18px;
    z-index: -1;
    border: 2px solid var(--rosso);
    border-radius: var(--raggio-lg);
}

.club-media img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--raggio-lg);
    box-shadow: var(--ombra-lg);
}

/* Targhetta con l'anno, a cavallo dell'angolo della foto */
.club-badge {
    position: absolute;
    left: -14px;
    bottom: 26px;
    padding: 16px 24px 14px;
    border-radius: var(--raggio-sm);
    background: var(--rosso);
    box-shadow: var(--ombra-rossa);
    color: var(--bianco);
    transform: skewX(-8deg);
}

.club-badge span {
    display: block;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    opacity: 0.85;
}

.club-badge strong {
    font-family: var(--font-titoli);
    font-weight: 400;
    font-size: clamp(2.4rem, 4.4vw, 3.6rem);
    line-height: 0.9;
}

.club-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
}

.club-quote {
    padding-left: 22px;
    border-left: 3px solid var(--rosso);
    font-size: clamp(1.05rem, 1.4vw, 1.2rem);
    line-height: 1.75;
    color: var(--grigio-scuro);
}

.club-stats {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-block: 10px;
}

.club-stats li {
    padding: 18px 16px 16px;
    border: 1px solid var(--border-color);
    border-top: 3px solid var(--nero);
    border-radius: var(--raggio-sm);
    background: var(--grigio-chiaro);
    transition: border-color var(--t), transform var(--t);
}

.club-stats li:hover {
    border-top-color: var(--rosso);
    transform: translateY(-4px);
}

.club-stats strong {
    display: block;
    font-family: var(--font-titoli);
    font-weight: 400;
    font-size: clamp(2.6rem, 5vw, 4rem);
    line-height: 0.9;
    color: var(--nero);
    font-variant-numeric: tabular-nums;
}

.club-stats span {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--grigio);
}


/* ==========================================================================
   08. MOSAICO MEDIA
   ========================================================================== */
.mosaic {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: clamp(150px, 17vw, 240px);
    gap: clamp(10px, 1.4vw, 18px);
}

.mosaic-item {
    position: relative;
    overflow: hidden;
    border-radius: var(--raggio);
    background: var(--nero);
    color: var(--bianco);
    animation: sali 0.6s var(--ease) backwards;
    animation-delay: calc(var(--i, 0) * 70ms);
}

.mosaic-item:first-child {
    grid-column: span 2;
    grid-row: span 2;
}

.mosaic-item img,
.mosaic-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.9s var(--ease), opacity var(--t);
}

.mosaic-item:hover img,
.mosaic-item:hover video {
    transform: scale(1.07);
    opacity: 0.85;
}

.mosaic-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11, 11, 14, 0.05) 30%, rgba(11, 11, 14, 0.82) 72%, rgba(11, 11, 14, 0.96) 100%);
    pointer-events: none;
}

.mosaic-item .play-button-overlay {
    width: 52px;
    height: 52px;
    font-size: 0.95rem;
}

.mosaic-caption {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 1;
    padding: 16px 18px;
    transform: translateY(6px);
    transition: transform var(--t);
}

.mosaic-item:hover .mosaic-caption {
    transform: translateY(0);
}

.mosaic-caption small {
    display: block;
    margin-bottom: 4px;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--rosso-chiaro);
}

.mosaic-caption strong {
    font-family: var(--font-titoli);
    font-weight: 400;
    font-size: 1.2rem;
    line-height: 1.05;
    letter-spacing: 0.03em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mosaic-item:first-child .mosaic-caption {
    padding: clamp(18px, 2.4vw, 30px);
}

.mosaic-item:first-child .mosaic-caption strong {
    font-size: clamp(1.6rem, 3vw, 2.6rem);
}


/* ==========================================================================
   09. FASCIA "SUPPORTACI"
   ========================================================================== */
.support-band {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(52px, 7vw, 92px) 0;
    background: linear-gradient(115deg, var(--rosso-scuro) 0%, var(--rosso) 48%, #f0364f 100%);
    color: var(--bianco);
}

.support-band::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        var(--grana),
        repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.06) 0 2px, transparent 2px 22px);
}

/* Stemma in filigrana */
.support-band::after {
    content: '';
    position: absolute;
    top: 50%;
    right: max(-60px, calc((100vw - var(--container)) / 2 - 120px));
    z-index: -1;
    width: clamp(240px, 34vw, 480px);
    aspect-ratio: 1;
    background: url('../images/logo.png') center / contain no-repeat;
    opacity: 0.1;
    filter: grayscale(1) brightness(3);
    transform: translateY(-50%) rotate(-12deg);
}

.support-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 28px 48px;
}

.support-content .eyebrow {
    color: var(--bianco);
}

.support-content h2 {
    margin-top: 10px;
    font-family: var(--font-titoli);
    font-weight: 400;
    font-size: clamp(2.6rem, 6vw, 4.6rem);
    line-height: 0.93;
    letter-spacing: 0.015em;
    text-transform: uppercase;
}

.support-content p {
    max-width: 56ch;
    margin-top: 14px;
    font-size: clamp(1rem, 1.3vw, 1.125rem);
    color: rgba(255, 255, 255, 0.9);
}

.support-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 22px;
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1100px) {
    .hero-social,
    .hero-counter {
        display: none;
    }
}

@media (max-width: 900px) {
    .club-layout {
        grid-template-columns: 1fr;
    }

    .club-media {
        margin-right: 18px;
    }

    .club-badge {
        left: -8px;
    }

    .mosaic {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: clamp(140px, 34vw, 240px);
    }
}

@media (max-width: 600px) {
    .match-details {
        flex-direction: column;
        align-items: flex-start;
        width: auto;
    }

    .hero-dots {
        bottom: 84px;
    }

    .ticker {
        margin-block: -28px -24px;
        padding: 12px 0;
    }

    .club-stats {
        gap: 8px;
    }

    .club-stats li {
        padding: 14px 10px 12px;
    }

    .squad-controls .btn {
        display: none;
    }
}