/**
 * parts/faq.html — HOME/FEATURES/PLANS. Byte-identical across the
 * three pages, which is why this is a template part and not a pattern an
 * editor would have to edit three times.
 */

/*
 * Decorative "hilo desenredándose" line illustration. Mobile ships the
 * heading and rows only, so this stays desktop-only rather than shrinking
 * an illustration mobile never had. Purely decorative (alt="" in markup), so it is hidden rather
 * than described for screen readers.
 */
.faq-section__decoration {
	display: none;
	margin: 0;
}

.faq-section__heading {
	margin-block-end: var(--wp--preset--spacing--45);
}

/* The panel clips at its own edge: let the hand (up to ~60px above it) and the
   thread's wobble (thread-release.js) rise past it. White on white, unseen. */
.faq-section {
	overflow-clip-margin: var(--wp--preset--spacing--60);
}

/*
 * Desktop only: the heading's box overlaps the illustration's
 * own box instead of sitting in a separate row below it (top of the heading
 * lands ~42% down the illustration, bottom ~69% down) — the heading reads as
 * floating over the line drawing, not stacked under a full-width image row.
 * `.faq-section__intro` stacks both children in the same CSS Grid cell
 * (`grid-area: 1 / 1`), sized by the illustration since it's the taller of
 * the two; `align-self: center` on the heading lands it close enough to that
 * overlap without a magic percentage tied to one viewport width. Mobile has
 * no illustration (see the decoration rule above), so this stays scoped to
 * the breakpoint that has one.
 */
@media (min-width: 768px) {

	.faq-section__intro {
		display: grid;
		margin-block-end: var(--wp--preset--spacing--30);
	}

	.faq-section__decoration,
	.faq-section__heading {
		grid-area: 1 / 1;
	}

	.faq-section__decoration {
		display: block;
	}

	.faq-section__decoration svg {
		display: block;
		width: 100%;
		height: auto;
	}

	.faq-section__heading {
		align-self: center;
		margin-block-end: 0;
	}
}

/*
 * /preguntas-frecuentes/ (patterns/faqs-page.php): measures reuse the blog
 * and About Us hero tokens.
 */
.faqs-page__overline {
	margin-block-end: 0;
	font-size: var(--wp--preset--font-size--overline);
	font-weight: 600;
	letter-spacing: var(--wp--custom--letter-spacing--overline);
	text-transform: uppercase;
	color: var(--wp--preset--color--text-brand);
}

h1.faqs-page__title {
	max-inline-size: var(--wp--custom--width--blog-title);
	margin-inline: auto;
}

p.faqs-page__lead {
	max-inline-size: var(--wp--custom--width--article-lead);
	margin-inline: auto;
	margin-block-end: var(--wp--preset--spacing--45);
	color: var(--wp--preset--color--text-secondary);
}

/* "Ver todas las preguntas", the CTA under each page's accordion. */
.faq-section__more {
	margin-block-start: var(--wp--preset--spacing--45);
	font-size: var(--wp--preset--font-size--body-md);
	font-weight: 600;
}

.faq-section__more a {
	color: var(--wp--preset--color--text-primary);
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--border-brand);
	text-decoration-thickness: var(--wp--custom--border--button);
	text-underline-offset: 0.3em;
}

.faq-section__more a:hover {
	color: var(--wp--preset--color--text-brand);
}

/* No questions ticked for this page: no list, so no section (see part-faq.php). */
.faq-section:not(:has(.faq__list)) {
	display: none;
}