/* ==========================================================================
   FAQ — reusable band (Figma 11357:5406)

   The frame is 1241 wide inside a 1598 band. Its 157 / 202 page gutters are
   wireframe drift, so the shipped content box is whatever the BB row gives —
   measured at 1400 at a viewport of 1600 — and every horizontal number here is a
   PERCENTAGE OF THAT BOX, not of Chris's 1241. That is why the section paints
   no background, declares no padding, and sets no width: the BB row owns the
   #FAFAFA band and the section spacing, exactly as it does on §4 and §6.

   The one thing that is NOT a percentage is the question row: 63 tall, text 8
   in, 20/30 type. Those are the numbers the design reads as, and scaling them
   with the column would make a 1600 row 73 tall against a frame that says 63.
   ========================================================================== */

.tbl-faq {
	--tbl-faq-ink: #0f0f0f;
	--tbl-faq-rule: #d7d7d7;
	--tbl-faq-answer: #8b8b8b;
	--tbl-faq-ease: cubic-bezier(0.19, 1, 0.22, 1);
	--tbl-faq-dur: 0.45s;

	display: block;
	color: var(--tbl-faq-ink);
}

/* ------------------------------------------------------------------ title */

/* Frame gap 10 between the heading and the eyebrow. A percentage row-gap in a
   flex column resolves against a block size that is `auto` here, so this one
   stays a literal. */
.tbl-faq__head {
	display: block;
}

/* H0 — 90 / 88 / -1.5. --h0-font-size caps at 90 from --vp-max up and
   --h0-line-height 0.978 gives 88.02 against the node's 88.

   NO WIDTH CAP. The heading node measures 431, which is the ink of the string
   "Questions?" at 90/88 and not a wrapping box — tbl-spaces-we-work-in.css:52-58
   records what happens when a measurement like that is declared as a width. */
.tbl-faq__heading {
	margin: 0;
	font-family: var(--header-font);
	font-size: var(--h0-font-size);
	line-height: var(--h0-line-height);
	font-weight: var(--header-font-weight);
	letter-spacing: -1.5px;
	color: inherit;
}

/* H6 — 16 / 30.91. The frame tracks 0.32px, which is Figma's "2" read as 2%.
   tbl-stats-facts, tbl-team-grid and tbl-spaces-we-work-in all ship 2px and
   passed QA; a lone 0.32px eyebrow on a page beside them would read as the
   defect. Cased in CSS, not in the field, so the DOM text stays as typed —
   safe here because a bare <p> carries no accessible name. */
.tbl-faq__eyebrow {
	margin: 10px 0 0;
	text-transform: uppercase;
	font-family: var(--header-font);
	font-size: var(--h6-font-size);
	line-height: 30.91px;
	font-weight: 400;
	letter-spacing: 2px;
	color: #000000;
}

/* ------------------------------------------------------------------- body */

/* 538 / 74 / 627 of the frame's 1239 content box = 43.42 / 5.97 / 50.61. The
   accordion track is 1fr rather than 50.61% so it absorbs any rounding instead
   of leaving it in a phantom fourth column. The 25 section gap is 2.0145% of
   the same box, so it scales with everything else. */
.tbl-faq__body {
	display: grid;
	grid-template-columns: 43.42% 1fr;
	column-gap: 5.97%;
	margin-top: 2.0145%;
}

/* ------------------------------------------------------------------ photo */

/* align-self: start is load-bearing. A stretched photo would take its height
   from the accordion and therefore RESIZE ON EVERY TOGGLE. Its height comes
   from its own ratio, or from an author override, and never from its sibling. */
.tbl-faq__media {
	position: relative;
	align-self: start;
	overflow: hidden;
	/* width is DECLARED, not left to the aspect ratio. Without it a Photo Max
	   Height shrinks the box in both axes — a 400px cap took the well from
	   608 x 687 to 353 x 399 and opened a gap beside the photo. Pinning the width
	   leaves max-height as a crop, which is what a cap is supposed to be. */
	width: 100%;
	aspect-ratio: var(--tbl-faq-photo-ratio, 88.5) / 100;
	height: var(--tbl-faq-photo-height, auto);
	max-height: var(--tbl-faq-photo-max-height, none);
}

/* No photo means no empty column — the accordion takes the whole box. */
.tbl-faq__media.is-empty {
	display: none;
}

.tbl-faq__media.is-empty + .tbl-faq__list {
	grid-column: 1 / -1;
}

.tbl-faq__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* The photo drifts as the section travels the viewport. The theme's own parallax
   class is `.parallax-up-background`, which animates `background-position` on a BB
   row's `.fl-row-content-wrap` — it cannot drive an <img> inside a module, so this
   is written locally in the theme's idiom rather than reusing it: a scroll-driven
   `animation-timeline: view()`, feature-queried, and off entirely under reduced
   motion.

   The image is given 120% of the well's height so it has somewhere to travel. It
   starts at -16.666% of its OWN height, which is exactly 0.2 of the well — so the
   well is fully covered at both ends of the range and never shows a bare edge.
   `cover 0% -> cover 100%` runs the whole time the section is on screen, which is
   what makes it read as a drift rather than a reveal. */
@media (prefers-reduced-motion: no-preference) {

	@supports (animation-timeline: view()) {

		/* A NAMED timeline, not a bare `view()`. `view()` resolves against the
		   element's nearest scrollport, and `.tbl-faq__media` carries
		   `overflow: hidden` — which makes it a scroll container. The image's own
		   view progress inside a box that never scrolls is a constant, so a bare
		   `view()` on the image produced a fixed transform at every scroll position
		   (measured: translateY stuck at -74.9px from first paint to last).
		   Naming the timeline on the well measures the WELL against the document,
		   which is the thing that actually moves. */
		.tbl-faq__media {
			view-timeline-name: --tbl-faq-photo;
		}

		.tbl-faq__img {
			height: 120%;
			will-change: transform;
			animation: tbl-faq-photo-drift linear both;
			animation-timeline: --tbl-faq-photo;
			animation-range: cover 0% cover 100%;
		}

	}

}

@keyframes tbl-faq-photo-drift {
	from {
		transform: translate3d(0, -16.666%, 0);
	}
	to {
		transform: translate3d(0, 0, 0);
	}
}

/* --------------------------------------------------------------- the rows */

/* The photo is the taller of the two tracks, so the accordion sits centred
   against it rather than hanging from the top. It is `center`, not a stretch —
   a stretched list would have to distribute the slack somewhere, and the only
   places to put it are the row pitch or the dividers, both of which are
   measured. Opening a row grows the list downward from the new centre; once the
   list is taller than the photo this resolves to the same thing as `start`. */
.tbl-faq__list {
	align-self: center;
	min-width: 0;
}

/* The rows cascade in on `.fade-in-list-items-on-scroll` (theme.css:23176), which
   runs `scroll-fade-scale-in` and ends on `opacity: var(--opacity-in)`.

   The theme declares `--opacity-in` on `.scroll-fade-up-in` and on
   `.fade-in-on-scroll.scroll-reset` — but NOT on `.fade-in-list-items-on-scroll`,
   so for a plain list the keyframe's `to` opacity is a guaranteed-invalid value
   and the items finish the animation still invisible. Measured: opacity 0 before,
   during and after the scroll range, in Chromium and WebKit alike.

   Declaring it here uses the theme's own machinery rather than overriding it.
   The same gap sits under six other modules that ship this class
   (icon-accordion, icon-callouts, image-callouts, numbered-callouts,
   detailed-numbered-callouts, side-by-side-banner) and is worth fixing at the
   theme; this is the one-line local version so the module ships correct. */
.tbl-faq__list.fade-in-list-items-on-scroll > .tbl-faq__item {
	--opacity-in: 1;
}

/* The <h3> exists only to carry the button in the accessibility tree. It must
   contribute no type of its own — theme.css sizes h3 off the fluid scale. */
.tbl-faq__q-wrap {
	margin: 0;
	padding: 0;
	font: inherit;
	font-size: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	font-weight: inherit;
	color: inherit;
}

/* 627 x 63 with the text 17 from the top, 16 from the bottom and 8 in from the
   left. min-height rather than height: a question long enough to wrap must grow
   the row rather than be clipped by it, and at 1600 the natural height is 63
   anyway (17 + 30 + 16). */
.tbl-faq__q {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	box-sizing: border-box;
	width: 100%;
	min-height: 63px;
	margin: 0;
	padding: 17px 0 16px 8px;
	border: 0;
	border-radius: 0;
	background: transparent;
	text-align: left;
	cursor: pointer;
	font-family: var(--body-font);
	font-size: 20px;
	line-height: 30px;
	font-weight: 400;
	letter-spacing: 0.2px;
	color: #000000;
}

/* The divider belongs to the ROW, at its bottom, and runs the full column width
   — the frame's 609 of 627 is the icon's right edge plus 18px of drift. Six rows
   give six dividers and none above row one, which falls out of it being a bottom
   rule rather than a separator between items. The open row's answer therefore
   sits BELOW its own divider, with nothing between it and the next row. */
.tbl-faq__q::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 1px;
	background-color: var(--tbl-faq-rule);
}

/* theme.css strips the outline from every button, so focus has to be drawn back
   here or the keyboard path is invisible. (0,2,0) clears its (0,1,1). */
.tbl-faq__q:focus-visible {
	outline: 2px solid var(--tbl-faq-ink);
	outline-offset: -2px;
}

.tbl-faq__q-text {
	display: block;
	min-width: 0;
}

/* ------------------------------------------------------------------- icon */

/* 24 x 24 box holding two 14 x 2 bars. Open rotates the vertical bar onto the
   horizontal one, so the open state IS a single 14 x 2 bar rather than a second
   glyph swapped in. aria-hidden in the markup; no accessible name. */
.tbl-faq__icon {
	position: relative;
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
}

.tbl-faq__icon::before,
.tbl-faq__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14px;
	height: 2px;
	background-color: #000000;
	transform: translate(-50%, -50%);
	transition: transform var(--tbl-faq-dur) var(--tbl-faq-ease);
}

.tbl-faq__icon::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

.tbl-faq__q.is-open .tbl-faq__icon::after {
	transform: translate(-50%, -50%) rotate(0deg);
}

/* ------------------------------------------------------------------ panel */

/* 0fr -> 1fr on a single-track grid. BOTH sides must be one-track lists or the
   property falls back to a discrete animation and the panel snaps. The one grid
   child carries min-height: 0 and overflow: hidden; without the min-height the
   track never gets below the content's min-content height and 0fr does nothing.

   No padding on the inner — padding survives a 0fr track and leaves a closed
   panel 43px tall. It lives on .tbl-faq__answer instead.

   The panel cannot be styled while it carries `hidden`:
   [hidden] { display: none !important } is in @layer reset, and unlayered
   important declarations are the WEAKEST tier. The JS takes the attribute off
   before opening and puts it back only after the close transition ends. */
.tbl-faq__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--tbl-faq-dur) var(--tbl-faq-ease);
}

.tbl-faq__panel.is-open {
	grid-template-rows: 1fr;
}

.tbl-faq__panel-inner {
	min-height: 0;
	overflow: hidden;
}

/* Divider -> answer 21.8, answer -> next row 21.2, inset 30 from the column's
   left edge. The right inset is the frame's 76 of 609 as a percentage, so the
   measure keeps its proportion as the column grows. */
.tbl-faq__answer {
	padding: 21.8px 12.48% 21.2px 30px;
	font-family: var(--body-font);
	font-size: 15px;
	line-height: 25px;
	font-weight: 400;
	letter-spacing: 0.15px;
	color: var(--tbl-faq-answer);
}

.tbl-faq__answer p {
	margin: 0 0 1em;
	font-size: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	color: inherit;
}

.tbl-faq__answer > *:first-child {
	margin-top: 0;
}

.tbl-faq__answer > *:last-child {
	margin-bottom: 0;
}

.tbl-faq__answer a {
	color: inherit;
}

.tbl-faq__answer strong,
.tbl-faq__answer b {
	font-weight: 700;
	color: inherit;
}

/* ----------------------------------------------------------------- mobile
   The photo stacks above the accordion, both full width. */
@media (max-width: 900px) {

	.tbl-faq__body {
		grid-template-columns: 1fr;
		column-gap: 0;
		row-gap: 6%;
		margin-top: 5%;
	}

	.tbl-faq__media,
	.tbl-faq__list {
		grid-column: 1;
	}

	.tbl-faq__answer {
		padding-right: 8%;
	}

	/* Pastel #160 (Chris) -- "add another 20-25px at the end here on mobile
	   (just to give some extra space)". The last row's rule sat hard against
	   the row's own bottom padding. */
	.tbl-faq__list {
		padding-bottom: 24px;
	}

}

@media (prefers-reduced-motion: reduce) {

	/* The tween goes; the state does not. Rows still open and close — and because
	   transitionend does not fire when the duration is 0, the JS close path has a
	   synchronous branch for exactly this case. */
	.tbl-faq__panel,
	.tbl-faq__icon::before,
	.tbl-faq__icon::after {
		transition: none;
	}

	/* The reveal classes have to be UNDONE here, not merely left un-animated.
	   theme.css parks `.fade-in-on-scroll` and `.fade-in-list-items-on-scroll > *`
	   at `opacity: 0` unconditionally (7886, 7917) and hands the reveal to a
	   `@supports (animation-timeline: view())` block that this media query skips.
	   The jQuery fallback that would otherwise add `.come-fade-in` is gated on
	   `!supportsAnimationTimelineView` (scripts.js:451), so in a modern browser
	   under reduce there is nothing left to turn the opacity back up — the heading,
	   the eyebrow and every question row would simply never appear. The theme has
	   a reset of this shape for viewports under 1024 (theme.css:111-135) but none
	   for reduced motion.

	   Scoped to this section deliberately. The same trap applies to every module
	   using these classes and is worth fixing at the theme, but that is a
	   site-wide change and not this module's to make. */
	.tbl-faq .tbl-faq__heading.fade-in-on-scroll,
	.tbl-faq .tbl-faq__eyebrow.fade-in-on-scroll,
	.tbl-faq .tbl-faq__list.fade-in-list-items-on-scroll > .tbl-faq__item {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}

}