/*
 * LAU - "Consulta de proyecto" page support layer.
 *
 * Background, borders, radius, padding, shadow and every gap come from block
 * attributes and theme.json presets. Only what Gutenberg has no control for
 * lives here: header clearance, the back-link arrow spacing, the hairline
 * summary grid's column count, the notice glyph and the reveal.
 *
 * Every selector is scoped to .lau-consulta, so nothing here can reach the
 * header or any section of the front page.
 */

/*
 * The header is a fixed overlay everywhere (see header-scroll.js for why it no
 * longer assumes a dark hero), so every page needs to clear it explicitly.
 * Reusing the same published custom property the hero clears itself with keeps
 * this in sync with the header's real height instead of a guessed constant.
 */
.lau-consulta {
	padding-top: calc(var(--lau-header-h, 6rem) + var(--wp--preset--spacing--60));
}

.lau-consulta__back a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}

.lau-consulta__back a:hover {
	color: var(--wp--preset--color--spx-ink);
}

/* ---------- Financial summary ---------- */

/*
 * Same technique as the "Aplicaciones" grid: the group is painted in the
 * border colour and its gap is 1px, so what shows between cells is the
 * container itself - one shared hairline instead of doubled borders.
 */
.lau-consulta__summary {
	overflow: hidden;
}

@media (max-width: 599px) {
	.lau-consulta {
		padding-top: calc(var(--lau-header-h, 5rem) + 1.25rem);
		padding-right: 5vw !important;
		padding-bottom: 2.5rem !important;
		padding-left: 5vw !important;
	}

	.lau-consulta__intro {
		margin-top: 1.25rem !important;
	}

	.lau-consulta__card {
		margin-top: 1.5rem !important;
		padding-top: 1.25rem !important;
		padding-right: 5vw !important;
		padding-bottom: 1.25rem !important;
		padding-left: 5vw !important;
	}

	.lau-consulta__badges,
	.lau-consulta__buttons {
		gap: 0.65rem !important;
	}

	.lau-consulta__project,
	.lau-consulta__summary,
	.lau-consulta__action,
	.lau-consulta__notice {
		margin-top: 1.15rem !important;
	}

	.lau-consulta__summary {
		grid-template-columns: 1fr;
	}

	.lau-consulta__cell {
		padding-top: 0.9rem !important;
		padding-right: 5vw !important;
		padding-bottom: 0.9rem !important;
		padding-left: 5vw !important;
	}

	.lau-consulta__action {
		padding-top: 1rem !important;
		padding-right: 5vw !important;
		padding-bottom: 1rem !important;
		padding-left: 5vw !important;
	}

	.lau-consulta__buttons .wp-block-button,
	.lau-consulta__buttons .wp-block-button__link {
		width: 100%;
	}

	.lau-consulta__buttons .wp-block-button__link {
		justify-content: center;
		padding-right: 5vw !important;
		padding-left: 5vw !important;
	}
}

/* ---------- Footer notice ---------- */

.lau-consulta__notice {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
}

.lau-consulta__notice::before {
	content: "";
	flex: 0 0 auto;
	width: 0.85rem;
	height: 0.85rem;
	margin-top: 0.15rem;
	background-color: var(--wp--preset--color--spx-muted-foreground);
	-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='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='M9 12l2 2 4-4'/%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='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
}

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

/*
 * Scroll-driven, so it needs no JavaScript, and guarded twice: 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-consulta__card {
			animation: lau-consulta-reveal linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 40%;
		}

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

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