/*
 * LAU home - "Servicios generales" section support layer.
 *
 * Background, borders, radius, padding, shadows and the gap between cards all
 * come from block attributes and theme.json presets. Only what Gutenberg has no
 * control for lives here: the intro measure, clipping the image to the card's
 * rounded corners, the structure that keeps the three buttons on one baseline,
 * and the button hover. The cards' own hover comes from the shared
 * `lau-interactive-cards` utility.
 *
 * Every selector is scoped to .lau-services, so nothing here can reach the
 * header, the hero or the previous section.
 */

/*
 * The measure is set on the intro's children, not on the intro itself: a child
 * of a constrained layout that carries a max-width gets auto side margins from
 * Gutenberg and would end up centred. Constraining the children instead keeps
 * the block full width and the copy flush left, as in the reference.
 */
.lau-services__intro > * {
	max-width: 42rem;
}

/*
 * 48px flat, not the fluid clamp spx-headline resolves to (measured ~46.7px
 * at 1440px otherwise) - a deliberate size so the sentence breaks after "y"
 * instead of a third line. `balance` is the mechanism that keeps that break
 * reliable across font-loading timing and sub-pixel rounding, rather than a
 * hand-tuned max-width alone.
 *
 * font-size and line-height need !important: the preset font-size class is
 * emitted with !important from the global stylesheet, and the block's own
 * line-height is a competing inline style - both outrank a plain external
 * rule regardless of selector specificity.
 */
.lau-services__intro h2 {
	max-width: 45rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

/*
 * 48px is a desktop-only figure. Left applying at every width, it wraps this
 * sentence to five lines on a narrow phone (measured at 390px) instead of the
 * fluid spx-headline size mobile already had tuned; scoping it here leaves
 * that untouched and only overrides where the two-line break was asked for.
 *
 * The threshold is 800px, not the usual 640px breakpoint this project uses
 * elsewhere: at 48px the second line ("arquitectura en un solo equipo") is
 * the wider of the two and needs a real ~703px of rendered width to hold on
 * one line. Measured directly - the sentence still broke into three lines as
 * late as 750px, and first cleared two lines at 780px - so 640px would have
 * reintroduced the very three-line wrap this change exists to fix, and 800px
 * leaves margin above the measured crossover.
 */
@media (min-width: 800px) {
	.lau-services__intro h2 {
		font-size: 3rem !important;
		line-height: 1 !important;
	}
}

/*
 * Each card is a core/column, so the three already share one height. The image
 * has to be clipped for the card's radius to hold, and the body absorbs the
 * remaining height so the button lands on the same baseline in all three.
 * The slack is taken by the description rather than by an auto margin on the
 * button, which is what keeps every blockGap exactly as Gutenberg set it.
 */
.lau-services__card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.lau-services__media {
	margin: 0;
}

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

.lau-services__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
}

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

/* Keep service cards readable without changing the global small/xs tokens. */
.lau-services__intro > p:not(:first-child),
.lau-services__body h3,
.lau-services__text,
.lau-services__action .wp-block-button__link {
	font-size: 1rem !important;
}

.lau-services__intro > p:not(:first-child),
.lau-services__text {
	line-height: 1.6 !important;
}

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

/*
 * ---------- 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-services__cards. This
 * file keeps only what is specific to this section's button.
 */

@media (hover: hover) {
	.lau-services__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. Preset colour classes are
	   emitted with !important, so the swap needs the same weight. */
	.lau-services__action .wp-block-button__link:hover,
	.lau-services__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;
	}
}