/**
 * Stili dell'archivio Edizioni (templates/archive-edizione.html).
 *
 * L'immagine in evidenza deve sempre riempire per intero il riquadro 4/3
 * della card, che sia più larga, più stretta o assente (in quel caso resta
 * visibile solo lo sfondo placeholder "primary-light" impostato a blocco).
 * Il target non è solo l'<img>: post-featured-image lo avvolge in un
 * <figure> (con margine di default del browser) ed eventualmente in un
 * <a> quando isLink è true — entrambi vanno azzerati e portati a 100%
 * altezza, altrimenti l'immagine resta "raccolta" più piccola del riquadro.
 */
/**
 * Il gruppo con backgroundColor (placeholder "primary-light" quando manca
 * l'immagine in evidenza) riceve da WordPress un padding di default per i
 * blocchi Group con sfondo colorato, se non se ne dichiara uno esplicito.
 * Va azzerato: altrimenti l'immagine in evidenza resta rientrata rispetto
 * ai bordi del riquadro invece di riempirlo per intero.
 */
.archivio-edizioni__cover {
	position: relative;
	width: 100%;
	padding: 0 !important;
}

/**
 * Anno dell'edizione (titolo del post) allineato a sinistra. Non ci si
 * affida solo al supporto "justifyContent" del layout flex di Gutenberg: si
 * forza anche via CSS width:100% + text-align, così l'allineamento resta
 * corretto anche se il blocco viene ricreato/spostato in editor.
 */
.archivio-edizioni__anno {
	display: flex;
	width: 100%;
	justify-content: flex-start !important;
}

.archivio-edizioni__anno .wp-block-post-title {
	text-align: left;
	width: auto;
}

.archivio-edizioni__cover > * {
	height: 100%;
}

.archivio-edizioni__cover .wp-block-post-featured-image {
	margin: 0;
	height: 100%;
}

.archivio-edizioni__cover .wp-block-post-featured-image a {
	display: block;
	height: 100%;
}

.archivio-edizioni__cover img {
	width: 100% !important;
	height: 100% !important;
	aspect-ratio: auto !important;
	object-fit: cover !important;
	display: block;
}

/**
 * Bottone "Scopri l'edizione": nessuno sfondo, solo cambio colore in hover,
 * coerente con la regola del design system "nessun effetto scale/press —
 * solo shift di colore/ombra".
 */
.archivio-edizioni__cta {
	background: none;
	color: var(--wp--preset--color--primary);
	transition: color 150ms;
}

.archivio-edizioni__cta:hover,
.archivio-edizioni__cta:focus {
	color: var(--wp--preset--color--primary-light);
}

/**
 * Card interamente cliccabile ("stretched link"): la card ha
 * position:relative, il link "Scopri l'edizione" riceve uno pseudo-elemento
 * che copre l'intera area della card. z-index:1 sopra sul link stesso (e
 * sugli altri link interni, immagine/titolo) evita che lo pseudo-elemento
 * li rubi al focus da tastiera/hover — restano cliccabili anche loro,
 * puntano comunque tutti alla stessa pagina edizione.
 */
.archivio-edizioni__card {
	position: relative;
	transition: transform 150ms, box-shadow 150ms;
}

.archivio-edizioni__card:hover,
.archivio-edizioni__card:focus-within {
	transform: translateY(-2px);
	box-shadow: var(--wp--preset--shadow--medium);
}

/**
 * Al passaggio del mouse sull'intera card (non solo sulla CTA) anche il
 * titolo dell'edizione passa al blu chiaro, coerente con lo shift di colore
 * già applicato alla CTA "Scopri l'edizione". Il colore va forzato anche
 * sull'<a> interno al titolo, non solo sull'<h3>: gli stili globali di
 * link in theme.json ("styles.elements.link.color") impostano un colore
 * esplicito sull'<a>, che quindi non eredita il colore dell'<h3> genitore.
 */
.archivio-edizioni__card:hover .wp-block-post-title,
.archivio-edizioni__card:focus-within .wp-block-post-title,
.archivio-edizioni__card:hover .wp-block-post-title a,
.archivio-edizioni__card:focus-within .wp-block-post-title a,
.archivio-edizioni__card:hover .archivio-edizioni__cta,
.archivio-edizioni__card:focus-within .archivio-edizioni__cta {
	color: var(--wp--preset--color--primary-light);
	transition: color 150ms;
}

.archivio-edizioni__cta::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/**
 * L'immagine in evidenza e il titolo restano link a sé stanti dentro l'area
 * ora coperta dallo pseudo-elemento della CTA: senza un z-index più alto
 * risulterebbero "sotto" di esso e non riceverebbero più hover/focus/click
 * diretti (funzionerebbero comunque, ma solo tramite lo pseudo-elemento).
 */
.archivio-edizioni__cover .wp-block-post-featured-image a,
.archivio-edizioni__anno .wp-block-post-title a {
	position: relative;
	z-index: 2;
}