/*
Theme Name: Florence Open 2026
Theme URI: https://florenceopen.it
Author: BLURR
Description: Tema a blocchi del sito one page del Florence Open 2026, ATP Challenger 50 al Match Ball Firenze Country Club. Ogni valore arriva da theme.json.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.0
Version: 1.0.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: florence-open
Tags: block-theme, one-page, full-site-editing
*/

/* ============================================================================
   Florence Open 2026 — stili delle sezioni
   ----------------------------------------------------------------------------
   Ogni lunghezza e ogni colore arrivano da theme.json, che e la sola fonte di
   verita del progetto: qui dentro non si scrive mai un valore letterale.
   Eccezioni ammesse, le stesse del mockup piu una:
     1. le media query, che usano em (theme.json non ha il concetto di
        breakpoint e WordPress non ha controlli di spaziatura per breakpoint);
     2. i tag inline generati da un campo di testo ricco
        (.program-card__details strong, .article__content h2): quel markup lo
        scrive la redazione in Gutenberg e non puo portare classi;
     3. la <img> dentro le figure dei blocchi core: il markup lo scrive il core
        e l'immagine non porta classi proprie. Stessa famiglia della 2.
   La regola resta sempre annidata sotto una classe, cosi non esce dal suo blocco.
   ========================================================================== */


/* ============================================================================
   BASE LAYER
   L'unico punto del progetto in cui sono ammessi selettori di tag.
   Colore, corpo, famiglia e interlinee del testo corrente e dei titoli stanno
   in theme.json (styles.typography e styles.elements): qui resta solo cio che
   theme.json non sa esprimere.
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Le ancore del menu portano alla sezione scorrendo, non con uno scatto. */
html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  /* Niente scorrimento orizzontale, mai: basta un elemento che sborda di un
     pixel per aprire una fascia vuota a destra di tutta la pagina. clip e non
     hidden, cosi non si crea un contenitore di scorrimento e position: sticky
     continua a funzionare nei discendenti. */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

/* Famiglia, peso, interlinea e corpo dei titoli stanno in theme.json
   (styles.elements). Il margine no: theme.json non lo sa esprimere, e senza
   questa riga i titoli dentro le card prendono quello del browser e sfondano
   la velatura. */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}

p {
  margin: 0;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Terza eccezione, dichiarata in testa al file: Gutenberg annida sempre
   l'immagine in una <figure> e l'<img> non porta classi. Tutte le regole che
   danno una misura a un logo lavorano su questo selettore. */
.wp-block-image img,
.wp-block-post-featured-image img,
.wp-block-site-logo img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
}

/* Core mette margini propri su figure e separatori: il ritmo qui e solo gap. */
.wp-block-image,
.wp-block-separator,
.wp-block-buttons,
.wp-block-social-links {
  margin: 0;
}

/* Testo riservato ai lettori di schermo.
   Nel mockup il riquadro da un pixel stava in tokens.css, l'unico file dove i
   valori letterali erano ammessi. Qui non c'e un file del genere: il valore
   arriva dal token piu vicino della scala, border-width-thin, che vale
   esattamente un pixel. Non e una spaziatura e non e un bordo: e il riquadro
   di ritaglio, e nella scala non esiste niente di piu adatto. */
.visually-hidden {
  position: absolute;
  width: var(--wp--custom--border-width-thin);
  height: var(--wp--custom--border-width-thin);
  margin: calc(var(--wp--custom--border-width-thin) * -1);
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
  border: 0;
}


/* ============================================================================
   LARGHEZZE
   Le uniche tre classi di larghezza ammesse nel progetto.
   width: min() invece di max-width + padding, cosi il contenitore misura
   esattamente contentSize quando c'e spazio.
   ========================================================================== */

.is-content-width {
  width: min(100% - var(--wp--custom--gutter) * 2, var(--wp--style--global--content-size));
  margin-inline: auto;
}

.is-wide-width {
  width: min(100% - var(--wp--custom--gutter) * 2, var(--wp--style--global--wide-size));
  margin-inline: auto;
}

.is-full-width {
  width: 100%;
  max-width: none;
}


/* ============================================================================
   RITMO
   Spaziatura solo via gap. Mai margini sui figli.
   ========================================================================== */

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--40);
}

.row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--40);
}


/* ============================================================================
   IL RITMO PASSA SOLO DA GAP
   ----------------------------------------------------------------------------
   Core distanzia i blocchi dei suoi layout "flow" e "constrained" con un
   margine sui figli:

       :root :where(.is-layout-flow) > * { margin-block-start: 1.875rem; ... }

   e il valore lo scrive a mano nel foglio globale, quindi non basta azzerare
   --wp--style--block-gap: li dentro quella variabile non compare.

   Nel progetto quel meccanismo non serve mai: il ritmo passa solo da gap, e
   dentro un contenitore flex il margine si somma al gap. L'header veniva
   sessanta pixel piu alto del layout, le card news trenta piu basse, e le
   sezioni della home, che nel layout sono adiacenti, si staccavano.

   Qui la regola di core si spegne una volta sola, ricalcando il suo stesso
   selettore: :root pareggia la sua specificita e il nostro foglio viene dopo.
   E' l'unico punto in cui si tocca il margine di un figlio, ed e anche l'unica
   catena con ">" del progetto: il margine di core sta esattamente li, e solo
   li si puo disfare.

   blockGap resta 1.875rem in theme.json, dove deve stare: e da li che i layout
   flex di core (colonne, pulsanti, social) prendono il loro gap.
   ========================================================================== */

:root :where(.is-layout-flow) > *,
:root :where(.is-layout-constrained) > *,
:root .wp-site-blocks > * {
  margin-block: 0;
}


/* ----------------------------------------------------------------------------
   HEADER
   Misure prese dal pannello Design Specs dell'XD e portate nei token.
   Nel layout non c'e nessuna etichetta accanto all'icona hamburger.
   -------------------------------------------------------------------------- */

.site-header {
  position: relative;
  z-index: 2;
  background-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--base);
}

.site-header__inner {
  align-items: center;
  justify-content: space-between;
  padding-block: var(--wp--preset--spacing--40);
}

/* min-width 0 ovunque ci sia un logo: un figlio flex non scende sotto la
   larghezza intrinseca dell'immagine, e su telefono il lockup del footer, largo
   537, spingeva la pagina oltre lo schermo. */
.site-header__brand {
  align-items: center;
  gap: var(--wp--preset--spacing--40);
  min-width: 0;
}

/* Un figlio flex non scende sotto la larghezza intrinseca dell'immagine che
   contiene: senza min-width a zero il lockup del club, largo 537, spingeva la
   pagina oltre lo schermo. Vale per ogni riquadro che contiene un logo. */
.site-header__logo,
.site-header__club-logo,
.site-header__atp,
.site-footer__lockup,
.site-footer__club-logo {
  min-width: 0;
  max-width: 100%;
}

/* Il marchio e un core/site-logo, cosi si cambia da Aspetto senza toccare il
   markup. Core pero gli da una larghezza fissa con .is-default-size img, che e
   piu specifico di .site-header__logo img: qui si ripete la sua stessa classe
   per pareggiare la specificita, e il nostro foglio viene dopo il suo. La
   misura resta un'altezza massima, come per tutti gli altri loghi. */
.site-header__logo.is-default-size img,
.site-header__logo img {
  width: auto;
  max-height: var(--wp--custom--logo-height-lg);
}

/* Nel mockup era uno <span> vuoto. Qui e un gruppo vuoto: un blocco che
   l'editor sa mostrare e spostare, e che non porta stili di core da disfare.
   Un separatore sarebbe stato piu espressivo, ma core gli da cento pixel di larghezza
   con un selettore a tre classi e il filetto diventava un riquadro bianco. */
.site-header__divider {
  align-self: stretch;
  flex: 0 0 auto;
  width: var(--wp--custom--border-width-thin);
  background-color: var(--wp--preset--color--base);
}

.site-header__club {
  gap: var(--wp--preset--spacing--30);
  min-width: 0;
}

.site-header__club-logo img {
  max-height: var(--wp--custom--logo-height-sm);
}

.site-header__meta {
  color: var(--wp--preset--color--base);
  font-size: var(--wp--preset--font-size--small);
  letter-spacing: var(--wp--custom--letter-spacing-normal);
  line-height: var(--wp--custom--line-height-tight);
}

.site-header__actions {
  align-items: center;
  gap: var(--wp--preset--spacing--70);
}

.site-header__atp img {
  max-height: var(--wp--custom--logo-height-xs);
}


/* ----------------------------------------------------------------------------
   TOGGLE DEL MENU
   Nel layout XD l'hamburger c'e a tutte le larghezze, desktop compreso: non
   serve nessun breakpoint per il menu.
   E un blocco nostro e non il pulsante di core/navigation: quello apre un
   modale a tutto schermo che blocca lo scorrimento della pagina, e disegna due
   barre invece di tre. Le voci restano un core/navigation, quindi il menu si
   modifica sempre da Aspetto.
   -------------------------------------------------------------------------- */

.menu-toggle {
  display: inline-flex;
  padding: 0;
  border: none;
  background-color: transparent;
  color: var(--wp--preset--color--base);
  cursor: pointer;
}

.menu-toggle__box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: var(--wp--custom--icon-size-md);
  height: var(--wp--custom--logo-height-xs);
}

.menu-toggle__bar {
  display: block;
  width: 100%;
  height: var(--wp--custom--border-width-thick);
  background-color: currentColor;
  transition: transform var(--wp--custom--transition-base), opacity var(--wp--custom--transition-base);
}

/* Le tre barre diventano una X. Ogni barra deve arrivare al centro del box:
   meta altezza del box meno meta del proprio spessore. Scontando lo spessore
   intero la croce resta sfalsata di un pixel. */
.menu-toggle.is-open .menu-toggle__bar--top {
  transform: translateY(calc((var(--wp--custom--logo-height-xs) - var(--wp--custom--border-width-thick)) / 2)) rotate(45deg);
}

.menu-toggle.is-open .menu-toggle__bar--middle {
  opacity: 0;
}

.menu-toggle.is-open .menu-toggle__bar--bottom {
  transform: translateY(calc((var(--wp--custom--logo-height-xs) - var(--wp--custom--border-width-thick)) / -2)) rotate(-45deg);
}


/* ----------------------------------------------------------------------------
   TENDINA DEL MENU
   -------------------------------------------------------------------------- */

/* Tendina in overlay: esce da sotto l'header senza spingere giu la pagina.
   Niente top: la posizione di partenza e quella che avrebbe nel flusso, cioe
   subito sotto il contenitore dell'header. visibility accompagna opacity, cosi
   il menu chiuso esce dal flusso di tab. */
.site-menu {
  position: absolute;
  inset-inline: 0;
  z-index: 1;
  background-color: var(--wp--preset--color--primary);
  border-top: var(--wp--custom--border-width-thin) solid var(--wp--preset--color--border);
  box-shadow: var(--wp--custom--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(calc(var(--wp--preset--spacing--30) * -1));
  transition:
    opacity var(--wp--custom--transition-base),
    transform var(--wp--custom--transition-base),
    visibility var(--wp--custom--transition-base);
}

.site-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.site-menu__inner {
  padding-block: var(--wp--preset--spacing--60);
}

/* Le voci entrano sfalsate. L'indice lo scrive js/menu.js su ogni voce, perche
   le stampa core/navigation e non possiamo mettergli una classe per posizione;
   il passo resta qui. I token non hanno una scala di durate, quindi il valore
   sta nel foglio come nel mockup. */
.site-menu__nav .wp-block-navigation-item {
  opacity: 0;
  transform: translateY(calc(var(--wp--preset--spacing--30) * -1));
  transition:
    opacity var(--wp--custom--transition-base),
    transform var(--wp--custom--transition-base);
}

.site-menu.is-open .wp-block-navigation-item {
  opacity: 1;
  transform: translateY(0);
  transition-delay: calc(var(--fo-indice-voce, 0) * 40ms);
}

.site-menu__nav .wp-block-navigation__container {
  gap: var(--wp--preset--spacing--40);
}

.site-menu__nav .wp-block-navigation-item__content {
  color: var(--wp--preset--color--base);
  font-size: var(--wp--preset--font-size--large);
  font-weight: var(--wp--custom--font-weight-medium);
  letter-spacing: var(--wp--custom--letter-spacing-wide);
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--wp--custom--transition-base);
}

.site-menu__nav .wp-block-navigation-item__content:hover,
.site-menu__nav .wp-block-navigation-item__content:focus-visible {
  color: var(--wp--preset--color--base);
  text-decoration: underline;
}


/* ----------------------------------------------------------------------------
   FOOTER
   Misure prese dal pannello Design Specs dell'XD e portate nei token.
   A destra indirizzo e social sono allineati al testo del lockup Match Ball,
   non al simbolo.
   -------------------------------------------------------------------------- */

.site-footer {
  background-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--base);
}

.site-footer__inner {
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--70);
  padding-top: var(--wp--preset--spacing--60);
  padding-bottom: var(--wp--preset--spacing--70);
}

.site-footer__brand {
  gap: var(--wp--preset--spacing--40);
  min-width: 0;
}

.site-footer__lockup img {
  max-height: var(--wp--custom--logo-height-xl);
}

.site-footer__dates {
  font-size: var(--wp--preset--font-size--large);
  font-weight: var(--wp--custom--font-weight-semibold);
  letter-spacing: var(--wp--custom--letter-spacing-normal);
}

.site-footer__club {
  gap: var(--wp--preset--spacing--40);
  min-width: 0;
}

.site-footer__club-logo img {
  max-height: var(--wp--custom--logo-height-md);
}

/* Nel layout indirizzo e social partono dal testo del lockup, non dal simbolo. */
.site-footer__club-details {
  gap: var(--wp--preset--spacing--40);
  padding-inline-start: var(--wp--preset--spacing--70);
}

.site-footer__address {
  font-size: var(--wp--preset--font-size--small);
  font-style: normal;
  letter-spacing: var(--wp--custom--letter-spacing-normal);
  line-height: var(--wp--custom--line-height-tight);
}

.site-footer__address a {
  color: var(--wp--preset--color--base);
  text-decoration: none;
}

.site-footer__address a:hover,
.site-footer__address a:focus-visible {
  text-decoration: underline;
}

/* core/social-links: icone bianche della misura dell'XD, senza pastiglia. */
.site-footer__social {
  gap: var(--wp--preset--spacing--30);
  padding: 0;
}

.site-footer__social .wp-social-link {
  margin: 0;
  padding: 0;
  background-color: transparent;
  color: var(--wp--preset--color--base);
}

.site-footer__social .wp-social-link a {
  padding: 0;
  color: var(--wp--preset--color--base);
}

.site-footer__social .wp-social-link svg {
  width: var(--wp--custom--icon-size-sm);
  height: var(--wp--custom--icon-size-sm);
  fill: currentColor;
}

/* CREDITO
   Chiude la fascia su una riga sua, in corpo tiny come le diciture di
   patrocinio: e una dicitura, non testo corrente. */
.site-footer__credit {
  align-items: center;
  gap: var(--wp--preset--spacing--20);
  font-size: var(--wp--preset--font-size--tiny);
}

.site-footer__credit-label {
  letter-spacing: var(--wp--custom--letter-spacing-normal);
}

/* Il marchio resta bianco anche sotto il puntatore: niente stato, il cursore
   a manina e gia tutto quello che serve a dire che si clicca. Il contorno in
   accent resta solo per la tastiera, dove la manina non c'e e un focus
   invisibile lascerebbe fuori chi naviga in Tab. */
.site-footer__credit-link {
  display: inline-flex;
  color: var(--wp--preset--color--base);
  outline: calc(var(--wp--custom--border-width-thick) * 2) solid transparent;
  outline-offset: var(--wp--custom--border-width-thick);
  transition: outline-color var(--wp--custom--transition-base);
}

.site-footer__credit-link:focus-visible {
  outline-color: var(--wp--preset--color--accent);
}

/* Il marchio e alto una volta e mezza la riga che lo introduce: cosi la sua
   x-height resta poco sopra quella del testo e i due si leggono come una riga
   sola. Non e un gradino della scala dei loghi perche quella parte da
   --logo-height-xs, che qui vale quasi il doppio del necessario. */
.site-footer__credit-logo {
  height: 1.5em;
  width: auto;
  fill: currentColor;
}


/* ----------------------------------------------------------------------------
   NEWS
   Misure prese dal pannello Design Specs dell'XD. Nel layout il mosaico e piu
   largo di header e footer, qui sta nello stesso container di tutto il resto.
   Le larghezze delle colonne sono rapporti di flex-grow presi dalle misure del
   layout, cosi le proporzioni reggono a qualsiasi larghezza di finestra.
   -------------------------------------------------------------------------- */

.section--news .section__inner {
  padding-block: var(--wp--preset--spacing--50);
  gap: var(--wp--preset--spacing--30);
}

.news-row {
  gap: var(--wp--preset--spacing--30);
  align-items: stretch;
}

.news-card {
  position: relative;
  overflow: hidden;
}

.news-card--lead {
  flex: 1006 1 0;
  aspect-ratio: 1006 / 700;
}

.news-card--secondary {
  flex: 590 1 0;
  aspect-ratio: 590 / 500;
}

.news-panel--poster {
  flex: 495 1 0;
  aspect-ratio: 495 / 700;
}

.news-aside {
  flex: 300 1 0;
  gap: var(--wp--preset--spacing--30);
}

/* Base zero, non auto: e cio che tiene i due riquadri della stessa misura.
   Con base auto la larghezza arriva dal contenuto e sul telefono, dove stanno
   affiancati, i due venivano diversi. L'altezza gliela da la riga sul desktop
   e la proporzione nel breakpoint.
   Il filetto: i riquadri prima erano foto e avevano un bordo proprio; con i
   loghi su fondo bianco senza filetto sembrano sospesi sulla pagina. */
.news-panel--banner {
  flex: 1 1 0;
  border: var(--wp--custom--border-width-thin) solid var(--wp--preset--color--border);
}

.news-card__link {
  display: block;
  height: 100%;
  color: var(--wp--preset--color--base);
  text-decoration: none;
}

.news-card__media,
.news-panel__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Ingrandimento minimo in hover, solo sulle foto dei post: i tre riquadri
   fissi a destra non sono link e restano fermi. */
.news-card__media {
  transition: transform var(--wp--custom--transition-base);
}

.news-card__link:hover .news-card__media,
.news-card__link:focus-visible .news-card__media {
  transform: scale(1.03);
}

.news-panel {
  overflow: hidden;
}

/* Riquadri a rotazione: i contenuti stanno uno sopra l'altro e si scambiano in
   dissolvenza. L'altezza arriva dal flex della colonna, non dal contenuto. */
.banner-rotator {
  position: relative;
}

/* Nessuna proporzione propria: l'altezza la decide il riquadro, che ce l'ha
   dalla riga sul desktop e dalla proporzione nel breakpoint. Dandogliene una
   qui litigherebbe con quella del riquadro e la slide sborderebbe. */
.banner-rotator__slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  padding: var(--wp--preset--spacing--30);
  background-color: var(--wp--preset--color--base);
  opacity: 0;
  transition: opacity var(--wp--custom--transition-base);
}

/* Il riquadro che da la misura massima al logo. C'e sempre, con collegamento
   (e un <a>) o senza (e uno <span>): e questo l'anello che fa funzionare
   l'adattamento. Se il logo stesse dentro un <a> alto quanto il suo contenuto,
   il suo max-height non avrebbe niente a cui riferirsi e un logo alto uscirebbe
   dal riquadro. min-width e min-height a zero perche un figlio flex non scende
   sotto la misura intrinseca dell'immagine che contiene: senza, un logo grande
   allargherebbe la slide invece di rimpicciolirsi. */
.banner-rotator__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  text-decoration: none;
}

/* I loghi arrivano con proporzioni qualsiasi: uno stretto e alto e uno lungo e
   basso stanno nello stesso riquadro. Si adattano dentro invece di riempirlo,
   limitati su entrambi i lati, e il riquadro ha un fondo bianco.
   max-width e max-height insieme, con width e height automatiche: e il vincolo
   su entrambi i lati che tiene le proporzioni qualunque sia l'immagine
   caricata. object-fit e la rete di sicurezza per il caso in cui un attributo
   width o height stampato da WordPress vincesse sul calcolo. */
.banner-rotator__logo {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* La slide in vista torna nel flusso: e lei a dare l'altezza al riquadro. Con
   tutte le slide in posizione assoluta il riquadro non ha un'altezza propria,
   e sul telefono, dove non gliela da piu la riga flex, collassava: i banner
   uscivano dal riquadro e finivano sopra la fascia dei tabelloni. Dove il
   riquadro ha gia un'altezza sua (desktop, e sul telefono la proporzione del
   breakpoint) non cambia niente. */
.banner-rotator__slide.is-current {
  position: relative;
  height: 100%;
  opacity: 1;
}

/* Fascia scura sotto il testo. Non e un'ombra sulle lettere: e una velatura
   che parte dal fondo dell'immagine e sfuma verso l'alto, cosi il titolo si
   stacca dalla foto qualunque sia il soggetto. */
.news-card__scrim {
  position: absolute;
  inset: auto 0 0 0;
  height: 58%;
  background: var(--wp--custom--overlay-media);
  pointer-events: none;
}

.news-card__body {
  position: absolute;
  inset: auto auto var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--30);
  max-width: 63%;   /* XD: blocco testo 638 su 1006 */
}

.news-card--secondary .news-card__body {
  max-width: 85%;   /* XD: blocco testo 501 su 590 */
}

/* Le card piccole hanno il testo proporzionalmente piu alto: la fascia scura
   deve salire di conseguenza, altrimenti le prime righe restano scoperte. */
.news-card--secondary .news-card__scrim {
  height: 72%;
}

.news-card__title {
  font-weight: var(--wp--custom--font-weight-semibold);
  line-height: var(--wp--custom--line-height-heading);
}

.news-card__excerpt {
  font-weight: var(--wp--custom--font-weight-regular);
  line-height: var(--wp--custom--line-height-tight);
}

/* Nell'XD titolo ed estratto hanno la stessa misura, ma li il testo e un
   segnaposto di tre parole. Con contenuti veri l'estratto in regular finisce
   per pesare piu del titolo in bold: scende di un gradino. */
.news-card--lead .news-card__title {
  font-size: var(--wp--preset--font-size--x-large);
}

.news-card--lead .news-card__excerpt {
  font-size: var(--wp--preset--font-size--medium);
}

.news-card--secondary .news-card__title {
  font-size: var(--wp--preset--font-size--large);
}

.news-card--secondary .news-card__excerpt {
  font-size: var(--wp--preset--font-size--small);
}


/* ----------------------------------------------------------------------------
   TABELLONI E RISULTATI
   -------------------------------------------------------------------------- */

.section--draws {
  background-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--base);
}

.section--draws .section__inner {
  padding-block: var(--wp--preset--spacing--50);
  align-items: center;
  gap: var(--wp--preset--spacing--40);
}

.section__title {
  font-size: var(--wp--preset--font-size--large);
  font-weight: var(--wp--custom--font-weight-regular);
  letter-spacing: var(--wp--custom--letter-spacing-wide);
  text-transform: uppercase;
  text-align: center;
}

/* Le cinque voci stanno su una riga sola dentro il container: sono figli flex
   di pari larghezza. Il testo non va a capo, quindi quando la finestra e troppo
   stretta per tutte e cinque vanno a capo da sole, senza bisogno di breakpoint. */
.draws {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  gap: var(--wp--preset--spacing--30);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Niente min-width 0 qui: il testo del pill non va a capo, quindi la larghezza
   minima del contenuto e proprio cio che fa andare a capo la riga. Azzerandola
   i pill si stringono e il testo esce dal riquadro, allargando la pagina. */
.draws__item {
  flex: 1 1 0;
}

.draws__link {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--wp--custom--control-height);
  padding-inline: var(--wp--preset--spacing--30);
  border-radius: var(--wp--custom--radius-pill);
  background-color: var(--wp--preset--color--secondary);
  color: var(--wp--preset--color--base);
  font-size: var(--wp--preset--font-size--small);
  letter-spacing: var(--wp--custom--letter-spacing-normal);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  outline: calc(var(--wp--custom--border-width-thick) * 2) solid transparent;
  outline-offset: var(--wp--custom--border-width-thick);
  transition: outline-color var(--wp--custom--transition-base);
}

/* Come le schede del programma: il fondo resta quello, compare un contorno
   esterno in un verde piu chiaro. */
.draws__link:hover,
.draws__link:focus-visible {
  outline-color: var(--wp--preset--color--accent);
}

/* Finche al tabellone non e collegato nessun PDF la voce non e un link.
   Il riquadro pero resta identico a quello del layout, colore compreso: lo
   avevo schiarito per segnalare lo stato, ma il layout approvato non prevede
   una voce spenta e "non ancora disponibile" non e un'informazione che il
   cliente vuole dare al pubblico. L'unica differenza e che non si puo cliccare,
   e quella non si vede: e giusto cosi, perche un collegamento che apre una
   scheda vuota sarebbe peggio. */
.draws__link--empty {
  cursor: default;
}


/* ----------------------------------------------------------------------------
   OFFICIAL PROGRAM
   Schede da 325x350 su quattro colonne, angoli tondi, dall'XD. Ogni scheda e
   un link al documento della giornata, che si apre in una nuova scheda.
   Il colore della scheda e un campo: verde medio oppure verde scuro.
   -------------------------------------------------------------------------- */

.section--program .section__inner {
  padding-block: var(--wp--preset--spacing--50);
  gap: var(--wp--preset--spacing--50);
  align-items: center;
}

.program-list {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  gap: var(--wp--preset--spacing--40);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Quattro per riga: base 25% meno i tre vuoti, cosi le schede restano
   della stessa larghezza e vanno a capo in blocco quando lo spazio manca. */
.program-list__item {
  display: grid;
  flex: 1 1 calc(25% - var(--wp--preset--spacing--40));
  min-width: 0;
}

/* La proporzione 325x350 dell'XD entra come un riquadro vuoto sovrapposto alla
   scheda, nella stessa cella di griglia: la cella prende l'altezza maggiore fra
   i due, quindi la proporzione fa da minimo e il contenuto puo spingere piu in
   basso quando serve.
   L'altezza arriva da un padding in percentuale e non da aspect-ratio perche la
   percentuale si misura sulla larghezza e il riquadro puo restare largo zero.
   Con aspect-ratio il riquadro chiedeva anche una larghezza propria, la cella
   si allargava oltre la colonna e la pagina scorreva di lato.
   Serviva perche la proporzione regge solo alla larghezza piena: sotto i 1250
   di finestra le quattro colonne si stringono, il dettaglio va su quattro righe
   e con l'altezza bloccata dalla proporzione meta testo spariva sotto
   overflow: hidden. A 1400 non cambia niente: li il contenuto ci sta dentro e
   comanda la proporzione.
   E' l'unico punto del progetto in cui serve CSS Grid, e la sezione e gia
   marcata custom. */
.program-list__item::before {
  content: "";
  grid-area: 1 / 1;
  width: 0;
  padding-top: calc(350 / 325 * 100%);
}

/* I puntini compaiono solo dove le schede scorrono di lato. */
.program-dots {
  display: none;
  justify-content: center;
  gap: var(--wp--preset--spacing--30);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.program-dots__dot {
  width: var(--wp--preset--spacing--30);
  height: var(--wp--preset--spacing--30);
  padding: 0;
  border: none;
  border-radius: var(--wp--custom--radius-pill);
  background-color: var(--wp--preset--color--border);
  cursor: pointer;
  transition: background-color var(--wp--custom--transition-base);
}

.program-dots__dot.is-current {
  background-color: var(--wp--preset--color--secondary);
}

/* position relative non e decorativo: dentro la scheda c'e uno span
   .visually-hidden in posizione assoluta, e senza un antenato posizionato si
   ancora alla pagina. Nello slider le schede stanno molto oltre il bordo dello
   schermo, quindi quegli span restavano fuori dal ritaglio del carosello e
   allungavano il documento: era questo a far scorrere la pagina di lato. */
/* La scheda sta nella stessa cella del riquadro di proporzione qui sopra e la
   riempie: l'altezza la decide la cella, cioe il piu alto fra la proporzione e
   il contenuto. Le schede di una stessa riga restano alte uguali perche le
   celle sono figlie flex e si stirano sulla riga. */
.program-card {
  position: relative;
  grid-area: 1 / 1;
  display: flex;
  width: 100%;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--wp--custom--radius-lg);
  background-color: var(--wp--preset--color--secondary);
  color: var(--wp--preset--color--base);
  text-align: center;
  text-decoration: none;
  outline: calc(var(--wp--custom--border-width-thick) * 2) solid transparent;
  outline-offset: var(--wp--custom--border-width-thick);
  transition: outline-color var(--wp--custom--transition-base);
}

.program-card--dark {
  background-color: var(--wp--preset--color--primary);
}

/* In hover la scheda non cambia fondo: diventerebbe uguale a quelle dei due
   giorni finali, che sono verde scuro per scelta e non per stato. Compare
   invece un contorno esterno in un verde che non appartiene a nessuna delle
   due, quindi si legge su entrambe. E' un outline, non un bordo: sta fuori dal
   riquadro senza spostare nulla, e resta trasparente a riposo cosi il colore
   puo andare in dissolvenza. */
.program-card:hover,
.program-card:focus-visible {
  outline-color: var(--wp--preset--color--accent);
}

/* Nell'XD le tre fasce hanno altezze fisse: 178, 85 e 87 su una scheda da 350.
   Sono proporzioni, non contenuto, altrimenti una riga di dettaglio in piu
   alzerebbe la fascia grigia e le schede della stessa riga non combacerebbero.
   Nell'XD il blocco data parte a 33 dal bordo della scheda e giorno e numero
   sono attaccati, senza stacco: insieme sono un blocco di testo solo. */
.program-card__date {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: var(--wp--preset--spacing--40);
  padding-inline: var(--wp--preset--spacing--30);
}

.program-card__weekday {
  font-size: var(--wp--preset--font-size--medium);
  letter-spacing: var(--wp--custom--letter-spacing-normal);
  line-height: var(--wp--custom--line-height-tight);
  text-transform: uppercase;
}

.program-card__day {
  font-size: var(--wp--preset--font-size--xx-large);
  font-weight: var(--wp--custom--font-weight-bold);
  line-height: var(--wp--custom--line-height-heading);
}

/* La fascia grigia parte dalla proporzione dell'XD ma puo crescere se il testo
   non ci sta: e una base, non un tetto, e non puo restringersi (flex-shrink a
   zero), altrimenti il testo verrebbe schiacciato di nuovo.
   Lo spazio in piu lo cede la fascia della data, che ne ha da dare: e l'unica
   delle tre che puo restringersi senza perdere niente, perche contiene due
   righe sole. A 1400 il testo ci sta e non cambia niente. */
.program-card__details {
  display: flex;
  flex: 0 0 auto;
  min-height: 24.3%;
  align-items: center;
  justify-content: center;
  background-color: var(--wp--preset--color--surface);
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--small);
  line-height: var(--wp--custom--line-height-tight);
}

/* Il testo ricco vive qui dentro: il contenitore lo centra, questo mantiene
   il flusso inline (a capo e grassetto scritti in redazione). */
.program-card__text {
  display: block;
  width: 100%;
}

/* Seconda eccezione, dichiarata in testa al file: il grassetto arriva dal
   testo ricco scritto in redazione e non puo portare una classe. */
.program-card__details strong,
.program-card__details b {
  color: var(--wp--preset--color--secondary);
  font-weight: var(--wp--custom--font-weight-bold);
}

.program-card__details p {
  margin: 0;
}

.program-card__doc {
  display: flex;
  flex: 0 0 24.9%;
  align-items: center;
  justify-content: center;
  gap: var(--wp--preset--spacing--30);
}

/* Ingresso libero. Sta nella fascia in fondo e non accanto alla data perche
   la fascia della data e gia piena: il numero del giorno la riempie tutta e
   qualsiasi cosa aggiunta li sopra uscirebbe dalla scheda. Qui invece
   avanzavano trentacinque pixel. Bianca con il testo verde scuro, come il
   pulsante del live streaming nell'XD: e l'unico riempimento che si stacca da
   tutti e due i verdi delle schede. L'accento non va bene, e un verde chiaro
   e sul verde medio non si vede.
   Le giornate a pagamento non portano nessun contrassegno: l'assenza e
   l'informazione, come ha chiesto il cliente. */
.program-card__entry {
  flex: 0 0 auto;
  padding-block: var(--wp--preset--spacing--20);
  padding-inline: var(--wp--preset--spacing--30);
  border-radius: var(--wp--custom--radius-pill);
  background-color: var(--wp--preset--color--base);
  color: var(--wp--preset--color--contrast);
  font-size: var(--wp--preset--font-size--tiny);
  font-weight: var(--wp--custom--font-weight-bold);
  letter-spacing: var(--wp--custom--letter-spacing-wide);
  line-height: var(--wp--custom--line-height-tight);
  text-transform: uppercase;
  white-space: nowrap;
}

/* Font Awesome 6 Solid "file-pdf", la stessa dell'XD. */
.program-card__icon {
  width: var(--wp--custom--icon-size-sm);
  height: var(--wp--custom--icon-size-sm);
  fill: currentColor;
}


/* ----------------------------------------------------------------------------
   LIVE STREAMING
   Fascia a tutta larghezza sulla terra battuta. L'immagine e un blocco immagine,
   non uno sfondo CSS: resta sostituibile dalla Media Library e porta con se
   srcset e lazy loading. La velatura e un pseudo-elemento e non uno <span>:
   in Gutenberg uno span vuoto non sarebbe nessun blocco.
   -------------------------------------------------------------------------- */

.section--live {
  position: relative;
  color: var(--wp--preset--color--base);
}

/* Le tre cose della fascia si sovrappongono e l'ordine va scritto: nel mockup
   lo dava il DOM, perche la velatura era uno <span> messo fra la foto e il
   testo. Qui la velatura e uno pseudo-elemento, e uno pseudo-elemento ::before
   si disegna prima di tutto il contenuto: senza z-index finiva sotto la foto e
   non si vedeva. Dal fondo alla superficie: foto, velatura, testo. */
.live__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.live__media img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

/* Stessa logica delle card news, ma la fascia e larga e il testo sta a
   sinistra: la velatura parte dal bordo sinistro invece che dal fondo. */
.section--live::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--wp--custom--overlay-media-side);
  pointer-events: none;
}

.section--live .section__inner {
  position: relative;
  z-index: 2;
  align-items: center;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--50);
  padding-block: var(--wp--preset--spacing--50);
}

.live__title {
  font-size: var(--wp--preset--font-size--x-large);
  line-height: var(--wp--custom--line-height-heading);
}

.live__action {
  align-items: center;
  gap: var(--wp--preset--spacing--30);
  min-width: 0;
}

/* Pillola bianca con filetto verde e testo verde scuro, come nell'XD. La classe
   sta sul blocco pulsante, il colore e la misura vanno sull'ancora che core
   annida dentro. */
.live__button .wp-block-button__link {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--wp--custom--control-height-lg);
  padding-inline: var(--wp--preset--spacing--50);
  border: var(--wp--custom--border-width-thick) solid var(--wp--preset--color--secondary);
  border-radius: var(--wp--custom--radius-pill);
  background-color: var(--wp--preset--color--base);
  color: var(--wp--preset--color--primary);
  font-size: var(--wp--preset--font-size--medium);
  font-weight: var(--wp--custom--font-weight-medium);
  letter-spacing: var(--wp--custom--letter-spacing-normal);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--wp--custom--transition-base), color var(--wp--custom--transition-base);
}

.live__button .wp-block-button__link:hover,
.live__button .wp-block-button__link:focus-visible {
  background-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--base);
}

.live__atp img {
  max-height: var(--wp--custom--icon-size-sm);
}


/* ----------------------------------------------------------------------------
   SPONSOR
   Due griglie: sei loghi per riga per gli sponsor, quattro per i patrocini.
   Ogni logo vive in un riquadro di altezza fissa e si centra dentro, cosi
   proporzioni e ingombri diversi non sfalsano le righe.
   Nell'XD lo stacco fra le due sezioni di loghi e circa il triplo di quello
   fra titolo e griglia: sono due blocchi distinti, non quattro elementi
   distanziati allo stesso modo.
   -------------------------------------------------------------------------- */

.section--sponsor .section__inner {
  padding-block: var(--wp--preset--spacing--50);
  gap: var(--wp--preset--spacing--80);
  align-items: center;
}

/* Spegnendo tutti e due i gruppi la sezione resta senza niente dentro, ma
   terrebbe lo stesso il suo padding verticale: cento pixel di vuoto sopra
   "Come raggiungerci", che dal layout sembrano un errore. Qui sparisce del
   tutto, e il titolo della mappa segue la fascia del live streaming.
   Il gruppo che resta acceso, se e uno solo, non ha bisogno di niente: il gap
   sta fra i figli e con un figlio solo non c'e.
   :has() guarda dentro la sezione. E' l'unico modo di far dipendere un
   contenitore da cio che contiene senza aggiungere al markup una classe che
   qualcuno dovrebbe ricordarsi di togliere e rimettere a mano. */
.section--sponsor:not(:has(.sponsor-block)) {
  display: none;
}

.sponsor-block {
  width: 100%;
  align-items: center;
  gap: var(--wp--preset--spacing--60);
}

.sponsor-grid,
.patronage-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Nell'XD il passo fra i loghi e 265 su 1920 e i loghi arrivano a 205: il 77
   per cento del passo, il resto e aria. Senza limite un logo largo riempie la
   cella e tocca il vicino; con un limite troppo stretto sembrano perduti nel
   bianco. Sul nostro passo l'88 per cento della cella da le stesse proporzioni. */
.sponsor-grid {
  gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
}

.sponsor-grid__item {
  display: flex;
  flex: 0 1 calc(100% / 6 - var(--wp--preset--spacing--40));
  align-items: center;
  justify-content: center;
  height: var(--wp--custom--logo-slot-sponsor);
}

/* I livelli di sponsorizzazione non sono nell'XD: il layout ha una griglia
   sola. La gerarchia la fa la larghezza della cella, non un colore ne un
   riquadro: title sponsor da solo su mezza riga, main sponsor quattro per riga,
   sponsor sei per riga come prima. Il logo occupa l'88 per cento della cella in
   tutti e tre, quindi una cella piu larga e gia un logo piu grande, senza una
   regola in piu.
   L'altezza dei due livelli alti non e nella scala: --logo-height-xl e
   l'altezza del lockup del footer, ed e il valore piu vicino a cio che serve
   qui. Serve alta anche nel livello main, dove quasi tutti i loghi sono larghi
   e bassi e si fermano prima: la usa solo chi e quadrato, come U.S. Polo, che
   su uno slot basso resterebbe la meta dei vicini. */
.sponsor-grid--title .sponsor-grid__item {
  flex-basis: calc(100% / 2 - var(--wp--preset--spacing--40));
}

.sponsor-grid--main .sponsor-grid__item {
  flex-basis: calc(100% / 4 - var(--wp--preset--spacing--40));
}

/* Nei due livelli alti quell'altezza e un tetto del logo, non una misura della
   cella. Un logo molto largo e basso si ferma sulla larghezza della cella molto
   prima del tetto: il nastro 16:1 dell'automotive arriva a 34 di altezza, e
   dentro una cella alta 145 restava con 55 di aria sopra e altrettanti sotto.
   Fra titolo e logo si leggevano 103 invece dei 56 del title sponsor, e il
   vuoto sembrava un errore di spaziatura mentre era il logo a essere piatto.
   Col tetto spostato sul logo la cella segue il logo piu alto della riga: a
   riga piena non cambia niente, perche chi e quadrato arriva al tetto e gli
   altri si centrano come prima; su una riga di un logo solo l'aria sparisce.
   Il tetto deve essere una misura e non il 100 per cento della cella: su una
   cella di altezza automatica una percentuale non ha niente a cui riferirsi. */
.sponsor-grid--title .sponsor-grid__item,
.sponsor-grid--main .sponsor-grid__item {
  height: auto;
}

.sponsor-grid--title .sponsor-grid__logo,
.sponsor-grid--main .sponsor-grid__logo {
  max-height: var(--wp--custom--logo-height-xl);
}

/* Come .banner-rotator__link: e il riquadro che da la misura massima al logo,
   e c'e anche quando lo sponsor non ha un sito. Qui min-width a zero vale solo
   perche dentro c'e un'immagine; dove invece c'e il nome in chiaro la larghezza
   minima del contenuto e proprio cio che serve, e la regola sotto la rimette. */
.sponsor-grid__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  text-decoration: none;
}

.sponsor-grid__logo {
  max-width: 88%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Nel layout questi due sponsor sono scritti in chiaro, senza logo. Sono una
   parola sola e non vanno a capo: la cella non deve poter stringere sotto la
   loro larghezza, altrimenti il nome esce e finisce addosso al vicino. */
.sponsor-grid__name {
  flex: 0 0 auto;
  color: var(--wp--preset--color--contrast);
  font-size: var(--wp--preset--font-size--medium);
  letter-spacing: var(--wp--custom--letter-spacing-normal);
  text-align: center;
  text-transform: uppercase;
}

/* Nel layout i quattro patrocini non si allargano su tutta la riga: stanno
   sullo stesso passo di colonna degli sponsor, centrati, e ne occupano quattro
   su sei. Distribuirli su quattro colonne larghe li allontanerebbe fra loro. */
.patronage-grid {
  gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
}

.patronage-grid__item {
  flex: 0 1 calc(100% / 6 - var(--wp--preset--spacing--40));
  align-items: center;
  gap: var(--wp--preset--spacing--20);
  min-width: 0;
}

/* Nell'XD la dicitura e minuta e sta su una riga sola: e un'attribuzione, non
   testo da leggere. Al corpo "small" andava a capo e pesava piu del logo
   dell'ente. FITP non ne ha nessuna, ma lo spazio resta riservato con
   un'etichetta vuota, altrimenti il suo logo salirebbe rispetto agli altri. */
.patronage-grid__label {
  min-height: 1lh;
  color: var(--wp--preset--color--contrast);
  font-size: var(--wp--preset--font-size--tiny);
  text-align: center;
}

.patronage-grid__logo {
  max-width: 88%;
  max-height: var(--wp--custom--logo-slot-patronage);
  width: auto;
  height: auto;
  object-fit: contain;
}


/* ----------------------------------------------------------------------------
   MAPPA
   Fascia a tutta larghezza prima del footer, sull'indirizzo del club.
   -------------------------------------------------------------------------- */

.section--map .section__inner {
  align-items: center;
  padding-block: var(--wp--preset--spacing--50);
}

/* Larghezza piena e un tetto all'altezza.
   La larghezza va scritta: senza, e automatica, e quando max-height taglia
   l'altezza la proporzione se la riprende restringendo la larghezza. Sopra i
   1920 di finestra la fascia smetteva di arrivare a bordo pagina e lasciava
   una striscia vuota a destra. Con width al 100 per cento la larghezza e
   decisa, la proporzione da l'altezza e max-height la ferma. */
.map__canvas {
  width: 100%;
  aspect-ratio: 1920 / 420;
  max-height: var(--wp--custom--height-map);
}

.map__frame {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
}


/* ----------------------------------------------------------------------------
   PAGINA NON TROVATA
   Il numero grande, il titolo, una riga di spiegazione e la via d'uscita.
   Centrata e con molta aria sopra e sotto: e una pagina di passaggio, non di
   lettura, e l'unica cosa che deve fare e riportare qualcuno dove voleva
   andare. Nell'XD non c'e, quindi usa la scala e i colori di tutto il resto.
   -------------------------------------------------------------------------- */

.section--error .section__inner {
  align-items: center;
  gap: var(--wp--preset--spacing--40);
  padding-block: var(--wp--preset--spacing--80);
  text-align: center;
}

/* Il numero e decorativo: e un paragrafo e non un titolo, altrimenti la pagina
   avrebbe due intestazioni e la prima non direbbe niente a chi la ascolta. */
.error__code {
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--xx-large);
  font-weight: var(--wp--custom--font-weight-bold);
  line-height: var(--wp--custom--line-height-heading);
  letter-spacing: var(--wp--custom--letter-spacing-wide);
  color: var(--wp--preset--color--secondary);
}

.error__title {
  font-size: var(--wp--preset--font-size--x-large);
}

.error__text {
  color: var(--wp--preset--color--muted);
  line-height: var(--wp--custom--line-height-body);
}

/* Stessa pastiglia dei tabelloni, alla misura del pulsante del live streaming:
   qui e l'unica cosa cliccabile della pagina e deve pesare. */
.error__button .wp-block-button__link {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--wp--custom--control-height-lg);
  padding-inline: var(--wp--preset--spacing--50);
  border-radius: var(--wp--custom--radius-pill);
  background-color: var(--wp--preset--color--secondary);
  color: var(--wp--preset--color--base);
  font-size: var(--wp--preset--font-size--small);
  letter-spacing: var(--wp--custom--letter-spacing-normal);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  outline: calc(var(--wp--custom--border-width-thick) * 2) solid transparent;
  outline-offset: var(--wp--custom--border-width-thick);
  transition: outline-color var(--wp--custom--transition-base);
}

.error__button .wp-block-button__link:hover,
.error__button .wp-block-button__link:focus-visible {
  color: var(--wp--preset--color--base);
  outline-color: var(--wp--preset--color--accent);
}


/* ----------------------------------------------------------------------------
   DETTAGLIO NEWS
   -------------------------------------------------------------------------- */

.section--article .section__inner {
  padding-block: var(--wp--preset--spacing--70);
  gap: var(--wp--preset--spacing--40);
}

.article__date {
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--small);
  letter-spacing: var(--wp--custom--letter-spacing-wide);
  text-transform: uppercase;
}

.article__title {
  font-size: var(--wp--preset--font-size--x-large);
}

/* Stessa proporzione della card grande del mosaico: le foto in evidenza
   arrivano dal cliente in orizzontale o in verticale e la colonna di lettura
   non deve allungarsi a seconda del taglio. */
.article__media img {
  width: 100%;
  aspect-ratio: 1006 / 700;
  object-fit: cover;
  border-radius: var(--wp--custom--radius-md);
}

/* Il corpo del sito e medium (24): per un testo lungo da leggere era troppo.
   Nessun preset a 18px, la misura resta qui; sul telefono scende a x-small. */
.article__content {
  gap: var(--wp--preset--spacing--40);
  font-size: 1.125rem;
}

/* Le immagini dentro il corpo tengono le proporzioni originali: sono grafiche
   e locandine, il taglio della proporzione fissa mangerebbe la scritta. */
.article__content .wp-block-image img {
  aspect-ratio: auto;
  border-radius: var(--wp--custom--radius-md);
}

/* Seconda eccezione, dichiarata in testa al file: il corpo dell'articolo lo
   impagina la redazione in Gutenberg e i suoi titoletti non portano classi.
   Senza questa regola prenderebbero x-large da theme.json, cioe lo stesso
   corpo del titolo dell'articolo. La regola resta annidata sotto una classe. */
.article__content h2 {
  font-size: var(--wp--preset--font-size--large);
}

/* Il corpo dell'articolo e un core/post-content: i suoi figli stanno nel flusso
   e il ritmo glielo da il gap di .stack, non i margini di core. */
.article__content p,
.article__content h2,
.article__content h3 {
  margin: 0;
}


/* ----------------------------------------------------------------------------
   ENTRATA IN SCENA
   La classe .has-reveal la mette lo script: senza JavaScript non c'e nulla da
   rivelare e la pagina resta visibile.
   -------------------------------------------------------------------------- */

.has-reveal .reveal {
  opacity: 0;
  transform: translateY(var(--wp--preset--spacing--20));
  transition:
    opacity var(--wp--custom--transition-reveal),
    transform var(--wp--custom--transition-reveal);
}

.has-reveal .reveal.is-visible {
  opacity: 1;
  transform: none;
}


/* ----------------------------------------------------------------------------
   BREAKPOINT
   L'unico del progetto. Espresso in em perche i breakpoint non esistono in
   theme.json e non vanno trattati come token di design. 48em cade poco sotto
   il punto in cui core impila da solo il blocco Colonne.
   -------------------------------------------------------------------------- */

@media (max-width: 48em) {

  /* Hamburger piu piccolo. Le due barre della X si spostano di meta altezza
     del box: il valore va rifatto sulla misura nuova, se no la croce resta
     sfalsata. */
  .menu-toggle__box {
    width: var(--wp--custom--icon-size-sm);
    height: var(--wp--custom--icon-size-sm);
  }

  .menu-toggle.is-open .menu-toggle__bar--top {
    transform: translateY(calc((var(--wp--custom--icon-size-sm) - var(--wp--custom--border-width-thick)) / 2)) rotate(45deg);
  }

  .menu-toggle.is-open .menu-toggle__bar--bottom {
    transform: translateY(calc((var(--wp--custom--icon-size-sm) - var(--wp--custom--border-width-thick)) / -2)) rotate(-45deg);
  }

  /* MENU
     Voci piu piccole e piu vicine: a tendina aperta su un telefono le sei
     voci alla misura del desktop riempivano quasi tutta la schermata. */
  .site-menu__inner {
    padding-block: var(--wp--preset--spacing--40);
  }

  .site-menu__nav .wp-block-navigation__container {
    gap: var(--wp--preset--spacing--20);
  }

  .site-menu__nav .wp-block-navigation-item__content {
    font-size: var(--wp--preset--font-size--small);
  }

  /* HEADER
     Alla misura del desktop il solo header occupava mezza schermata prima
     della prima news: il logo scende di uno scalino e il lockup del club si
     mette in riga invece che in colonna.
     Una riga sola: i due marchi a sinistra col testo sotto, l'hamburger
     all'estremita destra. Il contenitore delle azioni sparisce come scatola,
     cosi i suoi due figli diventano figli diretti della riga: il pulsante
     puo stare accanto al marchio e il lockup ATP, che e largo quanto tutta
     la riga, va a capo da solo alla sua misura piena. */
  .site-header__inner {
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
  }

  .site-header__actions {
    display: contents;
  }

  .menu-toggle {
    order: 2;
    flex: 0 0 auto;
  }

  /* Stessa doppia scrittura della regola di base: senza .is-default-size questa
     riga perde contro quella, che e piu specifica, e il marchio resta alto
     duecento anche sul telefono.
     Il marchio del torneo e il primo nome dell'header e su telefono deve
     leggersi come tale. Col Mediolanum sopra e quasi quadrato, quindi alla
     misura dei lockup orizzontali "Florence Open" diventava una riga di
     caratteri alta pochi pixel. Qui prende due scalini e tutto cio che ha
     accanto ne cede uno: il club e le date sono informazione di servizio e
     stanno sotto al nome, non alla sua pari. */
  .site-header__logo.is-default-size img,
  .site-header__logo img {
    height: var(--wp--custom--logo-height-md);
    max-height: var(--wp--custom--logo-height-md);
  }

  /* I due marchi e le due righe di testo sono un blocco solo e si leggono
     come tale: affiancati e stretti, col testo sotto al lockup del club. */
  .site-header__brand {
    order: 1;
    flex: 1 1 0;
    min-width: 0;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--wp--preset--spacing--20);
  }

  .site-header__club {
    flex: 1 1 0;
    min-width: 0;
    gap: var(--wp--preset--spacing--20);
  }

  /* La colonna accanto al marchio e stretta, e a ogni scalino di corpo in piu
     "18 - 25 OTTOBRE 2026" va a capo lasciando "2026" orfano sulla seconda
     riga. Al corpo piu minuto della scala le due righe restano due.
     E' l'unico punto del sito in cui "tiny" porta un'informazione e non una
     dicitura: qui il testo e un'etichetta sotto a un marchio, non testo da
     leggere, ed e la sola misura che tiene la riga intera. */
  .site-header__meta {
    font-size: var(--wp--preset--font-size--tiny);
  }

  /* Il lockup del club e largo quasi sei volte la sua altezza: qui si misura
     sullo spazio che avanza accanto al marchio, non su un'altezza fissa.
     Non lo riempie tutto pero: a piena larghezza della colonna pesava quanto
     il marchio del torneo, e sono due cose di rango diverso. */
  .site-header__club-logo img {
    height: auto;
    max-width: 70%;
  }

  /* Riga sua, sotto al marchio. La base flex al 100 per cento e quella che lo
     manda a capo, quindi non si puo rimpicciolire con max-width: il valore
     entrerebbe nel calcolo della riga e il lockup tornerebbe accanto al
     marchio. Il riquadro resta largo quanto la riga e il segno si rimpiccio-
     lisce dentro, appoggiato a sinistra. */
  .site-header__atp {
    order: 3;
    flex: 0 0 100%;
  }

  .site-header__atp img {
    height: var(--wp--custom--icon-size-sm);
    object-fit: contain;
    object-position: left;
  }

  /* I lockup vanno a capo: il filetto verticale resterebbe orfano accanto ai loghi. */
  .site-header__divider {
    display: none;
  }

  .news-row {
    flex-direction: column;
  }

  /* In colonna il flex-basis a 0 delle colonne cade sull'altezza e azzera le
     card: il mosaico spariva e non c'era piu niente da cliccare. Con basis
     auto l'altezza torna a venire dalle proporzioni e dalle immagini. */
  .news-card,
  .news-panel--poster,
  .news-aside {
    flex-basis: auto;
  }

  /* Sul telefono la card grande non e piu grande delle altre: a 336 di
     larghezza il testo alla misura del desktop riempiva tutta la card e il
     titolo finiva sopra il cielo, fuori dalla velatura. Stessa proporzione e
     stesso corpo delle due piccole, cosi il testo resta dentro lo scrim. */
  .news-card--lead {
    aspect-ratio: 590 / 500;
  }

  .news-card--lead .news-card__body {
    max-width: 85%;
  }

  /* Con titoli ed estratti veri il testo copriva quasi tutta la card: corpi
     piu piccoli e righe contate, il resto finisce nei puntini. */
  .news-card--lead .news-card__title,
  .news-card--secondary .news-card__title {
    font-size: var(--wp--preset--font-size--small);
  }

  .news-card--lead .news-card__excerpt,
  .news-card--secondary .news-card__excerpt {
    font-size: var(--wp--preset--font-size--x-small);
  }

  .article__content {
    font-size: var(--wp--preset--font-size--x-small);
  }

  .news-card__title,
  .news-card__excerpt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
  }

  /* Su una card larga 336 il blocco di testo e proporzionalmente molto piu
     alto che sul desktop: la velatura sale con lui, altrimenti la prima riga
     del titolo resta sulla foto in chiaro. */
  .news-card__scrim {
    height: 75%;
  }

  /* I due banner sponsor stanno affiancati: sono riquadri di servizio, in
     colonna si mangiavano un'altra schermata. */
  .news-aside {
    flex-direction: row;
    align-items: flex-start;
  }

  /* Nel rotatore tutte le slide sono in posizione assoluta, quindi il riquadro
     non ha un'altezza propria: in colonna collassava a zero e i due banner
     sparivano. La proporzione e quella che il riquadro ha sul desktop. */
  .news-panel--banner {
    aspect-ratio: 300 / 235;
  }

  /* Le otto giornate impilate valgono cinque schermate, quindi scorrono di
     lato. Una scheda intera per volta, con aggancio netto: cosi si capisce che
     e uno slider e non la pagina che si allarga. overscroll-behavior impedisce
     allo swipe di propagarsi alla pagina quando si arriva in fondo. */
  .program-list {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .program-list::-webkit-scrollbar {
    display: none;
  }

  .program-list__item {
    flex: 0 0 100%;
    scroll-snap-align: center;
  }

  .program-dots {
    display: flex;
  }

  /* Alla larghezza del telefono le tre fasce a proporzione fissa dell'XD non
     reggono: su una scheda larga 153 il dettaglio ha bisogno del doppio dei
     40 pixel che la fascia grigia gli lascia, e meta testo spariva sotto
     overflow: hidden. Qui la scheda cresce col contenuto; la fascia data
     assorbe lo slack, quindi le due schede di una riga restano allineate in
     basso anche con dettagli di lunghezza diversa. */
  .program-list__item::before {
    display: none;
  }

  .program-card {
    height: 100%;
  }

  .program-card__date {
    padding-block: var(--wp--preset--spacing--30);
  }

  .program-card__details {
    flex: 0 0 auto;
    padding: var(--wp--preset--spacing--30);
  }

  .program-card__doc {
    flex: 0 0 auto;
    padding-block: var(--wp--preset--spacing--30);
  }

  /* Il pulsante non manda a capo l'etichetta, quindi la sua larghezza minima e
     il testo piu il padding: con quello da desktop, alla larghezza di un
     telefono piccolo sfonda, ed e l'unico punto in cui la pagina scorreva
     di lato.
     Vale per tutte le pastiglie della stessa misura, quindi anche per la via
     d'uscita della 404: e la stessa forma, e "TORNA ALLA HOME" e piu lungo di
     "LIVE STREAMING". Sotto i 320 di finestra usciva dalla colonna. */
  .live__button .wp-block-button__link,
  .error__button .wp-block-button__link {
    padding-inline: var(--wp--preset--spacing--30);
  }

  /* Tre loghi per riga invece di due: dodici sponsor su sei righe erano una
     schermata e mezza di soli marchi. Con gli stacchi da desktop l'aria fra
     le righe pesava piu dei loghi, quindi scendono di uno scalino. */
  .sponsor-grid__item {
    flex-basis: calc(100% / 3 - var(--wp--preset--spacing--40));
  }

  /* Il title sponsor prende tutta la riga: a mezza riga su uno schermo stretto
     il logo sarebbe piu piccolo di quelli del livello sotto. */
  .sponsor-grid--title .sponsor-grid__item {
    flex-basis: 100%;
  }

  .sponsor-grid--main .sponsor-grid__item {
    flex-basis: calc(50% - var(--wp--preset--spacing--40));
  }

  /* Su celle cosi strette e la larghezza a fermare quasi tutti i loghi molto
     prima dell'altezza da desktop: lo slot resterebbe mezzo vuoto e fra una
     riga e l'altra si aprirebbe una fascia bianca piu alta dei loghi stessi. */
  .sponsor-grid--title .sponsor-grid__logo,
  .sponsor-grid--main .sponsor-grid__logo {
    max-height: var(--wp--custom--logo-slot-patronage);
  }

  .sponsor-grid {
    gap: var(--wp--preset--spacing--40);
  }

  .sponsor-block {
    gap: var(--wp--preset--spacing--40);
  }

  /* Lo stacco fra le due sezioni resta quello di base: a 40 contro i 30
     interni i due blocchi sembravano uno solo. Cosi il rapporto fra i due
     stacchi e lo stesso del desktop. */
  .section--sponsor .section__inner {
    gap: var(--wp--preset--spacing--80);
  }

  .patronage-grid__item {
    flex-basis: calc(50% - var(--wp--preset--spacing--70));
  }

  /* FOOTER
     Il lockup di chiusura a 145 di altezza valeva mezza schermata da solo, e
     il rientro del blocco club e nato per una colonna larga 700: su 336 si
     mangia un settimo della riga. */
  .site-footer__inner {
    flex-direction: column;
    gap: var(--wp--preset--spacing--50);
    padding-top: var(--wp--preset--spacing--50);
    padding-bottom: var(--wp--preset--spacing--50);
  }

  .site-footer__lockup img {
    height: var(--wp--custom--logo-height-sm);
  }

  .site-footer__club-logo img {
    height: var(--wp--custom--logo-height-sm);
  }

  .site-footer__dates {
    font-size: var(--wp--preset--font-size--small);
  }

  .site-footer__address {
    font-size: var(--wp--preset--font-size--x-small);
  }

  .site-footer__club-details {
    padding-inline-start: 0;
  }

  /* Una fascia cosi bassa su schermo stretto non mostrerebbe niente. */
  .map__canvas {
    aspect-ratio: 4 / 3;
  }
}


/* ----------------------------------------------------------------------------
   MOVIMENTO RIDOTTO
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  .site-menu,
  .site-menu__nav .wp-block-navigation-item,
  .menu-toggle__bar,
  .banner-rotator__slide,
  .news-card__media {
    transition-duration: 1ms;
    transition-delay: 0s;
  }

  .news-card__link:hover .news-card__media,
  .news-card__link:focus-visible .news-card__media {
    transform: none;
  }
}