/**
 * Oyolloo Elements — FAQ.
 *
 * Figma: node 471:1425 — 1920x500.
 *   grid     357 heading column, then the 1028 list starting at x=752
 *   divider  hairline between the two columns
 *
 * Measured against the 1640 content box: the heading spans 0-357, the hairline
 * sits at 484.5, and the list runs 612-1640. That makes the column gap 255
 * (612 - 357), with the divider floating inside it rather than on a column edge.
 *
 * @package Oyolloo\Elements
 * @since   1.0.0
 */

.oe-faq .oe-section {
	--oe-section-y-start: 0px;
}

.oe-faq__grid {
	display: grid;
	grid-template-columns: 357px 1fr;
	align-items: start;
	gap: 255px;
	position: relative;
}

/* The vertical hairline sitting between the two columns. */
.oe-faq__grid::before {
	content: "";
	position: absolute;
	inset-block: 0;
	left: 484px;
	width: 1px;
	background-color: var(--oe-color-neutral-300);
}

/* Both tracks are free to shrink; see the note in components/accordion.css. */
.oe-faq__grid > * {
	min-width: 0;
}

.oe-faq__title {
	margin: 0;
	/* The column fits "Frequently Asked" on line one; balancing re-breaks it
	   after the first word, which is not how the design reads.
	   `wrap`, not `normal`: `normal` is not one of text-wrap's values
	   (wrap | nowrap | balance | stable | pretty), so it was thrown away as
	   invalid and .oe-h2's `balance` went on winning — silently, since an
	   invalid declaration reports no error and getComputedStyle just shows the
	   value that did apply. */
	text-wrap: wrap;
}

/* Square rows, and no padding above the section - the design runs the grey
   straight up into the block above (pad top 0, bottom 120). */
.oe-faq .oe-accordion__item {
	border-radius: 0;
}

/* Mobile (Figma 471:4267): the heading centres over 50px-tall rows whose
   question drops to 16/18. */
@media (max-width: 767px) {
	.oe-faq .oe-section {
		--oe-section-y-end: var(--oe-space-3xl);
	}

	/* Figma 471:4267 sets 24 between the heading and the first row, not the
	   32 the tablet rule below carries down. It is declared here and repeated
	   after that block, because a media query wins no extra weight -- source
	   order decides between two single-class rules. */
	.oe-faq__grid {
		gap: var(--oe-space-md);
	}

	.oe-faq__title {
		text-align: center;
	}

	.oe-faq .oe-accordion__trigger {
		font-size: var(--oe-body-size);
		line-height: 18px;
	}
}

@media (max-width: 1440px) {
	.oe-faq__grid {
		grid-template-columns: 320px 1fr;
		gap: var(--oe-space-2xl);
	}

	.oe-faq__grid::before {
		display: none;
	}
}

@media (max-width: 1024px) {
	.oe-faq__grid {
		grid-template-columns: 1fr;
		gap: var(--oe-space-lg);
	}
}

/* Last word on the phone gap: this file lists 767 before 1024, so without a
   repeat here the wider query -- which also matches at 393px -- would win. */
@media (max-width: 767px) {
	.oe-faq__grid {
		gap: var(--oe-space-md);
	}
}