/**
 * Closing block of the classic single-product page — see
 * inc/product-closing.php. Sits directly after the configurator and directly
 * before the footer: a calm light surface with the three reassurance points and
 * the two existing ways to get help (Muestras gratis, Contacto). No fixed
 * min-height or filler: its height is its content.
 */

.ed-product-closing {
	/*
	 * While the configurator still has a required attribute open, the progressive
	 * auto-scroll (assets/js/staggs-configurator-autoscroll.js) publishes
	 * --ed-config-tail so the next attribute can land comfortably mid-screen. The
	 * room is kept ABOVE this block (between the configurator and here), so the
	 * block itself always sits flush against the footer.
	 */
	margin-top: calc(var(--ed-space-lg) + var(--ed-config-tail, 0px));
	padding: var(--ed-space-lg) 16px;
	background-color: var(--ed-color-surface-alt);
}

/* No blockGap between <main> and the footer when this block ends the page. */
.ed-classic-main:has(.ed-product-closing) + .wp-block-template-part {
	margin-block-start: 0;
}

.ed-product-closing__inner {
	max-width: 1140px;
	margin-inline: auto;
}

.ed-product-closing__title {
	margin: 0 0 var(--ed-space-sm);
	font-family: var(--ed-font-heading);
	font-size: var(--ed-font-size-lg);
	font-weight: 500;
	line-height: 1.15;
	color: var(--ed-color-heading);
}

/* Benefits ---------------------------------------------------------------- */

.ed-product-closing__benefits {
	display: grid;
	gap: var(--ed-space-xs);
	margin: 0 0 var(--ed-space-md);
	padding: 0;
	list-style: none;
}

.ed-product-closing__benefit {
	display: flex;
	align-items: center;
	gap: var(--ed-space-xs);
	font-size: var(--ed-font-size-sm);
	font-weight: 600;
	color: var(--ed-color-heading);
}

.ed-product-closing__icon {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	color: var(--ed-color-link);
	background-color: var(--ed-color-surface);
	border-radius: var(--ed-radius-sm);
}

.ed-product-closing__icon svg {
	width: 20px;
	height: 20px;
}

/* Help cards ---------------------------------------------------------------- */

.ed-product-closing__help {
	display: grid;
	gap: var(--ed-space-sm);
}

.ed-product-closing__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: var(--ed-space-md);
	background-color: var(--ed-color-surface);
	border: 1px solid var(--ed-color-border);
	border-radius: var(--ed-radius-md);
}

.ed-product-closing__card-title {
	margin: 0 0 var(--ed-space-3xs);
	font-family: var(--ed-font-heading);
	font-size: var(--ed-font-size-md);
	font-weight: 600;
	line-height: 1.25;
	color: var(--ed-color-heading);
}

.ed-product-closing__card-text {
	margin: 0 0 var(--ed-space-sm);
	font-size: var(--ed-font-size-sm);
	color: var(--ed-color-muted);
}

/* Button pushed to the card's bottom so both cards' buttons line up. */
.ed-product-closing__card .wp-block-button {
	margin-top: auto;
}

@media (max-width: 599px) {
	.ed-product-closing__card .wp-block-button,
	.ed-product-closing__card .wp-block-button__link {
		width: 100%;
	}
}

@media (min-width: 768px) {
	.ed-product-closing {
		margin-top: calc(var(--ed-space-xl) + var(--ed-config-tail, 0px));
		padding-block: var(--ed-space-xl);
	}

	.ed-product-closing__title {
		margin-bottom: var(--ed-space-md);
		text-align: center;
	}

	.ed-product-closing__benefits {
		grid-template-columns: repeat(3, auto);
		justify-content: center;
		gap: var(--ed-space-md) var(--ed-space-xl);
		margin-bottom: var(--ed-space-lg);
	}

	.ed-product-closing__help {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--ed-space-md);
	}

	.ed-product-closing__card {
		padding: var(--ed-space-lg);
	}
}

@media (min-width: 1200px) {
	.ed-product-closing {
		padding-inline: 0;
	}
}