/* =========================================================
   Services Grid — Shortcode [bg_services_grid]
   Token sorgente: SERVICE_CARD.md v1.0 §"Contenitore B — Griglia /servizi/"
   Pattern: griglia 2×3, dark exclusive, doppio CTA, hover neutralizzato.
   Dipendenze: variables.css, buttons.css, card.css, frame.css.
   ========================================================= */

/* --------- RESET bg-page-content — override hero.css (max-width + padding) --------- */
body.page-id-211 .bg-page-content {
	padding: 0 !important;
	max-width: 100% !important;
	margin: 0 !important;
}

/* --------- RESET ASTRA + GUTENBERG — rimuove max-width e padding pagina 211 --------- */
body.page-id-211 #content .ast-container,
body.page-id-211 #content,
body.page-id-211 .site-content,
body.page-id-211 #primary,
body.page-id-211 #main,
body.page-id-211 .site-main,
body.page-id-211 .entry-content {
	max-width: 100% !important;
	width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* Reset block-gap automatico Gutenberg */
body.page-id-211 .entry-content > * + * {
	margin-block-start: 0 !important;
}

/* Reset wrapper shortcode Gutenberg */
body.page-id-211 .wp-block-shortcode {
	margin: 0 !important;
	padding: 0 !important;
}

/* Reset padding verticale Astra su site-main */
body.page-id-211 .site-main {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* Reset paragrafi vuoti e blocchi shortcode diretti */
body.page-id-211 .site-main > .wp-block-shortcode,
body.page-id-211 .site-main > .wp-block-shortcode:first-child,
body.page-id-211 .site-main > p,
body.page-id-211 .site-main > p:empty {
	margin: 0 !important;
	padding: 0 !important;
}

body.page-id-211 .site-main > p:empty {
	display: none !important;
}

body.page-id-211 .uagb-container-inner-blocks-wrap {
	max-width: 100% !important;
	width: 100% !important;
	padding: 0 !important;
}

/* =========================================================
   .bg-services-grid — Contenitore griglia (Pattern C di LAYOUT)
   width 100% + padding-inline --pad-x, no max-width ceiling.
   Su /servizi/ il contenuto È il catalogo: cresce col viewport.
   ========================================================= */

.bg-services-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--gap-block);
	padding-block: 0;
	/* Override locale del --pad-x ereditato da .bg-frame--bleed-padded:
	   griglia edge-to-edge (scelta editoriale, non sistemica — il resto del
	   sito continua a usare --pad-x). */
	padding-inline: 0;
}

/* Sotto 1100 il 2-col strangola la card media-side fino a non far stare
   .btn-primary affianco a .btn-linkop; meglio passare a 1-col larga. */
@media (max-width: 1100px) {
	.bg-services-grid {
		grid-template-columns: 1fr;
	}
}

/* =========================================================
   .bg-service-card — Alias sopra .bg-card.bg-card--media-side
   La card NON è cliccabile: hit-area = solo i due CTA.
   Neutralizza cursor + hover ereditati da .bg-card.
   ========================================================= */

.bg-service-card {
	cursor: default;
}

.bg-service-card:hover {
	border-color: var(--border);
}

.bg-service-card:hover .bg-card__eyebrow {
	color: var(--text-3);
}

/* --------- Compaction CTA dentro la griglia ------------------------------
   La card in 2-col ha body ~50% di metà viewport.
   .btn-primary canonico (padding 1rem 2.25rem) non ci sta.
   -------------------------------------------------------------------------- */

.bg-services-grid .bg-card--media-side .bg-card__body {
	padding: clamp(1.5rem, 2.5vw, 2rem);
}

.bg-services-grid .btn-primary {
	padding: 0.85rem 1.5rem;
}

.bg-services-grid .bg-card--media-side .bg-card__cta {
	gap: 1rem;
	flex-wrap: nowrap;
	justify-content: flex-end;
}

/* --------- Stack early service-card (override del 640 di CARD) -----------
   Sotto 700 ogni card collassa internamente (media-top a tutta larghezza
   + body sotto). A 744 (iPad mini portrait) la grid è già in 1-col, il body
   media-side ha ~370px lordi: resta leggibile orizzontale. Sotto 700 il body
   strangola eyebrow + titolo + lead + 2 CTA in riga.
   Allineato a SERVICE_CARD v1.0.1 (2026-05-19, decisione 11 aggiornata).
   -------------------------------------------------------------------------- */

@media (max-width: 700px) {
	.bg-services-grid .bg-service-card.bg-card--media-side {
		flex-direction: column;
	}

	.bg-services-grid .bg-service-card.bg-card--media-side .bg-card__media {
		flex: none;
		width: 100%;
		aspect-ratio: 3 / 2;
		border-bottom-left-radius: 0;
		border-top-right-radius: var(--radius-card);
	}

	.bg-services-grid .bg-service-card.bg-card--media-side .bg-card__body {
		min-height: 0;
	}

	.bg-services-grid .bg-service-card.bg-card--media-side .bg-card__cta {
		flex-wrap: nowrap;
	}
}

/* CTA singola "Dettagli" allineata a destra, mobile incluso. */
@media (max-width: 600px) {
	.bg-services-grid .bg-service-card.bg-card--media-side .bg-card__cta {
		justify-content: flex-end;
	}
}