/*
 * LAU home - "Servicios de topografia" section support layer.
 *
 * Background, 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 intro measure, making the photo fill the card height,
 * the structure that keeps the buttons on a consistent baseline, the button
 * glyph and the button hover. The cards' own hover comes from the shared
 * `lau-interactive-cards` utility.
 *
 * Every selector is scoped to .lau-topo, so nothing here can reach the header,
 * the hero or the previous sections.
 */

/* Constrained on the children, not the block: a child of a constrained layout
   carrying a max-width gets auto side margins and would end up centred. */
.lau-topo__intro > * {
	max-width: 46rem;
}

/*
 * Each card is a core/columns block placed in a grid cell, so cards in the same
 * row already share one height. The media column stretches with it and the
 * photo is told to fill that height; the body absorbs the rest so the button
 * keeps a consistent position. The slack is taken by the description rather
 * than by an auto margin on the button, which keeps every blockGap intact.
 */
.lau-topo__card {
	overflow: hidden;
}

.lau-topo__media {
	margin: 0;
	height: 100%;
}

.lau-topo__media img {
	display: block;
	width: 100%;
	height: 100%;
}

.lau-topo__body {
	display: flex;
	flex-direction: column;
}

.lau-topo__text {
	flex: 1 1 auto;
}

/* The card titles, descriptions and CTAs are primary reading/action text. */
.lau-topo__body h3,
.lau-topo__text,
.lau-topo__action .wp-block-button__link {
	font-size: 1rem !important;
}

.lau-topo__body h3,
.lau-topo__action .wp-block-button__link {
	line-height: 1.25 !important;
}

.lau-topo__text {
	line-height: 1.6 !important;
}

/* ---------- Button glyph ---------- */

.lau-topo__action .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	text-decoration: none;
}

.lau-topo__action .wp-block-button__link::before {
	content: "";
	flex: 0 0 auto;
	width: 0.95rem;
	height: 0.95rem;
	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='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8z'/%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='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/*
 * ---------- Button hover ----------
 *
 * The cards are not here any more: their lift, shadow and border come from the
 * shared `lau-interactive-cards` utility, applied to .lau-topo__grid. This file
 * keeps only what is specific to this section's button.
 */

@media (hover: hover) {
	.lau-topo__action .wp-block-button__link {
		transition:
			background-color 0.28s ease,
			border-color 0.28s ease,
			color 0.28s ease;
	}

	/* Same warm accent as the header phone button. The glyph is painted with
	   currentColor, so it follows the label. Preset colour classes are emitted
	   with !important, hence the same weight here. */
	.lau-topo__action .wp-block-button__link:hover,
	.lau-topo__action .wp-block-button__link:focus-visible {
		background-color: var(--wp--preset--color--spx-primary) !important;
		border-color: var(--wp--preset--color--spx-primary);
		color: var(--wp--preset--color--spx-paper) !important;
	}
}

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

/*
 * core/columns stacks its own columns at 782px, at which point the photo is no
 * longer a full-height strip but a band above the copy, so it needs a height of
 * its own to keep a consistent proportion.
 */
@media (max-width: 781px) {
	/* The grid is fixed at two columns, which is far too narrow here, so the
	   four cards go to a single column at the same breakpoint core/columns
	   uses to stack. */
	.lau-topo__grid {
		grid-template-columns: 1fr;
	}

	.lau-topo__media,
	.lau-topo__media img {
		height: 12rem;
	}
}