/*
 * LAU home - "Enfoque" section support layer.
 *
 * Split out of hero.css so each file owns one section. The rules below were
 * moved verbatim: no selector, value, order or specificity was changed.
 * This stylesheet is enqueued after hero.css, preserving the original cascade
 * order, although the two share no selectors.
 */

/*
 * Structural sector only: background, borders, radius, padding and the gap
 * between cards all come from block attributes. Each card is a core/column, so
 * the two stretch to the same height on their own with no CSS involved.
 * Only two things live here, because Gutenberg has no control for them: the
 * intro measure and the two icon glyphs.
 */
.lau-focus__lead {
	max-width: 56ch;
}

/*
 * Both cards are already the same height, because each one is a core/column and
 * columns stretch. What differed was where the button landed, since the cards
 * hold a different number of pills.
 *
 * The card becomes a vertical flex box and the pill list absorbs the leftover
 * space, so the button is pushed to the same baseline in both. The slack is
 * taken by the pill group rather than by an auto margin on the button, which is
 * what keeps every blockGap exactly as Gutenberg set it. `align-content` holds
 * the pill rows at the top of that now-taller box.
 */
.lau-focus__card {
	display: flex;
	flex-direction: column;
}

.lau-focus__card .lau-focus__pills {
	flex: 1 1 auto;
	align-content: flex-start;
}

.lau-focus__icon {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 0.6rem;
	background-color: var(--wp--preset--color--spx-ink);
}

.lau-focus__icon::before {
	content: "";
	width: 1.2rem;
	height: 1.2rem;
	background-color: var(--wp--preset--color--spx-paper);
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.lau-focus__icon-engineering::before {
	-webkit-mask-image: 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%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M15.5 8.5l-2 5-5 2 2-5z'/%3E%3C/svg%3E");
	mask-image: 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%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M15.5 8.5l-2 5-5 2 2-5z'/%3E%3C/svg%3E");
}

.lau-focus__icon-cadastral::before {
	-webkit-mask-image: 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='M3 20l6-2.5 6 2.5 6-2.5'/%3E%3Cpath d='M9 17.5V9'/%3E%3Cpath d='M15 20v-6'/%3E%3Ccircle cx='15' cy='7' r='3'/%3E%3C/svg%3E");
	mask-image: 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='M3 20l6-2.5 6 2.5 6-2.5'/%3E%3Cpath d='M9 17.5V9'/%3E%3Cpath d='M15 20v-6'/%3E%3Ccircle cx='15' cy='7' r='3'/%3E%3C/svg%3E");
}

/* Readable body copy and action labels; eyebrow labels stay compact. */
.lau-focus__card > p,
.lau-focus__pills p,
.lau-focus__card .wp-block-button__link {
	font-size: 1rem !important;
}

.lau-focus__card > p {
	line-height: 1.6 !important;
}

.lau-focus__pills p {
	line-height: 1.35 !important;
}

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