/*
 * LAU home - "Delineacion topografica" section support layer.
 *
 * Background, overlay, colours, borders, radius, padding, shadows and the grid
 * gap all come from block attributes and theme.json presets. Only what
 * Gutenberg has no control for lives here: the two glyphs, the flex row that
 * puts the check beside its label, the plan image sizing, the grid stacking and
 * the hover states.
 *
 * Every selector is scoped to .lau-delineacion, so nothing here can reach the
 * header, the hero or the previous sections.
 */

/*
 * The contour texture itself is not defined here. It comes from the shared
 * `lau-topographic-contours` utility in utilities.css, applied to this cover as
 * a second class, so the same pattern can be reused on other sections.
 *
 * What stays here is the stacking, which is specific to core/cover: the inner
 * container computes to z-index `auto`, so without raising it the decorative
 * layer paints over the copy and washes it with a faint veil. The overlay span
 * is deliberately left alone; raising it as well would hide the pattern.
 */
.lau-delineacion > .wp-block-cover__inner-container {
	position: relative;
	z-index: 1;
}

.lau-delineacion__intro > * {
	max-width: 34rem;
}

.lau-delineacion__intro > p:not(:first-child),
.lau-delineacion__item,
.lau-delineacion__cta .wp-block-button__link {
	font-size: 1rem !important;
}

.lau-delineacion__intro > p:not(:first-child),
.lau-delineacion__item {
	line-height: 1.55 !important;
}

.lau-delineacion__cta .wp-block-button__link {
	line-height: 1.15 !important;
}

/* ---------- Service items ---------- */

/*
 * Each item is a paragraph, so the check is drawn as a pseudo-element and the
 * paragraph becomes a flex row to keep the glyph beside the label rather than
 * inline with the text flow.
 */
.lau-delineacion__item {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
}

.lau-delineacion__item::before {
	content: "";
	flex: 0 0 auto;
	width: 0.85rem;
	height: 0.85rem;
	margin-top: 0.15rem;
	background-color: var(--wp--preset--color--spx-primary);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- Coverage note ---------- */

.lau-delineacion__coverage {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 1rem !important;
	line-height: 1.55 !important;
}

.lau-delineacion__coverage::before {
	content: "";
	flex: 0 0 auto;
	width: 0.9rem;
	height: 0.9rem;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- Plan panel ---------- */

.lau-delineacion__plan {
	margin: 0;
}

.lau-delineacion__plan img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0.35rem;
}

/* ---------- Hover ---------- */

@media (hover: hover) {
	.lau-delineacion__item {
		transition:
			transform 0.28s ease,
			box-shadow 0.28s ease,
			border-color 0.28s ease;
	}

	/* transform and box-shadow only: neither takes part in layout, so the grid
	   cannot shift and the block keeps its dimensions. */
	.lau-delineacion__item:hover {
		transform: translateY(-3px);
		box-shadow: var(--wp--preset--shadow--spx-lift);
	}

	.lau-delineacion__cta .wp-block-button__link {
		transition:
			background-color 0.28s ease,
			box-shadow 0.28s ease;
	}

	.lau-delineacion__cta .wp-block-button__link:hover,
	.lau-delineacion__cta .wp-block-button__link:focus-visible {
		background-color: var(--wp--preset--color--spx-primary-strong) !important;
		box-shadow: var(--wp--preset--shadow--spx-lift);
	}
}

@media (prefers-reduced-motion: reduce) {
	.lau-delineacion__item {
		transition: box-shadow 0.28s ease;
	}

	.lau-delineacion__item:hover {
		transform: none;
	}
}

/* ---------- Stacked ---------- */

@media (max-width: 781px) {
	/* The grid is fixed at two columns, which is too narrow here, so the items
	   go to a single column at the same breakpoint core/columns uses to stack. */
	.lau-delineacion__grid {
		grid-template-columns: 1fr;
	}
}