/*
 * LAU home - "Portafolio" section support layer.
 *
 * Background, colours, radius, padding, shadows and every gap come from block
 * attributes and theme.json presets. Only what Gutenberg has no control for
 * lives here: the corner clipping, the two button glyphs, the button hovers
 * and the column counts. The cards' own hover comes from the shared
 * `lau-interactive-cards` utility.
 *
 * Every selector is scoped to .lau-proyectos, so nothing here can reach the
 * header, the hero or the previous sections.
 */

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

.lau-proyectos__card h3,
.lau-proyectos__card p:not(.lau-proyectos__category),
.lau-proyectos__cta .wp-block-button__link {
	font-size: 1rem !important;
}

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

.lau-proyectos__card p:not(.lau-proyectos__category) {
	line-height: 1.55 !important;
}

/* ---------- Cards ---------- */

/*
 * The media sits flush against the card edges, so the card has to clip it for
 * the top corners to follow the radius. There is no Gutenberg control for
 * overflow, which is the only reason this is here.
 */
.lau-proyectos__card {
	overflow: hidden;
}

.lau-proyectos__media {
	margin: 0;
}

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

/* ---------- Actions ---------- */

/*
 * Both buttons share a height and put their glyph beside the label, so the row
 * reads as one pair rather than two unrelated controls.
 */
.lau-proyectos__cta .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	transition:
		background-color 0.28s ease,
		border-color 0.28s ease,
		color 0.28s ease,
		transform 0.28s ease,
		filter 0.28s ease;
}

.lau-proyectos__fb .wp-block-button__link::before,
.lau-proyectos__wa .wp-block-button__link::after {
	content: "";
	flex: 0 0 auto;
	width: 1.05rem;
	height: 1.05rem;
	background-color: currentColor;
}

.lau-proyectos__fb .wp-block-button__link::before {
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M22 12.06C22 6.5 17.52 2 12 2S2 6.5 2 12.06c0 5 3.66 9.15 8.44 9.94v-7.03H7.9v-2.9h2.54V9.85c0-2.52 1.5-3.91 3.77-3.91 1.09 0 2.24.2 2.24.2v2.46h-1.26c-1.24 0-1.63.78-1.63 1.57v1.89h2.78l-.44 2.9h-2.34V22c4.78-.79 8.44-4.94 8.44-9.94z'/%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='%23000'%3E%3Cpath d='M22 12.06C22 6.5 17.52 2 12 2S2 6.5 2 12.06c0 5 3.66 9.15 8.44 9.94v-7.03H7.9v-2.9h2.54V9.85c0-2.52 1.5-3.91 3.77-3.91 1.09 0 2.24.2 2.24.2v2.46h-1.26c-1.24 0-1.63.78-1.63 1.57v1.89h2.78l-.44 2.9h-2.34V22c4.78-.79 8.44-4.94 8.44-9.94z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* The outbound arrow trails the label, so it goes on ::after. */
.lau-proyectos__wa .wp-block-button__link::after {
	width: 0.85rem;
	height: 0.85rem;
	-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.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7'/%3E%3Cpath d='M8 7h9v9'/%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.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7'/%3E%3Cpath d='M8 7h9v9'/%3E%3C/svg%3E") center / contain no-repeat;
}

.lau-proyectos__fb .wp-block-button__link:hover {
	filter: brightness(1.08);
}

/*
 * The outline button fills on hover. The preset colour classes are emitted with
 * `!important`, so the swap has to match that weight to win.
 */
.lau-proyectos__wa .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--spx-ink) !important;
	border-color: var(--wp--preset--color--spx-ink) !important;
	color: var(--wp--preset--color--spx-paper) !important;
}

@media (prefers-reduced-motion: reduce) {
	.lau-proyectos__cta .wp-block-button__link:hover {
		transform: none;
	}
}

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

/*
 * The grid layout writes a fixed three column track. Two columns from the
 * tablet range, one once core/columns stacks everything else.
 */
@media (max-width: 1023px) {
	.lau-proyectos__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 781px) {
	.lau-proyectos__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-proyectos__intro,
		.lau-proyectos__grid,
		.lau-proyectos__cta {
			animation: lau-proyectos-reveal linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 60%;
		}

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

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