/*
 * Layout condiviso — intestazione, piè di pagina e primitive di card/lista.
 *
 * Caricato su OGNI pagina (homepage e pagine interne, M9): header-p21.php e
 * footer-p21.php sono riusati ovunque tramite header.php/footer.php, quindi
 * il loro CSS non può restare solo in home.css. Le card (.p21-card,
 * .p21-cards-3...) sono qui per lo stesso motivo: servono anche alle
 * pagine di elenco (progetti, storie, news), non solo alla homepage.
 */

/*
 * TheGem imposta `html { font-size: 62.5% }` (thegem-reset.css) per il
 * proprio sistema di misura — 1rem = 10px, non i 16px di serie del browser.
 * Sulla homepage non ha effetto (thegem-reset non viene caricato lì), ma
 * sulle pagine interne, dove TheGem resta caricato apposta (§5 del piano),
 * ridurrebbe silenziosamente TUTTO ciò che nel nostro design system è
 * espresso in rem — nav, testo dei contenuti, badge — a poco più della metà
 * della dimensione voluta. Si ripristina qui la base standard: nessun file
 * del tema padre viene toccato, vince per ordine di caricamento in cascata.
 */
html { font-size: 100%; }

:root { --p21-header-h: 176px; }

/* ========================================================================
   HEADER
   ======================================================================== */
.p21-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255, 255, 255, 0.96);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--p21-grey-100);
}
.admin-bar .p21-header { top: 32px; }

.p21-header__inner {
	max-width: var(--p21-container);
	margin-inline: auto;
	padding: 12px var(--p21-gutter);
	display: flex;
	align-items: center;
	gap: 28px;
}

.p21-header__logo { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; }
.p21-header__logo img {
	height: 152px;
	width: auto;
	transition: height var(--p21-duration-fast) var(--p21-ease);
}

.p21-nav { margin-left: auto; }
.p21-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 22px;
}
.p21-nav a {
	font-family: var(--p21-font-display);
	font-weight: 600;
	font-size: 0.875rem;
	line-height: 1;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--p21-ink);
	text-decoration: none;
	padding: 10px 0;
	border-bottom: 2px solid transparent;
	white-space: nowrap;
}
.p21-nav a:hover,
.p21-nav a:focus-visible { color: var(--p21-cyan-text); border-bottom-color: var(--p21-cyan-text); }
.p21-nav .current-menu-item > a { color: var(--p21-cyan-text); border-bottom-color: var(--p21-cyan); }

.p21-header__cta { margin-left: 8px; }

.p21-burger {
	display: none;
	width: 48px; height: 48px;
	/* flex-shrink:0 — senza, in un header stretto il bottone si comprimeva
	   fino a 38px di larghezza (misurato dal vivo, QA M10): sotto la soglia
	   di 44×44px richiesta per i target touch. */
	flex-shrink: 0;
	border: 2px solid var(--p21-grey-200);
	border-radius: var(--p21-radius-md);
	background: var(--p21-white);
	place-items: center;
	cursor: pointer;
	margin-left: auto;
}

/* --- Menu mobile a tendina ---------------------------------------------- */
.p21-drawer {
	display: none;
	border-top: 1px solid var(--p21-grey-100);
	background: var(--p21-white);
	padding: var(--p21-space-4) var(--p21-gutter) var(--p21-space-6);
}
.p21-drawer[data-open="true"] { display: block; }
.p21-drawer ul { list-style: none; margin: 0; padding: 0; }
.p21-drawer li { margin: 0; }
.p21-drawer a {
	display: flex;
	align-items: center;
	min-height: var(--p21-touch-target);
	padding: var(--p21-space-3) 0;
	font-family: var(--p21-font-display);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--p21-ink);
	text-decoration: none;
	border-bottom: 1px solid var(--p21-grey-100);
}
.p21-drawer a:hover { color: var(--p21-cyan-text); }

/* ========================================================================
   CARD E LISTE — usate da homepage (progetti, storie, news) e dalle
   pagine di elenco delle pagine interne.
   ======================================================================== */
.p21-head-row {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 24px;
	margin-bottom: 36px;
	flex-wrap: wrap;
}
.p21-head-row__text { max-width: 620px; }

.p21-cards-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.p21-cards-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }

/* Intestazione di ogni blocco anno nella pagina News
   (template-parts/listing-by-year.php). */
.p21-year-heading {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin: 56px 0 24px;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--p21-grey-200);
	font-size: 1.75rem;
	color: var(--p21-ink);
}
.p21-year-heading:first-child { margin-top: 0; }
.p21-year-heading__count {
	font-family: var(--p21-font-body);
	font-size: 0.9375rem;
	font-weight: 400;
	color: var(--p21-grey-600);
}

.p21-card {
	background: var(--p21-white);
	border: 1px solid var(--p21-grey-200);
	border-radius: var(--p21-radius-xl);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: var(--p21-shadow-sm);
	transition: box-shadow var(--p21-duration-fast) var(--p21-ease),
	            transform var(--p21-duration-fast) var(--p21-ease);
}
.p21-card:hover { box-shadow: var(--p21-shadow-lg); transform: translateY(-3px); }
.p21-card__media { aspect-ratio: 10 / 7; overflow: hidden; background: var(--p21-grey-100); }
.p21-card__media img { width: 100%; height: 100%; object-fit: cover; }
.p21-card__body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.p21-card__title { margin: 0 0 10px; font-size: 1.3125rem; color: var(--p21-cyan-text); }
.p21-card__title a { color: inherit; text-decoration: none; }
.p21-card__title a:hover { text-decoration: underline; }
.p21-card__text { margin: 0 0 18px; font-size: 1rem; line-height: 1.6; color: var(--p21-grey-700); }
.p21-card__meta {
	font-size: 0.875rem;
	color: var(--p21-grey-600);
	margin-bottom: 8px;
	font-family: var(--p21-font-display);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.p21-card .p21-link-arrow { margin-top: auto; align-self: flex-start; }

/* Temi (tassonomia 'tema') su una card — piccoli, non competono con il
   titolo. .p21-card__text resta l'unico elemento con flex-grow, quindi
   questi restano sempre appena sopra il link "Leggi", qualunque sia la
   lunghezza del testo sopra. */
.p21-card__temi {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
}
.p21-card__temi a {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--p21-grey-100);
	color: var(--p21-grey-700);
	font-size: 0.75rem;
	font-family: var(--p21-font-body);
	text-decoration: none;
}
.p21-card__temi a:hover { background: var(--p21-cyan-50); color: var(--p21-cyan-text); }

/* ========================================================================
   SINGOLA NOTIZIA — layout a due colonne + barra laterale
   (single-post.php, template-parts/sidebar-news.php). Prima non esisteva
   un template dedicato: la pagina usava quello di TheGem, a piena
   larghezza senza sidebar — grandi spazi bianchi ai lati, l'aspetto
   "asimmetrico" segnalato dal committente (29/08/2026).
   ======================================================================== */
.p21-single-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 56px;
	padding-block: 48px 96px;
	align-items: start;
}
.p21-single-main__meta {
	font-size: 0.875rem;
	color: var(--p21-grey-600);
	font-family: var(--p21-font-display);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin: 0 0 12px;
}
.p21-single-main__meta a { color: inherit; }
.p21-single-main__title { margin: 0 0 28px; }
.p21-single-main__media {
	aspect-ratio: 10 / 7;
	overflow: hidden;
	border-radius: var(--p21-radius-lg);
	background: var(--p21-grey-100);
	margin-bottom: 32px;
}
.p21-single-main__media img { width: 100%; height: 100%; object-fit: cover; }
.p21-single-main__temi { margin-top: 32px; }

/* La barra laterale: ricerca, archivio, categorie, temi. */
.p21-sidebar { display: flex; flex-direction: column; gap: 32px; }
.p21-sidebar__widget {
	background: var(--p21-grey-50);
	border-radius: var(--p21-radius-lg);
	padding: 24px;
}
.p21-sidebar__title {
	margin: 0 0 16px;
	font-size: 1.0625rem;
	color: var(--p21-ink);
}
.p21-sidebar__list { list-style: none; margin: 0; padding: 0; }
.p21-sidebar__list li {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	padding: 9px 0;
	border-bottom: 1px solid var(--p21-grey-200);
	font-size: 0.9375rem;
}
.p21-sidebar__list li:last-child { border-bottom: none; }
.p21-sidebar__list a { color: var(--p21-text); text-decoration: none; }
.p21-sidebar__list a:hover { color: var(--p21-cyan-text); text-decoration: underline; }
.p21-sidebar__count { color: var(--p21-grey-600); font-size: 0.8125rem; }
.p21-sidebar .p21-card__temi { margin-bottom: 0; }
.p21-sidebar__preview-note {
	margin: 0 0 8px;
	padding: 12px 14px;
	background: var(--p21-cyan-50);
	color: var(--p21-cyan-text);
	border-radius: var(--p21-radius-sm);
	font-size: 0.8125rem;
	line-height: 1.5;
}

/* Archivio gerarchico: un <details> per anno, i mesi dentro. Nativo di
   HTML — ogni anno si apre/chiude per conto proprio, senza JavaScript.
   Tutti chiusi di default: solo l'elenco degli anni è visibile finché non
   se ne apre uno. */
.p21-sidebar__archive-year { border-bottom: 1px solid var(--p21-grey-200); }
.p21-sidebar__archive-year:last-child { border-bottom: none; }
.p21-sidebar__archive-year summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	padding: 9px 0;
	font-size: 0.9375rem;
	font-family: var(--p21-font-display);
	font-weight: 600;
	color: var(--p21-text);
	cursor: pointer;
	list-style: none; /* nasconde il triangolo di serie di <summary> */
}
.p21-sidebar__archive-year summary::-webkit-details-marker { display: none; }
.p21-sidebar__archive-year-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.p21-sidebar__archive-year-label::before {
	content: "";
	width: 7px;
	height: 7px;
	border-right: 2px solid var(--p21-grey-600);
	border-bottom: 2px solid var(--p21-grey-600);
	transform: rotate(-45deg);
	transition: transform var(--p21-duration-fast) var(--p21-ease);
	flex-shrink: 0;
}
.p21-sidebar__archive-year[open] .p21-sidebar__archive-year-label::before { transform: rotate(45deg); }
.p21-sidebar__archive-year summary:hover { color: var(--p21-cyan-text); }
.p21-sidebar__archive-year .p21-sidebar__list { padding-left: 16px; margin-bottom: 8px; }

/* Il form di ricerca è quello di get_search_form() — TheGem ha un proprio
   searchform.php (classi .searchform/#s/#searchsubmit, non le classi
   "standard" .search-form/.search-field di WordPress), che get_search_form()
   trova e usa da solo: qui solo l'adattamento perché stia comodo nei 320px
   della sidebar, non un form scritto da zero. */
.p21-sidebar__widget .searchform div { display: flex; align-items: center; gap: 8px; }
.p21-sidebar__widget .searchform input[type="text"] {
	flex: 1;
	min-width: 0;
	height: var(--p21-touch-target);
	padding: 0 12px;
	border: 1px solid var(--p21-grey-300);
	border-radius: var(--p21-radius-sm);
	font-family: var(--p21-font-body);
	font-size: 0.9375rem;
}
.p21-sidebar__widget .searchform input[type="text"]:focus { border-color: var(--p21-cyan-text); }
.p21-sidebar__widget .searchform button {
	flex-shrink: 0;
	/* .gem-button del tema padre porta margini (25px) pensati per un form
	   impilato in verticale altrove nel sito: qui i due campi sono
	   affiancati, vanno azzerati perché restino allineati. */
	margin: 0;
	padding: 0 16px;
	height: var(--p21-touch-target);
	/* Anche lo sfondo di .gem-button (grigio chiaro, #b6c6c9) va
	   sovrascritto: con il testo bianco sopra restava a un contrasto di
	   1,76:1, ben sotto il 4,5:1 richiesto — trovato in QA (M10). */
	background: var(--p21-cyan-text);
	color: var(--p21-white);
	border: none;
}
.p21-sidebar__widget .searchform button:hover { background: var(--p21-cyan-dark); }

/* Stato del progetto: etichetta testuale, non solo colore (capitolato §22). */
.p21-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--p21-font-display);
	font-weight: 700;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 5px 12px;
	border-radius: var(--p21-radius-pill);
	background: var(--p21-green-50);
	color: var(--p21-green-dark);
	border: 1px solid var(--p21-green);
	margin-bottom: 10px;
	align-self: flex-start;
}

/* Anteprima di una bozza (M9): visibile solo a chi ha effettuato l'accesso
   con permesso di modifica, vedi inc/draft-preview.php. Colore distinto
   dal badge di stato progetto, per non confondere le due informazioni. */
.p21-badge--draft {
	background: #fff6e5;
	color: var(--p21-warning);
	border-color: #f0dfbe;
	margin-right: 8px;
}

.p21-draft-banner {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	font-size: 0.9375rem;
	color: var(--p21-warning);
	background: #fff6e5;
	border: 1px solid #f0dfbe;
	border-radius: var(--p21-radius-md);
	padding: 14px 18px;
	margin: 0 0 28px;
}
.p21-draft-banner a { color: inherit; text-decoration: underline; }

.p21-empty {
	border: 1px dashed var(--p21-grey-300);
	border-radius: var(--p21-radius-lg);
	padding: var(--p21-space-6);
	color: var(--p21-grey-600);
	background: var(--p21-white);
}

/* ========================================================================
   FOOTER
   ======================================================================== */
.p21-footer { background: var(--p21-ink); color: var(--p21-grey-300); padding-block: var(--p21-space-10) var(--p21-space-6); }
.p21-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.p21-footer h2 {
	font-size: 0.8125rem;
	letter-spacing: var(--p21-tracking-wide);
	text-transform: uppercase;
	color: var(--p21-cyan-300);
	margin: 0 0 16px;
}
.p21-footer ul { list-style: none; margin: 0; padding: 0; }
.p21-footer li { margin-bottom: 10px; }
.p21-footer a { color: var(--p21-grey-200); text-decoration: none; }
.p21-footer a:hover { color: var(--p21-white); text-decoration: underline; }
.p21-footer__brand img { height: 132px; width: auto; margin-bottom: 16px; }
.p21-footer__brand strong { color: var(--p21-white); font-family: var(--p21-font-display); display: block; margin-bottom: 6px; }
.p21-footer__legal {
	margin-top: var(--p21-space-8);
	padding-top: var(--p21-space-5);
	border-top: 1px solid var(--p21-grey-700);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--p21-space-4);
	flex-wrap: wrap;
	font-size: 0.875rem;
	color: var(--p21-grey-500);
}
/* Il logo CoorDown è arancione/nero pensato per sfondi chiari: su questo
   footer scuro resterebbe illeggibile senza una base chiara dietro — non si
   tocca il file del logo stesso, solo lo sfondo che lo ospita. */
.p21-footer__coordown {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
}
.p21-footer__coordown a {
	display: inline-flex;
	background: var(--p21-white);
	padding: 5px 10px;
	border-radius: var(--p21-radius-xs);
	line-height: 0;
}
.p21-footer__coordown img { height: 15px; width: auto; }

/* ========================================================================
   PAGINE INTERNE — contenuto generico (page.php/single.php di TheGem).
   TheGem fornisce già i contenitori (.container, .entry-content): qui si
   applica solo la nostra tipografia, senza toccare i file del tema padre.
   ======================================================================== */
#main-content .container {
	max-width: var(--p21-container);
	margin-inline: auto;
	padding-inline: var(--p21-gutter);
}
#main-content .entry-content.post-content,
.p21-entry-content {
	max-width: 760px;
	margin: 0 auto;
	/* Senza padding-top: il contenitore di TheGem che lo ospita
	   (.block-content, tema padre) ha già 135px di padding-top tutto suo —
	   i nostri 56px si sommavano, per un distacco eccessivo tra la fascia
	   del titolo e il testo (segnalato dal committente, verificato dal
	   vivo: 191px totali). padding-bottom invariato, è lo spazio prima del
	   footer, non tocca questo problema. */
	padding: 0 0 96px;
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--p21-grey-700);
	font-family: var(--p21-font-body);
}
#main-content .entry-content.post-content h2,
#main-content .entry-content.post-content h3,
.p21-entry-content h2,
.p21-entry-content h3 {
	font-family: var(--p21-font-display);
	color: var(--p21-ink);
	margin-top: 1.6em;
	margin-bottom: 0.6em;
}
#main-content .entry-content.post-content p,
.p21-entry-content p { margin: 0 0 1.2em; }
#main-content .entry-content.post-content a,
.p21-entry-content a { color: var(--p21-link); }
#main-content .entry-content.post-content a:hover,
.p21-entry-content a:hover { color: var(--p21-link-hover); }

/* Bottone di donazione PayPal (inc/paypal-donate.php): l'SDK lo inserisce
   come <img>, che eredita `display: block` dalla regola globale su `img`
   (base.css) — per questo si centra con un margine automatico
   sull'immagine stessa, non con text-align sul contenitore. */
#p21-donate-button {
	margin: 8px 0 28px;
}
#p21-donate-button img {
	margin-inline: auto;
}

/* ========================================================================
   CALENDARIO EVENTI (template-parts/eventi-calendar.php)
   ======================================================================== */
.p21-calendar {
	border: 1px solid var(--p21-grey-200);
	border-radius: var(--p21-radius-xl);
	overflow: hidden;
	margin-bottom: 48px;
	background: var(--p21-white);
}
.p21-calendar__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 24px;
	background: var(--p21-ink);
}
.p21-calendar__title {
	margin: 0;
	color: var(--p21-white);
	font-family: var(--p21-font-display);
	font-size: 1.25rem;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}
.p21-calendar__nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	color: var(--p21-white);
	background: rgba(255, 255, 255, 0.1);
}
.p21-calendar__nav:hover { background: rgba(255, 255, 255, 0.2); }
.p21-calendar__nav--prev svg { transform: rotate(180deg); }
.p21-calendar__grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
}
.p21-calendar__weekday {
	padding: 12px 4px;
	text-align: center;
	font-family: var(--p21-font-display);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--p21-grey-600);
	background: var(--p21-grey-50);
	border-bottom: 1px solid var(--p21-grey-200);
}
.p21-calendar__day {
	min-height: 96px;
	padding: 8px;
	border-right: 1px solid var(--p21-grey-100);
	border-bottom: 1px solid var(--p21-grey-100);
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.p21-calendar__day--empty { background: var(--p21-grey-50); }
.p21-calendar__day--today { background: var(--p21-cyan-50); }
.p21-calendar__num {
	font-family: var(--p21-font-display);
	font-weight: 700;
	font-size: 0.8125rem;
	color: var(--p21-grey-600);
}
.p21-calendar__day--today .p21-calendar__num { color: var(--p21-cyan-text); }
.p21-calendar__event {
	display: block;
	font-size: 0.75rem;
	line-height: 1.3;
	padding: 3px 6px;
	border-radius: var(--p21-radius-xs);
	background: var(--p21-green-text);
	color: var(--p21-white);
	text-decoration: none;
}
.p21-calendar__event:hover { background: var(--p21-green-dark); color: var(--p21-white); }
.p21-calendar__empty {
	margin: 0;
	padding: 20px 24px;
	text-align: center;
	color: var(--p21-grey-600);
	border-top: 1px solid var(--p21-grey-200);
}

/* ========================================================================
   PAGINAZIONE — paginate_links() dentro template-parts/listing.php
   ======================================================================== */
/* Mai stilizzata finora: restava sulla resa nativa di WordPress/TheGem per
   un <a> "nudo", 9,8×27,2px misurati dal vivo — sotto i 24×24px minimi
   richiesti da WCAG 2.2 AA (target-size), trovato in QA (M10). */
.p21-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--p21-touch-target);
	min-height: var(--p21-touch-target);
	padding: 0 12px;
	border: 1px solid var(--p21-grey-300);
	border-radius: var(--p21-radius-sm);
	color: var(--p21-ink);
	text-decoration: none;
	font-weight: 600;
}
.p21-pagination .page-numbers:hover { border-color: var(--p21-cyan-text); color: var(--p21-cyan-text); }
.p21-pagination .page-numbers.current {
	background: var(--p21-cyan-text);
	border-color: var(--p21-cyan-text);
	color: var(--p21-white);
}

/* ========================================================================
   CONTATTI — mappa e form (page-contatti.php)
   ======================================================================== */
.p21-contatti-grid {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 56px;
	padding-block: 56px 96px;
}
.p21-contatti-map {
	margin-top: 24px;
	border-radius: var(--p21-radius-lg);
	overflow: hidden;
	border: 1px solid var(--p21-grey-200);
}
.p21-contatti-map iframe { display: block; }
.p21-contact-form p { margin: 0 0 16px; }
.p21-contact-form label {
	display: block;
	margin-bottom: 6px;
	font-family: var(--p21-font-display);
	font-weight: 600;
	font-size: 0.875rem;
	color: var(--p21-ink);
}
.p21-contact-form input[type="text"],
.p21-contact-form input[type="email"],
.p21-contact-form textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--p21-grey-300);
	border-radius: var(--p21-radius-sm);
	font-family: var(--p21-font-body);
	font-size: 1rem;
	color: var(--p21-text);
}
.p21-contact-form input:focus,
.p21-contact-form textarea:focus { border-color: var(--p21-cyan-text); }

/* ========================================================================
   GIORNATE INTERNAZIONALI — galleria video campagne CoorDown
   (scripts/content/build-coordown-gallery.php)

   Griglia CSS invece delle larghezze percentuali (31%/47%/100%) sui
   Container Elementor: con 14 elementi non multipli delle colonne per riga,
   il flex-wrap lasciava l'ultima riga irregolare (2 elementi allineati a
   sinistra invece che sotto le colonne sopra). Con `auto-fill`+`minmax` il
   numero di colonne si adatta alla larghezza reale, ma resta sempre una
   griglia con celle di larghezza identica riga per riga.
   ======================================================================== */
.p21-cd-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 32px 24px;
	padding-block: 8px 0;
}
.p21-cd-gallery__title {
	margin: 0 0 12px;
	font-family: var(--p21-font-display);
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--p21-ink);
}
.p21-cd-gallery__video {
	position: relative;
	aspect-ratio: 16 / 9;
	width: 100%;
	overflow: hidden;
	border-radius: var(--p21-radius-sm);
	background: var(--p21-grey-100);
}
.p21-cd-gallery__video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* ========================================================================
   RESPONSIVE
   ======================================================================== */
@media (max-width: 1100px) {
	.p21-footer__grid { grid-template-columns: 1fr 1fr; }
	.p21-nav__list { gap: 16px; }
	.p21-nav a { font-size: 0.8125rem; }
}

@media (max-width: 980px) {
	/* Sotto questa soglia la navigazione orizzontale non ci sta più: passa
	   al menu a tendina, che resta completamente navigabile da tastiera. */
	.p21-nav { display: none; }
	.p21-burger { display: grid; }
	.p21-header__cta { margin-left: auto; }
	.p21-header__logo img { height: 112px; }
	.p21-cards-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.p21-contatti-grid { grid-template-columns: 1fr; gap: 40px; }
	/* La sidebar scende sotto l'articolo invece di stringersi: a questa
	   larghezza 320px fissi per la colonna laterale non ci starebbero più
	   comodi accanto al testo. */
	.p21-single-layout { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 640px) {
	.p21-cards-3,
	.p21-cards-2 { grid-template-columns: 1fr; }
	.p21-footer__grid { grid-template-columns: 1fr; gap: 32px; }
	/* Sette colonne non ci stanno più: i giorni senza eventi collassano,
	   quelli con eventi restano leggibili invece di stringersi in una casella
	   troppo piccola per il testo. */
	.p21-calendar__day { min-height: 0; padding: 6px 4px; }
	.p21-calendar__day--empty { display: none; }
	.p21-calendar__event { font-size: 0.6875rem; }
}

/* A 320 px le gutter generose rubano troppo spazio al testo. */
@media (max-width: 360px) {
	:root { --p21-gutter: 0.875rem; }
	.p21-header__logo img { height: 80px; }
}