/**
 * Press list — griglia dei loghi delle testate.
 *
 * Le schede le compone il Query Loop con blocchi di core: immagine in evidenza,
 * data e link alla testata. Qui sta la veste — la griglia a quattro colonne, il
 * riquadro del logo, e il lavoro di togliere al `core/button` l'aspetto da
 * bottone, perché nel riferimento quel link è testo e basta.
 *
 * I filtri hanno un foglio suo, dentro al blocco che li produce.
 */

.press-list {
	padding-block: clamp( 48px, 6vw, 96px ) clamp( 72px, 9vw, 120px );
	padding-inline: var(--wp--preset--spacing--50);
}

.press-list__inner {
	max-width: var(--wp--custom--layout--frame);
	margin-inline: auto;
}

/* --- Le due righe di stacco ------------------------------------------- */

.press-list__divider,
.press-list__sep {
	border: 0;
	border-top: 1px solid var(--wp--preset--color--gray-line);
}

.press-list__divider {
	margin: clamp( 18px, 2vw, 24px ) 0 clamp( 36px, 4vw, 56px );
}

.press-list__sep {
	margin: clamp( 48px, 6vw, 80px ) 0 clamp( 28px, 3vw, 40px );
}

/* --- La griglia ------------------------------------------------------- */

/* Due classi e non una: `.wp-block-post-template` porta già `display: flex`
   dalla foglia di stile di core, con la stessa specificità di una classe. Con
   un solo selettore la griglia non si applicherebbe. */
.press-list .wp-block-post-template.press-cards {
	display: grid;
	/* `minmax( 0, 1fr )` e non `1fr`: la forma breve vale `minmax( auto, 1fr )`,
	   e quel minimo automatico lascia che sia il contenuto a dettare la
	   larghezza della colonna. Le schede contengono un riquadro con
	   `aspect-ratio`, e Safari ne calcola il minimo contro un’altezza
	   indefinita: su una colonna sola la colonna finiva a milioni di pixel e
	   la pagina scorreva in orizzontale. Dichiarare zero come minimo dice che
	   la colonna può stringersi quanto serve. */
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	gap: clamp( 28px, 3vw, 44px ) clamp( 20px, 2.2vw, 32px );
	margin: 0;
	padding: 0;
	list-style: none;
}

/* `position: relative` perché il link della scheda si allarga a coprirla: è
   questo elemento il riquadro di riferimento di quell'ingrandimento. */
.press-cards > li {
	position: relative;
	display: flex;
	flex-direction: column;
	margin: 0;
}

/* --- Il riquadro del logo --------------------------------------------- */

.press-card__media {
	display: flex;
	align-items: center;
	justify-content: center;
	/* La larghezza va dichiarata, non dedotta: con `aspect-ratio` e nessuna
	   delle due misure fissata, Safari risolve il rapporto partendo
	   dall'altezza e ne ricava una larghezza piu grande del contenitore. Fissando
	   la larghezza al contenitore il rapporto calcola l'altezza, che e il verso
	   voluto. */
	width: 100%;
	aspect-ratio: 1 / 1;
	padding: 14%;
	border: 1px solid var(--wp--preset--color--rose-line);
	border-radius: 2px;
	background-color: var(--wp--preset--color--white);
	transition: border-color 0.2s ease;
}

.press-cards > li:hover .press-card__media,
.press-cards > li:has( :focus-visible ) .press-card__media {
	border-color: var(--wp--preset--color--rosso);
}

/* Il blocco immagine in evidenza porta la sua figura: va appiattita, altrimenti
   il margine di core sposta il logo fuori dal centro del riquadro. */
.press-card__media .wp-block-post-featured-image {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	margin: 0;
}

/* Il logo si iscrive nel riquadro senza essere ritagliato: le due misure sono
   automatiche e i due tetti le tengono dentro, quindi il riquadro dell'immagine
   coincide sempre con l'immagine e non c'è niente da ritagliare. Niente
   `object-fit` qui: il blocco immagine in evidenza ne scrive uno in linea
   (`cover`, il suo valore predefinito) che vincerebbe comunque su una regola di
   questo foglio — ed è ininfluente proprio perché non c'è ritaglio da fare. */
.press-card__media img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
}

/* --- Data ------------------------------------------------------------- */

.press-card__date {
	margin: clamp( 14px, 1.4vw, 20px ) 0 clamp( 4px, 0.4vw, 6px );
	font-weight: 700;
	line-height: 1.2;
}

/* I nomi dei mesi in italiano sono minuscoli — `date_i18n( 'F' )` restituisce
   "aprile" — e il riferimento li scrive con l'iniziale grande. È una scelta
   tipografica, quindi si fa qui e non riscrivendo il formato del blocco. */
.press-card__date time::first-letter {
	text-transform: uppercase;
}

/* --- Il link alla testata ---------------------------------------------- */

/* È un `core/button`, l'unico blocco di core il cui indirizzo si può legare a
   un binding, ma nel riferimento è testo e basta: qui gli si toglie di dosso
   tutto l'aspetto da bottone. */

.press-card__cta {
	margin: 0;
	gap: 0;
}

.wp-block-buttons.press-card__cta .wp-block-button.press-card__title {
	margin: 0;
}

/* L'involucro esce come `h3` — lo cambia `press_card_title_as_heading()`, per
   dare alle uscite un livello nell'indice della pagina. È un cambio di
   semantica e basta: corpo, peso e interlinea del titolo arriverebbero
   dall'elemento, mentre il testo sta nell'ancora qui sotto, che è dove sono
   sempre stati decisi. Il margine lo azzera già la regola sopra. */
h3.press-card__title {
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
}

.press-card__title .wp-block-button__link {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	background-color: transparent;
	color: inherit;
	font-weight: 400;
	line-height: 1.45;
	text-align: left;
	text-decoration: none;
}

/* Il link si allarga a coprire la scheda: il riquadro del logo diventa
   cliccabile senza aggiungere una seconda ancora verso la stessa pagina, che
   sarebbe una fermata in più da tastiera con lo stesso nome. */
.press-card__title .wp-block-button__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* Niente sottolineatura al passaggio: il segnale che la scheda risponde è già
   il bordo del riquadro che si accende, e da tastiera il contorno sulla scheda
   intera. Ripetuto qui perché il link resta un `core/button` e il foglio dei
   link del tema sottolineerebbe comunque. */
.press-card__title .wp-block-button__link:hover,
.press-card__title .wp-block-button__link:focus-visible {
	color: inherit;
	text-decoration: none;
}

/* Il fuoco da tastiera cade su un'ancora larga quanto il suo testo, ma la zona
   cliccabile è la scheda intera: il contorno va disegnato su tutta la scheda,
   altrimenti si vede evidenziata una riga di testo in mezzo a un riquadro che
   risponde tutto.

   `:has( :focus-visible )` e non `:focus-within`: quest'ultimo scatta anche
   quando il fuoco arriva da un clic, e la cornice restava accesa sulla scheda
   appena cliccata. `:focus-visible` è la stessa distinzione che fanno i
   browser da sé — tastiera sì, puntatore no — e `:has()` la porta dall'ancora
   alla scheda che la contiene, che è ciò che si vuole contornare. */
.press-cards > li:has( :focus-visible ) {
	outline: 2px solid var(--wp--preset--color--rosso);
	outline-offset: 4px;
}

.press-card__title .wp-block-button__link:focus {
	outline: none;
}

/* --- "Carica Altri" ---------------------------------------------------- */

.press-list__loadmore {
	display: flex;
	justify-content: center;
}

/* Core rende la paginazione come una riga flex con margini fra le voci: qui
   la voce è una sola, e il contenitore serve solo a centrarla. */
.press-list__loadmore .wp-block-query-pagination {
	margin: 0;
}

.press-list__loadmore .wp-block-query-pagination-next {
	margin: 0;
	padding: 14px 32px;
	border: 1.5px solid var(--wp--preset--color--petrol);
	border-radius: var(--wp--custom--radius--pill);
	background-color: transparent;
	color: var(--wp--preset--color--petrol);
	font-size: var(--wp--preset--font-size--body);
	font-weight: 700;
	letter-spacing: 0.01em;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.press-list__loadmore .wp-block-query-pagination-next:hover,
.press-list__loadmore .wp-block-query-pagination-next:focus-visible {
	background-color: var(--wp--preset--color--petrol);
	color: var(--wp--preset--color--white);
}

/* Mentre la richiesta è in volo la lista resta al suo posto ma si spegne: è
   l'unico segnale che qualcosa sta arrivando. */
.press-cards[aria-busy="true"] {
	opacity: 0.55;
	transition: opacity 0.15s ease;
}

/* --- Schermi stretti -------------------------------------------------- */

@media ( max-width: 1024px ) {
	.press-list .wp-block-post-template.press-cards {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	}
}

@media ( max-width: 768px ) {
	.press-list .wp-block-post-template.press-cards {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@media ( max-width: 480px ) {
	.press-list .wp-block-post-template.press-cards {
		grid-template-columns: minmax( 0, 1fr );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.press-card__media,
	.press-list__loadmore .wp-block-query-pagination-next,
	.press-cards[aria-busy="true"] {
		transition: none;
	}
}