/* =========================================================================
   Boyle Built — FAQ (Resource Family shared component, Phase I2)

   Accordion rows are native <details>/<summary> — no JavaScript, fully
   keyboard accessible by default, disclosure state exposed to assistive
   tech for free. The chevron rotate is the only interactive styling,
   driven by the [open] attribute selector.

   Two-column grid only at desktop (1025px+), where the Buying Guide
   Figma frame evidences it — mobile/tablet FAQ layout isn't established
   by any interior Figma evidence yet, so both stay a single stacked
   column (conservative, per the Phase I2 brief).
   ========================================================================= */

.faq {
	background-color: var(--color-bg);
}

.faq__header {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: var(--space-section-v) var(--space-section-h) 0;
}

.faq__grid {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 24px var(--space-section-h) var(--space-section-v);
}

.faq__item {
	border: 1px solid var(--color-border-light);
	border-radius: var(--radius-card);
	background-color: var(--color-bg);
}

.faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 20px;
	list-style: none;
	cursor: pointer;
	color: var(--color-ink);
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 14px;
}

.faq__question::-webkit-details-marker {
	display: none;
}

.faq__question:focus-visible {
	outline: 2px solid var(--color-ink);
	outline-offset: -2px;
}

.faq__chevron {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	color: var(--color-body-muted);
	transition: transform 150ms ease;
}

.faq__item[open] .faq__chevron {
	transform: rotate(180deg);
}

.faq__answer {
	margin: 0;
	padding: 0 20px 16px;
	color: var(--color-body-muted);
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 13px;
	line-height: 1.6;
}

.faq__answer p {
	margin: 0;
}

.faq__answer-placeholder {
	font-style: italic;
}

/* -------------------------------------------------------------------------
   Desktop (1025px+)
   ------------------------------------------------------------------------- */

@media (min-width: 1025px) {
	.faq__header {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
	}

	.faq__grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 16px;
	}
}