/* ============================================================================
   desktop-mobile-parity.css
   Generato automaticamente: applica su desktop (>= 721px) le stesse regole
   che gia' si vedono da mobile (estratte dai blocchi "@media (max-width...)"
   di styles.css e style.css), cosi' tutto il sito appare come la versione
   mobile tranne la Hero iniziale (esclusa volutamente, resta quella desktop
   con il carosello foto) e il blocco "Prossima gara/in diretta" al suo
   interno (".match-strip", anch'esso parte della Hero).
   Va caricato per ultimo (dopo styles.css, style.css, animations.css) cosi'
   vince nella cascata sulle regole desktop di base.
   ============================================================================ */

@media (min-width: 721px) {
  .facts,
  .cards,
  .commerce-layout,
  .documents-layout,
  .people-layout,
  .product-grid,
  .product-editor,
  .person-editor,
  .sponsor-editor,
  .section-grid {
    grid-template-columns: 1fr;
  }
  .service-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .people-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .sponsor-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .cart-panel {
    position: static;
  }
  .history-layout,
  .history-bottom {
    grid-template-columns: 1fr;
  }
  .history-archive-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .club-topbar {
    align-items: flex-start;
    flex-direction: column;
  }
  h1 {
    font-size: clamp(2.7rem, 15vw, 4.7rem);
  }
  .hub-card {
    min-height: 240px;
  }
  .facts {
    grid-template-columns: 1fr 1fr;
  }
  .service-strip {
    grid-template-columns: 1fr;
  }
  .service-strip a {
    min-height: 138px;
  }
  .chat-form {
    grid-template-columns: 1fr;
  }
  .teams,
  .teams > div,
  .gallery-grid,
  .fan-gallery-grid,
  .history-archive-grid,
  .people-grid,
  .sponsor-grid,
  .product-actions,
  .cart-row,
  .document-row,
  .social-links {
    grid-template-columns: 1fr;
  }
  .teams strong {
    font-size: 2.4rem;
  }
  .versus {
    text-align: center;
  }
  .section-head,
  .site-footer {
    align-items: flex-start;
    flex-direction: column;
  }
  .club-timeline li,
  .identity-card div {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .stats-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .stats-card-grid,
  .stats-leaders {
    grid-template-columns: minmax(0, 1fr);
  }
  .stats-card-grid article {
    padding: 14px;
  }
  .videos-grid,
  .csr-grid,
  .academy-programs {
    grid-template-columns: minmax(0, 1fr);
  }
  .player-profile-head,
  .sponsor-profile-head {
    flex-direction: column;
    align-items: flex-start;
  }

  /* --- da style.css --- */

  #news {
    display: none;
  }
  #news.news-panel-open {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 9990;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  #news .news-panel-close {
    display: none;
  }
  #news.news-panel-open .news-panel-close {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #news .news-category-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }
  #news .news-category-group:not(.is-expanded) .news-category-cards .article-card:nth-child(n+7) {
    display: none;
  }
  #news .news-show-more {
    display: flex;
    width: 100%;
    margin-top: 4px;
  }
  #squad,
  #history,
  #shop {
    display: none;
  }
  #squad.mobile-panel-open,
  #history.mobile-panel-open,
  #shop.mobile-panel-open {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 9990;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    
  }
  #squad.mobile-panel-open {
    background: linear-gradient(180deg, var(--white), #d8f3ff);
  }
  #squad .mobile-panel-close,
  #history .mobile-panel-close,
  #shop .mobile-panel-close {
    display: none;
  }
  #squad.mobile-panel-open .mobile-panel-close,
  #history.mobile-panel-open .mobile-panel-close,
  #shop.mobile-panel-open .mobile-panel-close {
    display: flex;
    align-items: center;
    justify-content: center;
    
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 9991;
  }
  .home-dashboard,
  .single-article-card,
  .contacts-layout {
    
    grid-template-columns: minmax(0, 1fr);
  }
  .home-news-grid,
  .modern-news-grid,
  .youth-grid,
  .partner-levels {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .privacy-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .home-news-grid,
  .modern-news-grid,
  .youth-grid,
  .partner-levels {
    grid-template-columns: minmax(0, 1fr);
  }
  .privacy-grid,
  .cookie-banner {
    grid-template-columns: minmax(0, 1fr);
  }
  .home-dashboard,
  .history-section,
  .youth-section,
  .calendar-section,
  .standings-section,
  .contacts-section,
  .privacy-section {
    padding-top: 76px;
    padding-bottom: 76px;
  }
  .single-article-card {
    min-height: 460px;
  }
  .photo-lightbox-nav {
    width: 42px;
    height: 42px;
    font-size: 1.6rem;
  }
  .service-strip {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-flow: row;
    grid-auto-columns: auto;
    overflow-x: visible;
    scroll-snap-type: none;
  }
  .service-strip a {
    min-height: 150px;
    scroll-snap-align: none;
  }
  .standings-table-wrap {
    overflow-x: visible;
  }
  .standings-table {
    min-width: 0;
    table-layout: fixed;
    font-size: .78rem;
  }
  .standings-table th,
  .standings-table td {
    padding: 10px 5px;
  }
  .standings-table th:first-child,
  .standings-table td:first-child {
    width: 34px;
  }
  .standings-table th:nth-child(2),
  .standings-table td:nth-child(2) {
    width: 38%;
  }
  .falchetto-secret {
    bottom: 14px;
    padding: 16px;
  }
  .home-dashboard,
  .history-section,
  .youth-section,
  .calendar-section,
  .standings-section,
  .contacts-section,
  .privacy-section,
  .falchetto-section,
  .squad-section,
  .documents-section,
  .sponsors-section,
  .ecommerce-section,
  .sources,
  .organigramma-section,
  .membership-campaign-section,
  .corporate-documents-section,
  .accreditations-section,
  .roster-dialog-section,
  .stadium-section {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  .section-head h2,
  .section-mini-head h2 {
    font-size: 2.25rem;
    line-height: 1;
  }
  .privacy-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .privacy-policy summary {
    padding-left: 16px;
  }
  .privacy-policy details p,
  .legal-review-note {
    padding-left: 16px;
    padding-right: 16px;
  }
  .site-footer {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    padding: 34px 16px;
  }
  .footer-club,
  .footer-technical-partner,
  .footer-legal {
    grid-column: auto;
  }
  .footer-technical-partner {
    justify-self: start;
  }
  .footer-legal {
    justify-content: flex-start;
  }
  .footer-socials {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .footer-socials a {
    min-height: 82px;
    flex-direction: column;
    gap: 6px;
  }
  .cookie-banner {
    left: 8px;
    right: 8px;
    bottom: 8px;
    max-height: calc(100vh - 16px);
    overflow-y: auto;
  }
  .payment-methods {
    grid-template-columns: minmax(0, 1fr);
  }
  .order-archive-head {
    align-items: stretch;
    flex-direction: column;
  }
  .corporate-document-row {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
  }
  .club-falco-card-gallery {
    grid-template-columns: minmax(0, 1fr);
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
  }
  .newsletter-box {
    grid-template-columns: minmax(0, 1fr);
  }
  .accreditation-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .organigramma-grid,
  .membership-campaign-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
  .accreditation-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .stadium-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .stadium-photo img {
    min-height: 220px;
  }

  /* ==========================================================================
     Rifiniture manuali richieste dopo la prima verifica dal vivo su desktop
     (le regole automatiche qui sopra, prese di peso da mobile, non andavano
     bene per alcuni blocchi): stanno per ultime cosi' vincono su tutto il
     resto del file a parita' di specificita'.
     ========================================================================== */

  /* 1) Lo stemma semi-trasparente decorativo (".hero::after", vedi styles.css)
     resta com'era su mobile (nascosto) ma va tolto anche su desktop: non e'
     un errore mio, e' il vecchio comportamento gia' presente prima di
     queste modifiche, tolto ora su richiesta esplicita. */
  .hero::after {
    display: none;
  }

  /* 1bis) L'alone bianco intorno allo stemma della Hero (".hero-logo") era
     segnalato anche su mobile, quindi la correzione ora vive direttamente
     nella regola di base in style.css (si applica ovunque) invece che solo
     qui: non serve piu' un override desktop separato. */

  /* 2) Home "Dal mondo biancoazzurro": sempre 3 card (vedi anche app.js,
     renderArticles). ".home-news-grid" di base e' un carosello a
     scorrimento orizzontale (display:flex, pensato per il touch su
     mobile): su schermo largo, con solo 3 card, restava incollato a
     sinistra lasciando un enorme vuoto bianco a destra (niente scroll
     orizzontale su desktop, quindi niente motivo di usare un flex qui).
     Su desktop diventa una vera griglia a 3 colonne che riempie tutta la
     larghezza della sezione, un aspetto piu' curato per un sito da PC. Su
     mobile non cambia nulla (il carosello flex resta quello di
     style.css). */
  .home-news-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    overflow: visible;
  }
  .home-news-grid article {
    flex-basis: auto;
  }

  /* 3) Sezione Stadio: la foto tornava a schermo intero perche' sopra la
     rendiamo a colonna singola come su mobile. Qui ripristiniamo
     l'affiancamento foto/informazioni con una foto di dimensioni contenute,
     piu' adatta a un layout da desktop. */
  .stadium-layout {
    grid-template-columns: minmax(260px, 380px) minmax(0, 1fr);
    align-items: start;
  }
  .stadium-photo img {
    min-height: 240px;
    max-height: 300px;
  }

  /* 4) Galleria "Momenti biancoazzurri": nasconde il messaggio placeholder
     ("Le foto della Redazione saranno pubblicate qui a breve") su desktop.
     Selettore volutamente ristretto a "#gallery" cosi' non tocca lo stesso
     messaggio nella sezione Tifosi (#fans), che usa la stessa classe. */
  #gallery .fan-gallery-empty {
    display: none;
  }

  /* 5) Foto tifosi (#fans): tornavano a colonna singola (una foto enorme a
     riga) per lo stesso motivo del punto 3. Griglia multi-colonna adatta a
     schermo largo, con foto piu' piccole e leggibili tutte insieme. */
  #fans .fan-gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
  }
  #fans .fan-photo-card {
    min-height: 0;
  }

  /* 6) Sponsor: la griglia forzata a colonna singola (con card altissime,
     pensate per il dito che scorre su un telefono) non funziona su
     desktop. Griglia a colonne flessibili, dimensione card piu' equilibrata
     per uno schermo grande. */
  .sponsor-grid {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 18px;
  }
  .sponsor-card {
    min-height: 240px;
    grid-template-rows: 100px 1fr auto;
  }
  .sponsor-card-text-only {
    min-height: 130px;
    grid-template-rows: 1fr auto;
  }

  /* ==========================================================================
     Seconda rifinitura dopo un altro giro di verifica dal vivo.
     ========================================================================== */

  /* 7) Sezione News aperta come pannello: le card (".cards.news-category-
     cards", vedi app.js renderArticles) erano rimaste a colonna singola
     come su mobile, quindi a schermo largo la foto 16:9 di ogni card
     diventava enorme. Su desktop tornano su piu' colonne (quante ci stanno
     in base alla larghezza), foto quindi di dimensioni normali. */
  #news .cards {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }

  /* 8) Foto "Momenti biancoazzurri" (".gallery-grid", carosello orizzontale)
     e "Tifosi biancoazzurri" (".fan-gallery-grid", griglia): leggermente
     piu' grandi su desktop rispetto al primo giro di correzioni. */
  .photo-tile {
    flex-basis: clamp(240px, 22vw, 380px);
  }
  #fans .fan-gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  }

  /* 9) Footer: il Technical Partner (".footer-technical-partner") finiva
     lontano dal blocco societa' (".footer-club") perche' sopra il footer
     e' diventato a colonna singola come su mobile, con lo stesso gap
     uniforme di tutti gli altri blocchi (link legali, social, copyright).
     Qui i due blocchi vengono messi sulla stessa riga, vicini, mentre il
     resto del footer resta impilato normalmente sotto. */
  .site-footer {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-areas:
      "club partner"
      "legal legal"
      "socials socials"
      "note note";
    column-gap: 32px;
    row-gap: 18px;
    justify-content: start;
    align-items: center;
  }
  .footer-club {
    grid-area: club;
  }
  .footer-technical-partner {
    grid-area: partner;
    justify-self: start;
  }
  .footer-legal {
    grid-area: legal;
    margin-top: 8px;
  }
  .footer-socials {
    grid-area: socials;
  }
  .footer-note {
    grid-area: note;
  }

  /* ==========================================================================
     Terza rifinitura: sezione Shop su desktop + rimozione animazioni.
     ========================================================================== */

  /* 10) Sezione Shop (".commerce-layout" = griglia prodotti + carrello,
     ".product-grid" = card prodotti): erano rimaste a colonna singola come
     su mobile (dalla riga di estrazione automatica in cima a questo file),
     quindi su desktop il carrello finiva impilato sotto i prodotti a piena
     larghezza e le card prodotto diventavano larghe e sproporzionate.
     Qui si ripristina il layout a due colonne (prodotti + carrello fisso a
     lato, che segue lo scroll) con le card prodotto su piu' colonne. */
  .commerce-layout {
    grid-template-columns: minmax(0, 1fr) minmax(310px, 380px);
    align-items: start;
  }
  .cart-panel {
    position: sticky;
    top: 98px;
  }
  /* Qui SENZA "align-items: start": il vero motivo del grande vuoto bianco
     era ".commerce-layout" (qui sopra) che allungava tutta la colonna
     prodotti all'altezza del carrello a fianco - risolto con "align-items:
     start" li'. Dentro ".product-grid" invece l'allineamento di default
     ("stretch") va bene ed e' voluto: rende tutte le card della stessa riga
     alte uguali (con titoli su una o due righe, come "Abbonamento Tribuna"
     contro "Abbonamento Donne e Over 65", altrimenti risultavano di
     dimensioni diverse tra loro) e prezzo/tasto "Aggiungi" restano ancorati
     in fondo alla card grazie a ".product-card { grid-template-rows: 118px
     1fr auto }" qui sotto, senza piu' il vuoto enorme di prima. */
  .product-grid {
    /* "auto-fit" (non "auto-fill"): con poche card, "auto-fill" avrebbe
       comunque creato colonne vuote invisibili fino a riempire la
       larghezza, restringendo le card reali. "auto-fit" fa collassare le
       colonne vuote, cosi' le card presenti si allargano a riempire tutto
       lo spazio disponibile, quante che siano. */
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
  .product-actions {
    grid-template-columns: 1fr;
  }
  .cart-row {
    grid-template-columns: 1fr auto;
  }
}

/* 11) Rimozione di tutte le animazioni/transizioni del sito, richiesta
   esplicitamente sia per mobile che desktop (quindi FUORI dal blocco
   "@media (min-width: 721px)" qui sopra, cosi' vale su ogni larghezza).
   Copre transizioni hover, animazioni CSS (@keyframes) ed effetti di
   ingresso/scroll. Il cambio slide del carosello foto della Hero e'
   comandato da JavaScript, ma il MOVIMENTO (lo scorrimento laterale da
   una foto all'altra) e' una transizione CSS vera e propria
   (".hero-photo-track", vedi styles.css: "transition: transform .6s...")
   quindi ANCHE quello veniva azzerato da qui sotto (le foto cambiavano di
   scatto invece di scorrere) - vedi punto 13 piu' in basso per l'eccezione,
   solo su desktop come richiesto (su mobile lo scatto resta, come tutto
   il resto).
   Durata ".01ms" invece di "0s": stesso identico risultato a video (nessun
   movimento visibile), ma e' la tecnica gia' usata in questo stesso file
   (styles.css, blocco "@media (prefers-reduced-motion: reduce)" qui sopra
   nel file, non toccato) - un browser non genera l'evento "transitionend"/
   "animationend" per una durata di ESATTAMENTE 0s, quindi se in futuro
   qualche script dovesse aspettare quell'evento per continuare, con "0s"
   resterebbe bloccato per sempre. Stesso ragionamento per
   "animation-iteration-count: 1": ferma anche i loop infiniti (es. i "glow"
   decorativi della Hero) dopo un solo giro invece di lasciarli girare. */
*,
*::before,
*::after {
  animation-duration: .01ms !important;
  animation-delay: 0s !important;
  animation-iteration-count: 1 !important;
  transition-duration: .01ms !important;
  transition-delay: 0s !important;
  scroll-behavior: auto !important;
}

/* 12) Eccezione: la striscia sponsor che scorre in loop (".sponsor-track",
   vedi styles.css) NON e' una decorazione ma la funzione stessa di quella
   sezione (mostra tutti gli sponsor principali in sequenza) - azzerarne la
   durata la fermava del tutto, come segnalato. Qui le viene ridata la sua
   animazione originale (durata E ripetizione infinita), l'unica eccezione
   alla rimozione globale qui sopra. */
.sponsor-track {
  animation-duration: 36s !important;
  animation-delay: 0s !important;
  animation-iteration-count: infinite !important;
}

/* 13) Eccezione: lo scorrimento tra le foto della Hero (".hero-photo-track",
   vedi styles.css), SOLO su desktop come richiesto esplicitamente (su
   mobile le foto continuano a cambiare di scatto, senza animazione, come
   tutto il resto del sito). Stessa durata originale (.6s) della regola di
   base in styles.css. */
@media (min-width: 721px) {
  .hero-photo-track {
    transition-duration: .6s !important;
    transition-delay: 0s !important;
  }
}