/*
 * LAU home - "Aplicaciones" section support layer.
 *
 * Background, colours, padding, radius, the border and every gap come from
 * block attributes and theme.json presets. Only what Gutenberg has no control
 * for lives here: the stretched link, the decorative rule, the hover states and
 * the column counts.
 *
 * Every selector is scoped to .lau-aplicaciones, so nothing here can reach the
 * header, the hero or the previous sections.
 */

.lau-aplicaciones__intro > * {
	max-width: 42rem;
}

.lau-aplicaciones__text {
	font-size: 1rem !important;
	line-height: 1.55 !important;
}

/*
 * The grid is painted in the border colour and its gap is 1px, so what shows
 * between the cards is the container itself: one shared hairline instead of two
 * adjacent borders. `overflow: hidden` is what makes the outer corners clip the
 * cards, and there is no Gutenberg control for it.
 */
.lau-aplicaciones__grid {
	overflow: hidden;
}

/* ---------- Card ---------- */

/*
 * The card is a group, so the anchor inside the heading is stretched over it.
 * That keeps a single link for keyboard and screen reader users while the whole
 * card reacts to the pointer.
 */
.lau-aplicaciones__card {
	position: relative;
	height: 100%;
	transition: background-color 0.3s ease;
}

/*
 * The text colours must travel on the same clock as the card background. If
 * they snap instead, the title reaches paper while the card is still paper, and
 * it disappears for the length of the background transition.
 */
.lau-aplicaciones__num,
.lau-aplicaciones__title,
.lau-aplicaciones__text {
	transition: color 0.3s ease;
}

.lau-aplicaciones__title a {
	color: inherit;
	text-decoration: none;
}

.lau-aplicaciones__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

/*
 * The rule under the copy. Decorative, so it is drawn rather than placed as a
 * block: it grows on hover and it is the one element the demo animates.
 */
.lau-aplicaciones__text::after {
	content: "";
	display: block;
	width: 2rem;
	height: 1px;
	margin-top: 1.25rem;
	background-color: var(--wp--preset--color--spx-primary);
	transition: width 0.5s ease, background-color 0.3s ease;
}

/* ---------- Hover and focus ---------- */

/*
 * Driven from the card, not the anchor, so the number, the title, the copy and
 * the rule all turn together. `:focus-within` gives keyboard users the same
 * state, and the focus ring stays on the anchor itself.
 */
.lau-aplicaciones__card:hover,
.lau-aplicaciones__card:focus-within {
	background-color: var(--wp--preset--color--spx-ink) !important;
}

.lau-aplicaciones__card:hover .lau-aplicaciones__num,
.lau-aplicaciones__card:focus-within .lau-aplicaciones__num {
	color: var(--wp--preset--color--spx-accent) !important;
}

.lau-aplicaciones__card:hover .lau-aplicaciones__title,
.lau-aplicaciones__card:focus-within .lau-aplicaciones__title {
	color: var(--wp--preset--color--spx-paper) !important;
}

.lau-aplicaciones__card:hover .lau-aplicaciones__text,
.lau-aplicaciones__card:focus-within .lau-aplicaciones__text {
	color: var(--wp--preset--color--spx-on-dark-muted) !important;
}

.lau-aplicaciones__card:hover .lau-aplicaciones__text::after,
.lau-aplicaciones__card:focus-within .lau-aplicaciones__text::after {
	width: 4rem;
	background-color: var(--wp--preset--color--spx-accent);
}

.lau-aplicaciones__title a:focus-visible {
	outline: 2px solid var(--wp--preset--color--spx-accent);
	outline-offset: 4px;
}

/* ---------- Columns ---------- */

/*
 * The grid layout writes a fixed four column track, which only holds up on wide
 * screens. Two steps down from there: two columns from the tablet range, one
 * once core/columns stacks everything else.
 */
@media (max-width: 1023px) {
	.lau-aplicaciones__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 781px) {
	.lau-aplicaciones__grid {
		grid-template-columns: 1fr;
	}
}

/* ---------- 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-aplicaciones__intro,
		.lau-aplicaciones__grid {
			animation: lau-aplicaciones-reveal linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 60%;
		}

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

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