/*
 * LAU home - "Por que elegirnos" section support layer.
 *
 * Background, colours, borders, radius, padding, shadows and every gap come
 * from block attributes and theme.json presets. Only what Gutenberg has no
 * control for lives here: the icon squares and their glyphs, the check glyphs,
 * the overlap of the deliverables card, the grid stacking and the reveal.
 *
 * Every selector is scoped to .lau-porque, so nothing here can reach the
 * header, the hero or the previous sections.
 */

/*
 * The section carries the shared `lau-technical-grid` utility, whose layer sits
 * at z-index 0. The children compute to `auto`, so they are raised explicitly;
 * without this the grid would paint over the copy.
 *
 * `overflow: hidden` keeps the deliverables card, which is pulled outside the
 * panel on wide screens, from ever widening the page.
 */
.lau-porque {
	overflow: hidden;
}

.lau-porque > * {
	position: relative;
	z-index: 1;
}

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

.lau-porque__item-body h3,
.lau-porque__item-body p,
.lau-porque__check {
	font-size: 1rem !important;
}

.lau-porque__item-body h3 {
	line-height: 1.3 !important;
}

.lau-porque__item-body p,
.lau-porque__check {
	line-height: 1.55 !important;
}

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

/*
 * Each benefit is an icon square beside a title and its description. The icon
 * is an empty group, so the glyph is drawn as a pseudo-element and masked,
 * which keeps the colour under theme.json control.
 */
.lau-porque__icon {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 0.5rem;
	background-color: var(--wp--preset--color--spx-ink);
}

.lau-porque__icon::before {
	content: "";
	width: 1.05rem;
	height: 1.05rem;
	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-porque__icon-precision::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='8'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3Cpath d='M12 2v3M12 19v3M2 12h3M19 12h3'/%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='8'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3Cpath d='M12 2v3M12 19v3M2 12h3M19 12h3'/%3E%3C/svg%3E");
}

.lau-porque__icon-delivery::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='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='M9 13h6M9 17h4'/%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='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='M9 13h6M9 17h4'/%3E%3C/svg%3E");
}

.lau-porque__icon-compliance::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 21h18'/%3E%3Cpath d='M4 21V10l8-5 8 5v11'/%3E%3Cpath d='M9 21v-6h6v6'/%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 21h18'/%3E%3Cpath d='M4 21V10l8-5 8 5v11'/%3E%3Cpath d='M9 21v-6h6v6'/%3E%3C/svg%3E");
}

.lau-porque__icon-experience::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='M12 3l9 5-9 5-9-5z'/%3E%3Cpath d='M3 13l9 5 9-5'/%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='M12 3l9 5-9 5-9-5z'/%3E%3Cpath d='M3 13l9 5 9-5'/%3E%3C/svg%3E");
}

/* ---------- Visual ---------- */

/*
 * The deliverables card overlaps the panel, so it needs a positioning context.
 */
.lau-porque__visual {
	position: relative;
}

/* The plan fills its panel; the panel owns the radius, border and shadow. */
.lau-porque__plan {
	margin: 0;
}

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

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

.lau-porque__check::before {
	content: "";
	flex: 0 0 auto;
	width: 0.85rem;
	height: 0.85rem;
	margin-top: 0.2rem;
	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;
}

/*
 * The card only overlaps once there is room for it to hang outside the panel
 * without touching the page edge. Below that it simply follows the plan, which
 * is why the offsets are opt-in rather than something to undo on small screens.
 */
@media (min-width: 1080px) {
	.lau-porque__deliverables {
		position: absolute;
		bottom: -2.5rem;
		left: -2rem;
		z-index: 2;
		max-width: 21rem;
	}
}

/* ---------- 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-porque__benefits {
		grid-template-columns: 1fr;
	}
}

/* ---------- Reveal ---------- */

/*
 * Scroll-driven, so it needs no JavaScript. Both guards matter: browsers
 * without `animation-timeline` never run it and show the content as it is, and
 * a reduced-motion preference opts out. The content is therefore never hidden
 * by a timeline that failed to resolve.
 */
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.lau-porque__intro,
		.lau-porque__benefits,
		.lau-porque__visual {
			animation: lau-porque-reveal linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 60%;
		}

		@keyframes lau-porque-reveal {
			from {
				opacity: 0;
				transform: translateY(1.5rem);
			}

			to {
				opacity: 1;
				transform: none;
			}
		}
	}
}