/* ==========================================================================
   Site Regioni — Stili
   Segue le CSS custom properties del tema dove disponibili.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Variabili locali (fallback se il tema non le espone)
   -------------------------------------------------------------------------- */
:root {
	--sr-gap:        1.5rem;
	--sr-col-min:    260px;
	--sr-radius:     4px;
	--sr-card-bg:    #ffffff;
	--sr-card-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	--sr-focus:      var(--color-focus, #2a6ebb);
}

/* --------------------------------------------------------------------------
   Utilità screen-reader-only (se non già definita dal tema)
   -------------------------------------------------------------------------- */
.sr-only {
	position:   absolute;
	width:      1px;
	height:     1px;
	padding:    0;
	margin:     -1px;
	overflow:   hidden;
	clip:       rect(0, 0, 0, 0);
	white-space: nowrap;
	border:     0;
}

/* --------------------------------------------------------------------------
   Intestazione archivio
   -------------------------------------------------------------------------- */
.pg-archive-regioni__header {
	padding-block: 2rem;
}

.pg-archive-regioni__title {
	color:          #ffffff;
	font-size:      clamp(1.5rem, 4vw, 2.25rem);
	margin-block:   0.5rem 0;
	line-height:    1.2;
}

/* --------------------------------------------------------------------------
   Sezione griglia
   -------------------------------------------------------------------------- */
.pg-archive-regioni__section {
	padding-block: 3rem;
}

/* --------------------------------------------------------------------------
   Griglia card regioni
   Responsive senza media query: si adatta con auto-fill.
   -------------------------------------------------------------------------- */
.sr-grid {
	display:               grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--sr-col-min), 1fr));
	gap:                   var(--sr-gap);
	list-style:            none;
	padding:               0;
	margin:                0;
}

/* --------------------------------------------------------------------------
   Card regione
   -------------------------------------------------------------------------- */
.sr-card {
	display:        flex;
	flex-direction: column;
	background:     var(--sr-card-bg);
	border-radius:  var(--sr-radius);
	box-shadow:     var(--sr-card-shadow);
	overflow:       hidden;
	height:         100%;
}

.sr-card__thumbnail {
	overflow: hidden;
	aspect-ratio: 16 / 9;
}

.sr-card__thumbnail a {
	display: block;
	height:  100%;
}

.sr-card__img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
	/* Animazione solo se l'utente non ha preferenze di riduzione del movimento */
	transition: transform 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
	.sr-card__img {
		transition: none;
	}
}

.sr-card__thumbnail a:hover .sr-card__img,
.sr-card__thumbnail a:focus .sr-card__img {
	transform: scale(1.04);
}

.sr-card__body {
	padding: 1rem 1.25rem 1.25rem;
	flex:    1;
	display: flex;
	align-items: flex-start;
}

.sr-card__title {
	font-size:   1.1rem;
	line-height: 1.35;
	margin:      0;
}

/* --------------------------------------------------------------------------
   Link della card — focus visibile (WCAG 2.1 SC 2.4.7)
   -------------------------------------------------------------------------- */
.sr-card__link {
	color:           inherit;
	text-decoration: none;
}

.sr-card__link:hover {
	text-decoration: underline;
}

.sr-card__link:focus-visible {
	outline:        3px solid var(--sr-focus);
	outline-offset: 2px;
	border-radius:  2px;
}

/* --------------------------------------------------------------------------
   Stato vuoto
   -------------------------------------------------------------------------- */
.sr-no-results {
	text-align:  center;
	padding:     2rem 0;
	color:       inherit;
	font-size:   1rem;
}

/* --------------------------------------------------------------------------
   Singola regione
   -------------------------------------------------------------------------- */
.pg-single-regione__main {
	padding-block: 2.5rem;
}