/* =============================================================================
 * LITSLINK BLOCKS — FAQ · 2 in row, accordion (acf/ll-faq-2row-accordion)
 * Variant of ll-faq-2row for the Property-Listing mockup: 2-column grid of
 * BORDERED flat cards; the first item is OPEN by default (light-blue active
 * card, × toggle). Self-contained: block-scoped palette, literal font fallback.
 * ========================================================================== */
.block-ll-faq {
	--faq2-ink: #171c26;
	--faq2-muted: #5a6472;
	--faq2-num: #768297;
	--faq2-accent: #1690d3;
	--faq2-section-bg: #f9fafb;
	--faq2-card-bg: #ffffff;
	--faq2-card-border: #e6eaf0;
	--faq2-active-bg: #eef6fd;
	--faq2-active-border: #bcdcf2;
	--faq2-toggle-bg: #eef0f3;
	font-family: var(--ll-font, 'Montserrat', 'Montserrat-fallback', Arial, sans-serif);
	background: var(--faq2-section-bg);
	padding: 80px 0;
	box-sizing: border-box;
}
.block-ll-faq *,
.block-ll-faq *::before,
.block-ll-faq *::after { box-sizing: border-box; }

.block-ll-faq__inner {
	max-width: 1300px;
	margin: 0 auto;
	padding: 0 70px;
}

/* Header */
.block-ll-faq__head { text-align: center; margin: 0 auto 48px; max-width: 820px; }
.block-ll-faq__eyebrow {
	margin: 0 0 12px;
	font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
	color: var(--faq2-num);
}
.block-ll-faq__title {
	margin: 0; font-size: 40px; line-height: 1.25; font-weight: 700; color: var(--faq2-ink);
}
.block-ll-faq__subtitle {
	margin: 16px auto 0; max-width: 660px; font-size: 16px; line-height: 1.7; color: var(--faq2-muted);
}

/* Two independent columns (split in render) — opening an item only reflows its column */
.block-ll-faq__list { display: flex; align-items: flex-start; gap: 24px; width: 100%; }
.block-ll-faq__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }

/* Item card — bordered flat (per mockup) */
.block-ll-faq__item {
	background: var(--faq2-card-bg);
	border: 1px solid var(--faq2-card-border);
	border-radius: 16px;
	padding: 24px 24px;
	transition: background 0.2s ease, border-color 0.2s ease;
}
/* Open item — light-blue active card + blue border (no floating shadow) */
.block-ll-faq__item--open {
	background: var(--faq2-active-bg);
	border-color: var(--faq2-active-border);
}
.block-ll-faq__q-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	width: 100%;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	text-align: left;
	font-family: inherit;
}
.block-ll-faq__q-text { display: flex; align-items: baseline; gap: 18px; flex: 1 1 0; min-width: 0; }
.block-ll-faq__num {
	flex: 0 0 auto;
	font-size: 16px; font-weight: 600; line-height: 1.5;
	color: var(--faq2-num);
}
.block-ll-faq__item--open .block-ll-faq__num { color: var(--faq2-accent); }
.block-ll-faq__q {
	margin: 0;
	font-size: 17px; font-weight: 700; line-height: 1.5;
	color: var(--faq2-ink);
}
.block-ll-faq__toggle {
	flex: 0 0 34px;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: var(--faq2-toggle-bg);
	color: var(--faq2-num);
	transition: transform 0.25s ease, background 0.2s ease, color 0.2s ease;
}
/* Open → solid accent circle, rotate the + into an × */
.block-ll-faq__item--open .block-ll-faq__toggle {
	background: var(--faq2-accent);
	color: #fff;
	transform: rotate(45deg);
}
.block-ll-faq__answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.block-ll-faq__item--open .block-ll-faq__answer { max-height: 640px; }
.block-ll-faq__answer p {
	margin: 12px 0 0;
	font-size: 15px; line-height: 1.7;
	color: var(--faq2-muted);
	white-space: pre-line;
}
/* Numbered sub-items: any <span> in the answer copy renders as a small blue
   "step" circle. Content convention is "<span>1</span> Title…" per line, so the
   digit sits in a light-blue token circle ahead of the text. Scoped to the
   answer so it never touches the question number/text spans. */
.block-ll-faq__answer p span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	margin-right: 8px;
	border-radius: 50%;
	background: var(--faq2-active-bg);
	border: 1px solid var(--faq2-active-border);
	color: var(--faq2-accent);
	font-size: 13px; font-weight: 600; line-height: 1;
	vertical-align: middle;
}

/* Responsive */
@media (max-width: 1024px) {
	.block-ll-faq { padding: 56px 0; }
	.block-ll-faq__title { font-size: 32px; }
}
@media (max-width: 767px) {
	/* Match library standard: 20px side gutters on mobile (desktop keeps its wide gutter). */
	.block-ll-faq__inner { padding: 0 20px; }
	.block-ll-faq { padding: 44px 0; }
	.block-ll-faq__title { font-size: 26px; }
	.block-ll-faq__head { margin-bottom: 32px; }
	.block-ll-faq__list { flex-direction: column; gap: 12px; }
	.block-ll-faq__col { gap: 12px; }
	.block-ll-faq__item { padding: 20px; }
	.block-ll-faq__q-text { gap: 12px; }
	.block-ll-faq__q { font-size: 15px; }
}

/* 1-column layout: single full-width stack (render emits one __col) */
.block-ll-faq--one .block-ll-faq__col { max-width: 920px; margin: 0 auto; }