/**
 * Blocchi condivisi fra il configuratore della home e la pagina prodotto:
 * riquadro WhatsApp "Dubbi sulla misura?" e le quattro schede vantaggi
 * (template-parts/sections/config-help.php e config-benefits.php).
 */

/* --- Box WhatsApp ----------------------------------------------------------- */

.c-config__help {
	display: grid;
	gap: var(--easybed-space-2);
	justify-items: start;
	padding: var(--easybed-space-4);
	border-radius: var(--easybed-radius-s);
	background-color: var(--easybed-color-surface);
}

.c-config__help-title {
	margin: 0;
	font-weight: var(--easybed-font-weight-semibold);
	color: var(--easybed-color-navy);
}

.c-config__help-link {
	display: inline-flex;
	align-items: center;
	gap: var(--easybed-space-2);
	min-block-size: 2.75rem;
	padding-inline: var(--easybed-space-4);
	border: 2px solid var(--easybed-color-navy);
	border-radius: var(--easybed-radius-pill);
	color: var(--easybed-color-navy);
	font-weight: var(--easybed-font-weight-bold);
	text-decoration: none;
	transition: background-color var(--easybed-transition), color var(--easybed-transition);
}

.c-config__help-link:hover {
	background-color: var(--easybed-color-navy);
	color: var(--easybed-color-navy-contrast);
}

.c-config__help-icon {
	inline-size: 1.25rem;
	block-size: 1.25rem;
	fill: currentColor;
}

.c-config__help-hours {
	margin: 0;
	font-size: var(--easybed-font-size-s);
	color: var(--easybed-color-text-muted);
}

/* --- Vantaggi ---------------------------------------------------------------- */

.c-config__benefits {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--easybed-space-4);
	margin: var(--easybed-space-7) 0 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 40em) {
	.c-config__benefits {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64em) {
	.c-config__benefits {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.c-config__benefit {
	padding: var(--easybed-space-5);
	border-radius: var(--easybed-radius-m);
	background-color: var(--easybed-color-surface-alt);
	box-shadow: 0 10px 30px rgba(21, 57, 106, 0.05);
}

.c-config__benefit-icon {
	inline-size: 2.5rem;
	block-size: 2.5rem;
	margin-block-end: var(--easybed-space-3);
	color: var(--easybed-color-accent);
}

.c-config__benefit-title {
	margin: 0 0 var(--easybed-space-2);
	font-family: var(--easybed-font-heading);
	font-size: var(--easybed-font-size-m);
	font-weight: var(--easybed-font-weight-bold);
	line-height: 1.3;
	color: var(--easybed-color-navy);
}

.c-config__benefit-text {
	margin: 0;
	font-size: var(--easybed-font-size-s);
	line-height: 1.6;
	color: var(--easybed-color-text-muted);
}

.c-config__help-link:focus-visible {
	outline: var(--easybed-focus-width) solid var(--easybed-color-focus);
	outline-offset: var(--easybed-focus-offset);
}

/* Nella pagina prodotto i due blocchi stanno in una sezione propria. */
.c-product-extras {
	padding-block: var(--easybed-space-7);
}

.c-product-extras .c-config__benefits {
	margin-block-start: 0;
}

.c-product-extras .c-config__help {
	margin-block-start: var(--easybed-space-5);
	padding: var(--easybed-space-5);
	justify-items: center;
	text-align: center;
}