/*
 * LAU home - "A quien atendemos" section support layer.
 *
 * Background, colours, border, radius, padding and every gap come from block
 * attributes and theme.json presets; the hover treatment comes from the shared
 * `lau-interactive-cards` utility on the grid. Only what Gutenberg has no
 * control for lives here: the icon squares and their glyphs, the two column
 * layout of each list, the rules under the items, their arrows and the column
 * counts.
 *
 * Every selector is scoped to .lau-atendemos, so nothing here can reach the
 * header, the hero or the previous sections.
 */

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

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

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

.lau-atendemos__icon::before {
	content: "";
	width: 1.15rem;
	height: 1.15rem;
	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-atendemos__icon-empresas::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='M5 21V4a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v17'/%3E%3Cpath d='M14 9h4a1 1 0 0 1 1 1v11'/%3E%3Cpath d='M8 7h3M8 11h3M8 15h3'/%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='M5 21V4a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v17'/%3E%3Cpath d='M14 9h4a1 1 0 0 1 1 1v11'/%3E%3Cpath d='M8 7h3M8 11h3M8 15h3'/%3E%3C/svg%3E");
}

.lau-atendemos__icon-particulares::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='8' r='4'/%3E%3Cpath d='M4 21v-1a6 6 0 0 1 6-6h4a6 6 0 0 1 6 6v1'/%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='8' r='4'/%3E%3Cpath d='M4 21v-1a6 6 0 0 1 6-6h4a6 6 0 0 1 6 6v1'/%3E%3C/svg%3E");
}

/* ---------- Client list ---------- */

/*
 * The block stays a real <ul>, so the marker and the browser indent are cleared
 * here and the items are laid out as a two column grid. Editing the list in
 * Gutenberg is unaffected: this is presentation only.
 */
.lau-atendemos__items {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 var(--wp--preset--spacing--50);
	padding-left: 0;
	list-style: none;
}

.lau-atendemos__items li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.55rem 0;
	border-bottom: 1px solid var(--wp--preset--color--spx-border);
	font-size: 1rem !important;
	line-height: 1.4;
}

/* The arrow reads as a spec sheet reference rather than a bullet. */
.lau-atendemos__items li::before {
	content: "";
	flex: 0 0 auto;
	width: 0.7rem;
	height: 0.7rem;
	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='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;
}

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

/*
 * The section grid is fixed at two columns and the lists inside at two more,
 * which is too much at once. The cards stack first, then the lists, so a list
 * never drops to one column while its card is still sharing the row.
 */
@media (max-width: 1023px) {
	.lau-atendemos__grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 599px) {
	.lau-atendemos__items {
		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-atendemos__intro,
		.lau-atendemos__grid {
			animation: lau-atendemos-reveal linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 60%;
		}

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

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