/* ==========================================================================
   Spaces We Work In — Services §6 (Figma 10534:3950)

   The section is 1600 x 1123 in the frame. Horizontal geometry is expressed as
   a percentage of that 1600, the same model §4 uses, so the section is either
   Chris's pixels exactly (in a 1600 box) or a faithful scale of them.

   VERTICAL percentages are NOT all against 1600. A percentage margin or padding
   resolves against the CONTAINING BLOCK's width, and for a grid item that is its
   own track, not the section. So gaps inside the left column are written against
   540 and gaps inside the right column against 666. Writing them all against 1600
   is the silent, proportional, error-free-looking way to get this wrong.

   THE ROW MUST BE FULL WIDTH / FULL CONTENT / 0 SIDE PADDING, for the same
   reason it must be on §4.
   ========================================================================== */

.tbl-spaces {
	--tbl-spaces-ink: #0f0f0f;
	--tbl-spaces-ease: cubic-bezier(0.19, 1, 0.22, 1);
	--tbl-spaces-dur: 0.5s;

	/* The gutter shrinks FASTER than the section, so the list gains width as the
	   viewport narrows. Solved rather than picked: the widest label is always
	   "Financial Services" at 7.768 x the list's font-size, and at 1600 it uses
	   388.4 of the wrap's 429 — 9.5% slack. Holding that slack constant at every
	   width gives gutter = 60.873125% - 13.3254 x --h2-font-size, which lands on
	   Chris's 307.97 at 1600 by arithmetic, not by being told to.

	   Why it is not a plain percentage: the type scale is fluid against the
	   VIEWPORT and caps at 50px from 1400 up, while the layout is a percentage of
	   the SECTION. A proportional gutter leaves the list 274.6 at 1024 against a
	   label needing 323.4 — every label wraps, which is what this replaces.

	   The 8.5% floor is the marker's. It lives IN the gutter (80 + 18 = 22.84% of
	   the wrap), so a gutter that keeps shrinking eventually pushes the rule over
	   the well. 8.5% is the width at which it still clears, and it takes over
	   below ~1073. */
	--tbl-spaces-gutter: max(8.5%, calc(60.873125% - 13.3254 * var(--h2-font-size)));

	position: relative;
	display: block;
	padding: 12.4375% 0 12.625%;
	background-color: var(--White);
	color: var(--tbl-spaces-ink);
}

/* H0 — 90 / 88 / -1.5. --h0-font-size caps at 90 from --vp-max (1400) up, and
   --h0-line-height 0.978 gives 88.02 against the node's 88. */
.tbl-spaces__heading {
	/* No width cap. The frame's node measures 722 because that is the ink of
	   "Spaces We Work In" at 90/88, NOT a wrapping box — declaring 45.125% turned
	   a measurement into a constraint and broke the line onto three the moment the
	   section was narrower than its own frame. It now runs the full content width
	   between the two insets and wraps only when the type genuinely will not fit. */
	margin: 0 5.251875% 0 5.251875%;
	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;
}

/* 86.03 inset, 540 well, 307.97 gutter, 666 right column — 100.000% of 1600.
   The tracks carry the geometry so that nothing inside needs a percentage that
   resolves against the wrong box. */
.tbl-spaces__cols {
	display: grid;
	/* The last track is 1fr, not 41.625% — it has to ABSORB what the gutter gives
	   up, or the freed width goes nowhere. At 1600 it still resolves to 666. */
	grid-template-columns: 5.376875% 33.75% var(--tbl-spaces-gutter) 1fr;
	margin-top: 1.2475%;
}

/* The well's height is the RIGHT COLUMN's height — list, its gap, the link, and
   the column's own padding, all one box. Only the left wrapper flattens, so the
   eyebrow and the well can sit in different grid rows; the right wrapper stays a
   real grid item precisely BECAUSE it is the box whose height the well copies.
   .tbl-spaces__list-wrap keeps its own box either way, which matters: it is the
   marker's offsetParent, and the JS reads item.offsetTop against it. */
.tbl-spaces__left {
	display: contents;
}

.tbl-spaces__eyebrow {
	grid-column: 2;
	grid-row: 1;
}

.tbl-spaces__well {
	grid-column: 2;
	grid-row: 2;
}

/* 44 above and 30 below against the 666 track. The content is 378 list + 58 gap
   + 30 link = 466, so the box comes to 540 and the well still lands on Chris's
   540 at 1600 — derived, not declared, and no longer square the moment the list
   reflows.

   The bottom is DELIBERATELY lighter than the top. Optically the list's last
   baseline and the link's underline both sit high in their line boxes, so equal
   padding reads bottom-heavy; 44/30 is what looks balanced. It is not a
   centring, and it should not be "corrected" to one. */
.tbl-spaces__right {
	grid-column: 4;
	grid-row: 2;
	padding-top: 6.606607%;
	padding-bottom: 4.504505%;
}

/* H6 — 16 / 30.91 / 2. The tracking unit is unresolved repo-wide (percent would
   be 0.32px); 2px is the reading tbl-stats-facts.css:95 and tbl-team-grid.css
   already ship and that passed QA, so this section stays on that side of it.
   Uppercase is Ben's call, not the frame's — the node measures 136, which is the
   sentence-case width. Cased in CSS rather than in the field so the DOM text stays
   "Areas of focus"; safe here because a bare <p> carries no accessible name, which
   is the only thing tbl-stats-facts.css's `text-transform: none` is guarding. */
.tbl-spaces__eyebrow {
	/* 43.11 of the 540 track — the frame's eyebrow-to-well gap (337.89 -> 381).
	   It is declared HERE and not on the grid-placement rule above, because this
	   rule is later in the file and its `margin: 0` silently wiped it there: the
	   well sat flush under the eyebrow and the whole left column read as jammed
	   to the top. It cannot go on the well either — a margin on a stretched grid
	   item comes out of its row height and makes it shorter than the list. */
	margin: 0 0 7.983333%;
	text-transform: uppercase;
	font-family: var(--header-font);
	font-size: var(--h6-font-size);
	line-height: 30.91px;
	font-weight: 400;
	letter-spacing: 0.32px;
	color: inherit;
}

/* 540 x 540. overflow: hidden is load-bearing — it is what clips the incoming
   figure's scale(1.1) start. Without it the image spills the well for 500ms. */
.tbl-spaces__well {
	position: relative;
	width: 100%;
	overflow: hidden;
}

/* Every figure is in the DOM and stacked. The resting non-active state is
   opacity 0 AT scale 1.1, so activating a figure is a single class flip and the
   scale has somewhere to travel from. */
.tbl-spaces__figure {
	position: absolute;
	inset: 0;
	z-index: 1;
	margin: 0;
	opacity: 0;
	transform: scale(1.1);
	transition:
		opacity var(--tbl-spaces-dur) var(--tbl-spaces-ease),
		transform var(--tbl-spaces-dur) var(--tbl-spaces-ease);
}

.tbl-spaces__figure.is-active {
	opacity: 1;
	transform: scale(1);
}

/* The outgoing figure sits ABOVE the incoming one while it fades, and holds
   scale(1) as it goes. That is what makes the swap read as a dissolve rather
   than a fade through the page background. */
.tbl-spaces__figure.is-leaving {
	z-index: 2;
	opacity: 0;
	transform: scale(1);
}

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

/* The wrap IS the list's box — 429 of the right column's 666 — because the
   marker positions off it. */
.tbl-spaces__list-wrap {
	position: relative;
	max-width: 64.414414%;
}

/* right: 100% puts the marker's right edge on the wrap's left edge; the 18px
   margin is the frame's gutter (916.03 -> 934.00). It is a rule in the gutter,
   not an underline under a label. Y is written by the JS from each item's
   measured offsetTop. */
.tbl-spaces__marker {
	position: absolute;
	top: 0;
	right: 100%;
	/* 18 and 80 against the wrap's own 429, so the rule keeps its proportion to
	   the list instead of staying 98px wide inside a gutter that is now shrinking
	   toward it. Both resolve to the frame's pixels at 1600. Height stays a
	   literal 3px — it is a hairline, not a proportion. */
	margin-right: 4.195804%;
	display: block;
	width: 18.648019%;
	height: 3px;
	background-color: var(--tbl-spaces-ink);
	transform: translateY(0);
	pointer-events: none;
}

/* The marker's first placement is a JS write, and it must not be animated: an
   armed transition slides the rule down from the list's top edge on every page
   load. The JS adds is-armed one frame after the first write. */
.tbl-spaces.is-armed .tbl-spaces__marker {
	transition: transform var(--tbl-spaces-dur) var(--tbl-spaces-ease);
}

/* theme.css gives every ul an 18px padding-left and a 14px bottom margin, and
   every li:not(:last-child) a 6px padding-bottom. The 6px is what would drift
   the 54px pitch this section is measured on. */
.tbl-spaces__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* H2 — 50 / 54 / 0. --h2-font-size caps at 50 from --vp-max up and
   --h2-line-height is 1.08, so the pitch is 54.00 at 1600. */
.tbl-spaces__list li {
	margin: 0;
	padding: 0;
	font-family: var(--header-font);
	font-size: var(--h2-font-size);
	line-height: var(--h2-line-height);
	font-weight: var(--header-font-weight);
	letter-spacing: 0;
	color: inherit;
	cursor: pointer;
	opacity: 1;
	transition: none;
}

/* The dim is pure CSS and untransitioned, exactly as Motto ships it. Do not
   reimplement it in the JS — the JS owns the image and the marker only. */
.tbl-spaces__list:hover > li {
	opacity: 0.5;
}

.tbl-spaces__list:hover > li:hover {
	opacity: 1;
}

/* theme.css underlines every <a> inside a <ul> at roughly (0,5,3) and its
   declaration is not !important. theme.css is imported UNLAYERED (style.css:26),
   so an unlayered !important here is the same tier and wins on order. */
.tbl-spaces__list a {
	color: inherit;
	text-decoration-line: none !important;
}

/* The frame's 58 (list bottom 808 -> link 866), and now it measures from the list
   again because the link is back in normal flow inside the padded box rather than
   being its own grid row hanging off the well's bottom edge. inline-block is what
   keeps it at its own 185 rather than filling the track. */
.tbl-spaces__link {
	display: inline-block;
	margin-top: 8.708709%;
}

/* ------------------------------------------------------------------ tablet
   and below: the well stacks above the list. The marker has no gutter to live
   in once the list runs full-bleed, so it goes rather than overhanging. */
@media (max-width: 1024px) {

	.tbl-spaces {
		padding: 14% 5.376875%;
	}

	.tbl-spaces__heading {
		margin-left: 0;
		margin-right: 0;
	}

	.tbl-spaces__cols {
		grid-template-columns: 1fr;
		row-gap: 7%;
		margin-top: 5%;
	}

	/* Stacked, the well has no list beside it to take its height from, so it goes
	   back to being a declared square. */
	.tbl-spaces__left,
	.tbl-spaces__right {
		display: block;
		grid-column: 1;
		grid-row: auto;
	}

	.tbl-spaces__right {
		padding-top: 0;
		padding-bottom: 0;
	}

	.tbl-spaces__eyebrow {
		margin-bottom: 0;
	}

	.tbl-spaces__well {
		margin-top: 5%;
		aspect-ratio: 1 / 1;
	}

	.tbl-spaces__list-wrap {
		max-width: none;
	}

	.tbl-spaces__marker {
		display: none;
	}

	.tbl-spaces__link {
		margin-top: 6%;
	}

}

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

	.tbl-spaces__figure,
	.tbl-spaces.is-armed .tbl-spaces__marker {
		transition: none;
	}

}