/**
 * Bekaa FAQ ("Before You Take Off") — editorial hairline list.
 *
 * Design intent: quiet, premium, integrated. No floating cards, borders,
 * radii, or shadows. Questions sit as a hairline-divided list on the warm
 * page paper.
 *
 * Motion (FLIP): opening/closing changes document layout INSTANTLY (a single
 * reflow, never animated frame-by-frame), then the displaced rows are glided
 * into place by qa-section.js using `transform` only. Transforms are
 * compositor-driven, so the motion stays smooth even while the parallax,
 * custom cursor, and scroll-reveal are busy on the main thread. We never
 * animate height/grid-rows/max-height (those reflow every frame and stutter).
 * The answer copy fades and eases up as the rows below slide away to reveal
 * it; the open row is marked with a restrained red keyline clear of the text.
 */

.bekaa-qa-section {
	--bekaa-qa-gutter: clamp(56px, 5vw, 96px);
	--bekaa-qa-mobile-gutter: 35px;
	--bekaa-qa-max: 1120px;
	--bekaa-qa-rail: clamp(240px, 18vw, 320px);
	--bekaa-qa-gap: clamp(48px, 5vw, 88px);
	--bekaa-qa-col-gap: clamp(40px, 4.5vw, 80px);
	--bekaa-qa-pad-x: clamp(24px, 2vw, 34px);
	--bekaa-qa-red: #ec1d25;
	--bekaa-qa-ink: #1b1714;
	--bekaa-qa-ink-soft: #3a332d;
	--bekaa-qa-muted: #5c554d;
	--bekaa-qa-line: rgba(20, 12, 8, 0.13);
	--bekaa-qa-line-strong: rgba(20, 12, 8, 0.22);
	--bekaa-qa-bg: #f9f9f9;
	--bekaa-qa-ease: cubic-bezier(0.22, 1, 0.36, 1);
	width: 100vw;
	margin-inline: calc(50% - 50vw);
	background: var(--bekaa-qa-bg);
	padding: clamp(82px, 8vw, 120px) 0;
}

.bekaa-qa-section--charter-white {
	--bekaa-qa-bg: #fff;
}

.bekaa-qa-section,
.bekaa-qa-section * {
	box-sizing: border-box;
}

.bekaa-qa-section__inner {
	display: grid;
	grid-template-columns: minmax(0, var(--bekaa-qa-rail)) minmax(0, var(--bekaa-qa-max));
	column-gap: var(--bekaa-qa-gap);
	align-items: start;
	justify-content: start;
	width: calc(100vw - (var(--bekaa-qa-gutter) * 2));
	max-width: none;
	margin: 0 auto;
}

.bekaa-qa-section__heading {
	width: 100%;
	text-align: left;
}

.bekaa-qa-section__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--bekaa-qa-col-gap);
	align-items: start;
	width: 100%;
}

@media (min-width: 1280px) {
	.bekaa-qa-section {
		--bekaa-qa-gutter: var(--bekaa-page-gutter);
	}
}

.bekaa-qa-section__column {
	display: flex;
	flex-direction: column;
	min-width: 0;
	border-top: 1px solid var(--bekaa-qa-line-strong);
}

/* --- Row --------------------------------------------------------------- */

.bekaa-qa-card {
	position: relative;
	border-bottom: 1px solid var(--bekaa-qa-line);
}

/*
 * While a row is being glided by the FLIP, it carries the section background
 * and sits above its neighbours so it cleanly covers — then uncovers — the
 * answer beneath it as it slides. JS adds/removes this class.
 */
.bekaa-qa-card.is-flipping {
	z-index: 2;
	background: var(--bekaa-qa-bg);
	will-change: transform;
}

/* Restrained red keyline that marks the open row (compositor-only). */
.bekaa-qa-card::before {
	content: "";
	position: absolute;
	inset-block: 18px;
	inset-inline-start: 0;
	inline-size: 2px;
	background: var(--bekaa-qa-red);
	opacity: 0;
	transform: scaleY(0.35);
	transform-origin: top;
	transition:
		opacity 320ms ease,
		transform 520ms var(--bekaa-qa-ease);
}

.bekaa-qa-card.is-open::before {
	opacity: 1;
	transform: scaleY(1);
}

/* --- Trigger ----------------------------------------------------------- */

.bekaa-qa-card__trigger {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: baseline;
	gap: 22px;
	width: 100%;
	padding: 24px 8px 24px var(--bekaa-qa-pad-x);
	border: 0;
	background: transparent;
	color: var(--bekaa-qa-ink-soft);
	font-family: var(--bekaa-button-font);
	font-size: 1.03125rem;
	font-weight: 500;
	line-height: 1.42;
	letter-spacing: 0.002em;
	text-align: left;
	cursor: pointer;
	appearance: none;
	transition: color 240ms ease;
}

.bekaa-qa-card.is-open .bekaa-qa-card__trigger {
	color: var(--bekaa-qa-ink);
}

.bekaa-qa-card__trigger:focus-visible {
	outline: 1px solid rgba(236, 29, 37, 0.5);
	outline-offset: 3px;
}

.bekaa-qa-card__question {
	min-width: 0;
	flex: 1 1 auto;
}

/* --- Plus / minus mark ------------------------------------------------- */

.bekaa-qa-card__mark {
	position: relative;
	flex: 0 0 auto;
	align-self: center;
	inline-size: 15px;
	block-size: 15px;
	color: var(--bekaa-qa-line-strong);
	transition: color 240ms ease;
}

.bekaa-qa-card__mark::before,
.bekaa-qa-card__mark::after {
	content: "";
	position: absolute;
	inset-inline-start: 50%;
	inset-block-start: 50%;
	inline-size: 13px;
	block-size: 1px;
	background: currentColor;
	transform: translate3d(-50%, -50%, 0);
	transition: transform 420ms var(--bekaa-qa-ease);
}

.bekaa-qa-card__mark::after {
	transform: translate3d(-50%, -50%, 0) rotate(90deg);
}

.bekaa-qa-card.is-open .bekaa-qa-card__mark {
	color: var(--bekaa-qa-red);
}

.bekaa-qa-card.is-open .bekaa-qa-card__mark::after {
	transform: translate3d(-50%, -50%, 0) rotate(0deg);
}

/* --- Answer panel (grid-row glide; no JS height measurement) ----------- */

.bekaa-qa-card__panel {
	display: grid;
	grid-template-rows: 0fr;
	background: transparent;
}

.bekaa-qa-card.is-open .bekaa-qa-card__panel {
	grid-template-rows: 1fr;
}

.bekaa-qa-card__answer {
	overflow: hidden;
	min-block-size: 0;
	padding: 0 var(--bekaa-qa-pad-x) 0 var(--bekaa-qa-pad-x);
	color: var(--bekaa-qa-muted);
	font-family: var(--bekaa-system-font, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif);
	font-size: var(--bekaa-type-copy, 15px);
	line-height: 1.72;
}

/* Own the rendered answer node so Jupiter's paragraph default cannot replace
 * the measured 14px / 25.2px FAQ treatment on normal site documents. */
.bekaa-qa-card__answer p:where(body:not(.bekaa-charter-planner-page):not(.bekaa-charter-landing-prototype-page) *):not(:where([data-bekaa-charter-scope], [data-bekaa-charter-scope] *)) {
	font-size: var(--bekaa-type-copy-compact);
	line-height: calc(var(--bekaa-type-copy-compact) * 1.8);
}

.bekaa-qa-card.is-open .bekaa-qa-card__answer {
	padding-bottom: 28px;
}

.bekaa-qa-card__answer > * {
	max-width: 58ch;
	margin-block-start: 0;
	margin-block-end: 0.9em;
	opacity: 0;
	transform: translate3d(0, 10px, 0);
	transition:
		opacity 480ms cubic-bezier(0.16, 1, 0.3, 1) 120ms,
		transform 560ms cubic-bezier(0.16, 1, 0.3, 1) 120ms;
}

.bekaa-qa-card__answer > *:last-child {
	margin-block-end: 0;
}

.bekaa-qa-card.is-revealed .bekaa-qa-card__answer > * {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

.bekaa-qa-card__answer a {
	color: var(--bekaa-qa-red);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

/* --- Hover (fine pointers only) ---------------------------------------- */

@media (hover: hover) and (pointer: fine) {
	.bekaa-qa-card__trigger:hover {
		color: var(--bekaa-qa-ink);
	}

	.bekaa-qa-card__trigger:hover .bekaa-qa-card__mark {
		color: var(--bekaa-qa-red);
	}
}

/* --- Responsive -------------------------------------------------------- */

@media (max-width: 1180px) {
	.bekaa-qa-section__inner {
		grid-template-columns: 1fr;
		row-gap: clamp(36px, 4vw, 52px);
	}

	.bekaa-qa-section__list {
		max-width: var(--bekaa-qa-max);
	}
}

@media (max-width: 767px) {
	.bekaa-qa-section {
		--bekaa-qa-pad-x: 0px;
		padding: 68px 0 76px;
	}

	.bekaa-qa-section__inner {
		width: calc(100vw - (var(--bekaa-qa-mobile-gutter) * 2));
		row-gap: 32px;
	}

	.bekaa-qa-section__list {
		grid-template-columns: 1fr;
	}

	/* Single column: avoid a doubled hairline where the columns meet. */
	.bekaa-qa-section__column + .bekaa-qa-section__column {
		border-top: 0;
	}

	.bekaa-qa-card::before {
		inset-inline-start: -18px;
	}

	.bekaa-qa-card__trigger {
		padding: 21px 4px 21px var(--bekaa-qa-pad-x);
		font-size: 0.96875rem;
		gap: 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bekaa-qa-card::before,
	.bekaa-qa-card__trigger,
	.bekaa-qa-card__mark,
	.bekaa-qa-card__mark::before,
	.bekaa-qa-card__mark::after,
	.bekaa-qa-card__panel,
	.bekaa-qa-card__answer,
	.bekaa-qa-card__answer > * {
		transition: none;
	}
}