/* =========================================================
   Card servizio "flip" — le stesse della home, fuori dalla home
   Porting 1:1 di home-epica.css §SERVIZI (righe 710-770) e delle classi
   che le accompagnano (.num, .link-op), qui scoped su .bg-servizi-section
   invece che su .bg-epica, e con i nomi prefissati bg-* perché il
   componente vive fuori dal suo foglio d'origine.
   Markup: inc/servizi-cards-section.php · flip al tap: assets/js/servizi-cards.js.
   Dipendenze: variables.css — tutti i token usati qui esistono già lì con lo
   stesso valore della home, non serve ridichiararne nessuno.
   ========================================================= */

.bg-servizi-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--gap-block);
}

@media (max-width: 760px) {
	.bg-servizi-grid { grid-template-columns: 1fr; }
}

.bg-servizi-section .bg-servizio { perspective: 1400px; }

.bg-servizi-section .bg-servizio__inner {
	position: relative;
	height: 100%;
	transform-style: preserve-3d;
	transition: transform var(--dur-l) var(--ease-in-out);
}
/* :hover isolato in @media (hover: hover): su touch resta appiccicato dopo il
   tap e terrebbe la card girata anche dopo la rimozione di .is-flipped,
   rendendo il secondo tap apparentemente inefficace. */
@media (hover: hover) {
	.bg-servizi-section .bg-servizio:hover .bg-servizio__inner { transform: rotateX(-180deg); }
}
.bg-servizi-section .bg-servizio:focus-within .bg-servizio__inner,
.bg-servizi-section .bg-servizio.is-flipped .bg-servizio__inner { transform: rotateX(-180deg); }

.bg-servizi-section .bg-servizio__front,
.bg-servizi-section .bg-servizio__back {
	border: 1px solid var(--border);
	border-radius: var(--radius-card);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transition: border-color var(--dur-s) var(--ease-out);
}

/* #000 come il body, non var(--bg): su fondo nero puro si leggeva grigio.
   flex-direction:row → media a lato: l'altezza della card è il maggiore tra
   foto e testo, non la somma. Split 48/52. */
.bg-servizi-section .bg-servizio__front {
	background: #000;
	height: 100%;
	overflow: hidden;
	display: flex;
	flex-direction: row;
	align-items: stretch;
}
.bg-servizi-section .bg-servizio__back {
	position: absolute;
	inset: 0;
	transform: rotateX(-180deg);
	background: #000;
	color: var(--text);
	border-color: var(--border);
	display: flex;
	flex-direction: column;
	gap: .6rem;
	padding: 1.05rem 1.15rem 1.15rem;
	overflow: hidden;
}
@media (hover: hover) {
	.bg-servizi-section .bg-servizio:hover .bg-servizio__front { border-color: var(--border-hover); }
}
.bg-servizi-section .bg-servizio:focus-within .bg-servizio__front { border-color: var(--border-hover); }

/* niente aspect-ratio: la foto riempie l'altezza dettata dal body */
.bg-servizi-section .bg-servizio__img { flex: 0 0 48%; overflow: hidden; }
.bg-servizi-section .bg-servizio__img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.bg-servizi-section .bg-servizio__body {
	flex: 1 1 52%;
	min-width: 0;
	padding: 1.15rem 1.25rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: .5rem;
}

/* riga meta: numero + label di categoria.
   Il separatore "·" sta sul numero, non sul label: così quando una categoria
   lunga ("Patrimonio culturale") va a capo, la seconda riga si allinea alla
   prima lettera della categoria e non al punto. */
.bg-servizi-section .bg-servizio__meta { display: flex; align-items: baseline; gap: .5rem; }
.bg-servizi-section .bg-servizio__num {
	font-family: var(--f-sans);
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: var(--track-wide);
	color: var(--text-3);
	font-variant-numeric: tabular-nums;
}
.bg-servizi-section .bg-servizio__meta .bg-servizio__num::after { content: "·"; margin-left: .5rem; }
.bg-servizi-section .bg-servizio__label {
	font-family: var(--f-sans);
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: var(--track-wide);
	text-transform: uppercase;
	line-height: 1.2; /* la categoria su due righe resta una unità compatta */
	color: var(--text-3);
}

/* Astra inietta inline `h1..h6 {color: var(--ast-global-color-2)}`: una
   dichiarazione diretta batte l'ereditarietà, quindi il colore va detto qui.
   Stessa ragione documentata in finale-cta.css. */
.bg-servizi-section .bg-servizio__titolo {
	font-family: var(--f-sans);
	font-weight: 500;
	font-size: 1.05rem;
	letter-spacing: var(--track-tight);
	line-height: 1.3;
	color: var(--text);
	margin: 0;
}
.bg-servizi-section .bg-servizio__testo {
	font-size: .85rem;
	color: var(--text-2);
	line-height: 1.55;
	margin: 0;
}

.bg-servizi-section .bg-servizio__back .bg-servizio__num { color: var(--text-3); }
.bg-servizi-section .bg-servizio__back-titolo {
	font-family: var(--f-sans);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: var(--track-wide);
	text-transform: uppercase;
	color: var(--text-2);
	margin: 0;
}

/* 2 colonne: la card media-side è larga e bassa, 6 voci in colonna singola non
   ci starebbero */
.bg-servizi-section .bg-servizio__committenti {
	list-style: none;
	margin: 0;
	padding: 0;
	flex: 1;
	min-height: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 1.5rem;
	align-content: start;
}
.bg-servizi-section .bg-servizio__committenti li {
	font-family: var(--f-sans);
	font-size: .85rem;
	line-height: 1.4;
	letter-spacing: var(--track-normal);
	color: var(--text);
	border-top: 1px solid var(--border);
	padding: .38rem 0;
}
/* prima riga della griglia = primi due li, non solo il primo */
.bg-servizi-section .bg-servizio__committenti li:nth-child(-n+2) { border-top: 0; padding-top: 0; }

/* --------- Link del retro (.link-op del DS) --------- */
.bg-servizi-section .bg-servizio__link {
	margin-top: auto;
	align-self: flex-end;   /* CTA a destra, come sulle card servizio */
	font-family: var(--f-sans);
	font-size: .85rem;
	font-weight: 600;
	letter-spacing: var(--track-ui);
	text-transform: uppercase;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	gap: .5em;
	text-decoration: none;
	background: transparent;
	border: 0;
	padding: 0;
	position: relative;
}
.bg-servizi-section .bg-servizio__link,
.bg-servizi-section .bg-servizio__link:hover,
.bg-servizi-section .bg-servizio__link:focus,
.bg-servizi-section .bg-servizio__link:focus-visible,
.bg-servizi-section .bg-servizio__link:active,
.bg-servizi-section .bg-servizio__link:visited { color: var(--text); }
.bg-servizi-section .bg-servizio__link .text { position: relative; display: inline-block; }
.bg-servizi-section .bg-servizio__link .text::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 0;
	height: 1px;
	background-color: currentColor;
	transition: width var(--dur-s) var(--ease-out);
}
.bg-servizi-section .bg-servizio__link:hover .text::after,
.bg-servizi-section .bg-servizio__link:focus-visible .text::after { width: 100%; }
.bg-servizi-section .bg-servizio__link .arrow {
	font-size: 1.35em;
	font-weight: 700;
	display: inline-block;
	line-height: 1;
	transition: transform var(--dur-s) var(--ease-out);
}
.bg-servizi-section .bg-servizio__link:hover .arrow,
.bg-servizi-section .bg-servizio__link:focus-visible .arrow { transform: translateX(.25em); }

/* --------- DEGRADO reduced-motion ---------
   Niente rotazione: il retro compare in dissolvenza sopra il fronte.
   Porting di home-epica.css:973-977. */
@media (prefers-reduced-motion: reduce) {
	.bg-servizi-section .bg-servizio { perspective: none; }
	.bg-servizi-section .bg-servizio__inner { transform: none !important; transition: none; }
	.bg-servizi-section .bg-servizio__front,
	.bg-servizi-section .bg-servizio__back { -webkit-backface-visibility: visible; backface-visibility: visible; }
	.bg-servizi-section .bg-servizio__back {
		transform: none;
		opacity: 0;
		pointer-events: none;
		transition: opacity var(--dur-s) linear;
	}
	.bg-servizi-section .bg-servizio:focus-within .bg-servizio__back,
	.bg-servizi-section .bg-servizio.is-flipped .bg-servizio__back { opacity: 1; pointer-events: auto; }
	.bg-servizi-section .bg-servizio__link .text::after,
	.bg-servizi-section .bg-servizio__link .arrow { transition: none; }
}
@media (prefers-reduced-motion: reduce) and (hover: hover) {
	.bg-servizi-section .bg-servizio:hover .bg-servizio__back { opacity: 1; pointer-events: auto; }
}