/**
 * OSHIDA — home FAQ.
 *
 * @figma 1374:1041  «FAQ» display lettering, 545.75 x 166.38 at y=6088.87
 * @figma 1620:839   masonry 1243 x 1255 at (98.28, 6345.35)
 *                   three 391 columns, 35 column gap, 30 row gap
 *
 * Column heights in the design are 383/429/383 · 455/363/363 · 383/383/429,
 * i.e. three independent stacks sized by their own copy — which is what column
 * balancing produces, so the masonry is `columns`, not a grid. In RTL the first
 * column is the inline-start one, so DOM order is reading order.
 *
 * Owner: work package C1.
 */

.o-home-faq {
	padding-block-end: clamp(64px, 10.67vw, 153.6px);
}

/* --------------------------------------------------------------------------
 * The display lettering
 *
 * Decorative: the section is named by a visually hidden heading. The asset is
 * a provisional 1x crop (outline ~#242424 on ~#1a1a1a) and wants an SVG
 * export of 1374:1041.
 * -------------------------------------------------------------------------- */
.o-home-faq__wordmark {
	margin: 0;
	margin-block-end: var(--o-section-gap-lg);
	text-align: center;
}

.o-home-faq__wordmark-picture {
	display: inline-block;
	inline-size: min(545.75px, 42vw);
}

.o-home-faq__wordmark-img {
	inline-size: 100%;
	block-size: auto;
}

/* --------------------------------------------------------------------------
 * The masonry
 * -------------------------------------------------------------------------- */
.o-home-faq__grid {
	columns: 3;
	column-gap: clamp(16px, 2.43vw, 35px);
}

.o-home-faq__card {
	break-inside: avoid;
	margin-block-end: var(--o-space-md);
	padding: clamp(28px, 3.47vw, 50px) clamp(20px, 2.85vw, 41px);
	border-radius: var(--o-radius-lg);
	background-color: var(--o-veil-card);
}

.o-home-faq__question {
	margin: 0;
	font-size: var(--o-fs-md);
	font-weight: var(--o-fw-black);
	line-height: 1.24;
	letter-spacing: var(--o-track-tight);
	text-align: start;
}

/* The hairline under the question — 1558:818 draws it as a stroke, not a border. */
.o-home-faq__question::after {
	content: "";
	display: block;
	block-size: var(--o-line-width);
	margin-block-start: var(--o-space-xs);
	background-color: var(--o-line);
}

.o-home-faq__answer {
	margin-block-start: var(--o-space-md);
	font-size: var(--o-fs-xs);
	font-weight: var(--o-fw-extralight);
	line-height: 1.68;
	text-align: justify;

	/*
	 * The design sets these at ~14px and --o-text-muted, which computes to
	 * 3.8:1 — below the 4.5:1 body-text floor. Size lifted to the 15px floor
	 * and the wash raised to 0.78 (about 8:1 over the card). See the report.
	 */
	color: var(--o-text);
	opacity: 0.78;
}

.o-home-faq__answer > p {
	margin: 0;
}

.o-home-faq__answer > p + p {
	margin-block-start: var(--o-space-2xs);
}

@media (max-width: 899px) {
	.o-home-faq__grid {
		columns: 2;
	}
}

@media (max-width: 599px) {
	.o-home-faq__grid {
		columns: 1;
	}

	.o-home-faq__wordmark-picture {
		inline-size: min(280px, 62vw);
	}
}