/* "Problems we solve" vertical tab panel (01–06 numbered slats → panel that opens in place).
   Figma: desktop node 4788:50926, mobile node 4788:50988, open/closed states 5941:13615
   (file 56865ZdhldocXtLwtfkUFP).

   All values reference theme.json tokens (--wp--preset--* / --wp--custom--*); no hardcoded design
   values. Loads on both frontend and editor (block.json "style") so the ServerSideRender preview
   is faithful.

   Token mapping (Figma → theme.json):
     - slat bg (navy)            → surface-invert-secondary   - active slat bg (purple) → surface-accent
     - slat label / right border → neutral-100 (white)        - slat right border width → border.md (2px)
     - panel bg                  → surface-subtle             - eyebrow/title/body/list → text-default
     - title size                → heading-lg (32px)          - list heading size       → heading-sm (20px)
     - tags divider (green)      → text-active (#78bf26)       - tag border (light gray) → blue-300 (#b5bec9)
     - tag radius                → radius.md (4px)            - tag border width        → border.sm (1px)
     - panel slide duration      → motion.duration-sm (300ms) - panel slide easing      → ease (theme convention)
     - closed-slat hover bg      → blue-700 (#516982)         - hover transition        → motion.duration-sm / ease
   The single Figma variable `text-active` is multi-bound in this frame (the documented M1 drift):
   it resolves to white on the slats, green on the tags divider, and light-gray on the tag borders.
   Rather than route all three through one preset, each is mapped to the theme token that matches its
   actual rendered value (neutral-100 / text-active / blue-300) — token-exact, no invented values.

   The panel is a flat surface-subtle fill. It previously carried the shared wave-texture.svg
   background (the OQ7 decorative texture, as on cta-band / event-promo-band); Russell had it
   removed 2026-08-28.

   Layout and motion (node 5941:13615): one flex row of twelve items — slat 06, panel 06, slat 05,
   panel 05, … slat 01, panel 01 — so a panel always opens at its own slat's position. Slats keep
   their order, which is why higher-numbered slats sit left of the open panel and lower-numbered
   ones sit right of it, and why the initial state (01 active) puts the panel at the far right.

   Sizing comes from the Figma frame's 1440px row as percentages of that row: each slat is 111/1440
   and the open panel is 774/1440 (6 × 111 + 774 = 1440), so the section stays fluid at any width and
   the twelve items always total 100% — exactly one panel is open at a time. Every item is
   flex-basis-only (no grow, no shrink): grow ratios were the obvious first choice but they
   distribute *free* space, which excludes the slats' own padding and border, so the panel came out
   ~80px short of its share. A definite percentage basis plus box-sizing: border-box on the slats is
   the exact form. A closed panel is `flex-basis: 0` and carries no padding of its own (the padding
   lives on .bpd-vtp__panel-inner — padding on the flex item itself would floor its width and leave
   closed panels visible), so it collapses to nothing and is clipped by overflow: hidden.

   Opening animates `flex-basis` 0 → 774/1440, which interpolates the panel's width and pushes the
   lower-numbered slats along ahead of it — the whole re-flow is one transition, no transform hacks
   and nothing measured in JS. The inner is pinned to the open width (the same 774/1440, via
   container query units against .bpd-vtp__inner) so the text lays out at its final measure for the
   whole animation instead of re-wrapping as the panel widens.

   Mobile stacks the slats and opens the panel downward with the grid-template-rows 0fr → 1fr
   technique, since heights there are content-driven and have no ratio to animate.

   prefers-reduced-motion: reduce drops both transitions and keeps the instant open/closed state. */
.bpd-vertical-tab-panel {
	background-color: var(--wp--preset--color--surface-subtle);
	overflow: hidden;
}

.bpd-vtp__inner {
	display: flex;
	align-items: stretch;
	/* Sizing reference for .bpd-vtp__panel-inner's pinned open width (100cqi = this row's width). */
	container-type: inline-size;
}

/* ---- Numbered slats (06 … 01), each followed in the DOM by its own panel ---- */
.bpd-vtp__tab {
	flex: 0 0 calc( 100% * 111 / 1440 ); /* Figma — slat 111 of the 1440 row */
	min-width: 0;
	box-sizing: border-box; /* keep the slat's padding and border inside its 111/1440 share */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--wp--preset--spacing--300);
	background-color: var(--wp--preset--color--surface-invert-secondary);
	border-right: var(--wp--custom--border--md) solid var(--wp--preset--color--neutral-100);
	border-top: 0;
	border-bottom: 0;
	border-left: 0;
	color: inherit;
	font: inherit;
	cursor: pointer;
	text-align: center;
	appearance: none;
	transition: background-color var(--wp--custom--motion--duration-sm) var(--wp--custom--motion--ease);
}

/* Closed-slat hover: lighten the navy toward blue-700 (Figma "Hover" swatch), same treatment a
   click would otherwise offer no preview of. Excluded once a slat is active/open — the active
   purple fill (surface-accent) always wins. Gated to real pointers: on a touchscreen `:hover`
   sticks after a tap, so a just-closed slat would stay lit blue-700 until you tapped elsewhere —
   `hover: hover` keeps the effect on desktop and drops it on touch, where the slat returns to the
   default navy the moment the finger lifts. */
@media (hover: hover) {
	.bpd-vtp__tab:not(.is-active):hover {
		background-color: var(--wp--preset--color--blue-700);
	}
}

.bpd-vtp__tab:focus-visible {
	outline: 2px solid var(--wp--preset--color--text-active);
	outline-offset: -2px;
}

.bpd-vtp__tab.is-active {
	background-color: var(--wp--preset--color--surface-accent);
}

.bpd-vtp__tab-label {
	writing-mode: vertical-rl;
	transform: rotate(180deg); /* read bottom → top, matching Figma's -90° eyebrow */
	white-space: nowrap;
	text-transform: uppercase;
	color: var(--wp--preset--color--neutral-100);
	line-height: 1;
}

/* ---- Panels: collapsed to nothing until their own slat is selected ---- */
.bpd-vtp__panel {
	/* Zero basis, no grow, no shrink = no width at all. The open state swaps the basis for the
	   Figma share of the row and the transition interpolates between the two. No padding here —
	   see the header note; it lives on .bpd-vtp__panel-inner. */
	flex: 0 0 0;
	min-width: 0;
	box-sizing: border-box;
	overflow: hidden;
	background-color: var(--wp--preset--color--surface-subtle);
	transition: flex-basis calc(var(--wp--custom--motion--duration-sm) *2) ease-in-out;
}

.bpd-vtp__panel.is-active {
	flex-basis: calc( 100% * 774 / 1440 ); /* Figma — open panel 774 of the 1440 row */
}

.bpd-vtp__panel-inner {
	/* Pinned to the panel's open width so the copy never re-wraps mid-animation: the open panel is
	   774 of the row's 1440, measured against .bpd-vtp__inner via container query units. */
	width: calc( 100cqi * 774 / 1440 );
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--2400) var(--wp--preset--spacing--1200);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--1400);
	height: 100%;
}

.bpd-vtp__details {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--600);
}

.bpd-vtp__details-main {
	flex: 0 1 378px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--800);
}

.bpd-vtp__text {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--300);
}

.bpd-vtp__eyebrow {
	margin: 0;
	text-transform: uppercase;
}

.bpd-vtp__title {
	margin: 0;
	line-height: var(--wp--custom--line-height--heading-lg);
}

.bpd-vtp__body {
	margin: 0;
	line-height: var(--wp--custom--line-height--body-md);
}

.bpd-vtp__list {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--300);
}

.bpd-vtp__list-heading {
	margin: 0;
	line-height: var(--wp--custom--line-height--heading-sm);
}

.bpd-vtp__list-items {
	margin: 0;
	padding-inline-start: var(--wp--preset--spacing--600);
	list-style: disc;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--300);
	line-height: var(--wp--custom--line-height--body-md);
}

.bpd-vtp__list-items li {
	margin: 0;
}

/* ---- Tags row (divider + badges) ---- */
.bpd-vtp__tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--200);
	padding-top: var(--wp--preset--spacing--400);
	border-top: var(--wp--custom--border--sm) solid var(--wp--preset--color--text-active);
}

.bpd-vtp__tag {
	display: inline-block;
	padding: var(--wp--preset--spacing--100) var(--wp--preset--spacing--200);
	border: var(--wp--custom--border--sm) solid var(--wp--preset--color--blue-300);
	border-radius: var(--wp--custom--radius--md);
	line-height: var(--wp--custom--line-height--body-xs);
}

/* ---- Responsive: slats stack, the open panel expands downward (node 4788:50988) ---- */
@media (max-width: 782px) {
	.bpd-vtp__inner {
		flex-direction: column;
	}

	/* Stacked, the DOM order (slats 06→01, desktop wants 06 leftmost) puts 06 on top.
	   Reverse to 01→06 with `order`. column-reverse can't do it: slat and panel
	   interleave in the DOM, so it would flip every panel above its own slat. Tab and
	   panel share one order value per index; DOM order holds within a group, so each
	   panel still immediately follows its slat. Mobile-only — desktop row is untouched.
	   Note: focus/reading order stays 06→01 (DOM); this is a visual reorder only. */
	.bpd-vtp__tab[data-bpd-tab-index="0"],
	.bpd-vtp__panel[data-bpd-panel-index="0"] { order: 0; }
	.bpd-vtp__tab[data-bpd-tab-index="1"],
	.bpd-vtp__panel[data-bpd-panel-index="1"] { order: 1; }
	.bpd-vtp__tab[data-bpd-tab-index="2"],
	.bpd-vtp__panel[data-bpd-panel-index="2"] { order: 2; }
	.bpd-vtp__tab[data-bpd-tab-index="3"],
	.bpd-vtp__panel[data-bpd-panel-index="3"] { order: 3; }
	.bpd-vtp__tab[data-bpd-tab-index="4"],
	.bpd-vtp__panel[data-bpd-panel-index="4"] { order: 4; }
	.bpd-vtp__tab[data-bpd-tab-index="5"],
	.bpd-vtp__panel[data-bpd-panel-index="5"] { order: 5; }

	.bpd-vtp__tab {
		flex: 0 0 auto;
		padding: var(--wp--preset--spacing--400);
		/* Figma's 64px mobile slat. Left to its content the row measures 58px — the 24px
		   disclosure glyph plus padding and border — so this is a floor rather than a fixed
		   height: the one label long enough to wrap ("Community Impact & Philanthropy") needs
		   the extra line and would be clipped by a hard height. */
		min-height: 64px;
		/* Full-width stacked rows read left-aligned here, not centered like the desktop
		   slats — justify-content for the flex child, text-align for its wrapped lines. */
		justify-content: flex-start;
		text-align: left;
		border-right: 0;
		border-bottom: var(--wp--custom--border--md) solid var(--wp--preset--color--neutral-100);
	}

	/* Stacked full-width slats read as normal horizontal rows here, not the desktop
	   rotated eyebrow — so the label drops the vertical writing mode and its 180°
	   flip, and is allowed to wrap (the longest label would otherwise overflow a
	   narrow viewport under the desktop rule's white-space: nowrap). */
	.bpd-vtp__tab-label {
		writing-mode: horizontal-tb;
		transform: none;
		white-space: normal;
	}

	/* Mobile-only +/- disclosure indicator, pushed to the slat's right edge (node 6049:32326
	   minus / 6049:32345 plus). Desktop has no equivalent — the panel opens sideways there —
	   so this lives only inside the responsive block. State mirrors .is-active, which tracks
	   aria-expanded; the glyph is decorative and the button's aria-expanded carries it for AT. */
	.bpd-vtp__tab::after {
		content: "+";
		flex: 0 0 auto;
		margin-inline-start: auto;
		padding-inline-start: var(--wp--preset--spacing--300);
		color: var(--wp--preset--color--neutral-100);
		font-size: var(--wp--preset--font-size--heading-md); /* 24px — Figma icon frame */
		line-height: 1;
	}

	.bpd-vtp__tab.is-active::after {
		content: "\2212"; /* U+2212 MINUS SIGN — pairs visually with + */
	}

	.bpd-vtp__panel {
		/* Heights are content-driven here, so there is no ratio to animate as there is on desktop:
		   the row-track 0fr → 1fr technique interpolates the panel's height instead. */
		flex: 0 0 auto;
		display: grid;
		grid-template-rows: 0fr;
		transition: grid-template-rows var(--wp--custom--motion--duration-sm) ease;
	}

	.bpd-vtp__panel.is-active {
		flex-basis: auto; /* the desktop width share means nothing in a column */
		grid-template-rows: 1fr;
	}

	.bpd-vtp__panel-inner {
		width: auto;
		min-height: 0; /* let the 0fr track actually clamp the row */
		overflow: hidden;
		/* A 0fr row clamps the item's content box, not its padding, so the block padding has to
		   collapse with it — and it animates on the same clock as the row. */
		padding: 0 var(--wp--preset--spacing--600);
		transition: padding-block var(--wp--custom--motion--duration-sm) ease;
	}

	.bpd-vtp__panel.is-active .bpd-vtp__panel-inner {
		padding-block: var(--wp--preset--spacing--1400);
	}

	.bpd-vtp__details {
		flex-direction: column;
		gap: var(--wp--preset--spacing--800);
	}

	.bpd-vtp__details-main {
		flex-basis: auto;
	}

	/* First load, no interaction yet (data-bpd-vtp-pristine, set by render.php, removed by view.js
	   on init). The server ships tab 01 open for the no-JS and desktop responses; on mobile the
	   enhanced initial state is all-closed. These rules make the server-active slat render exactly
	   like a closed one until JS takes over, so there is no open-then-collapse flash — this
	   stylesheet is render-blocking in <head>, view.js is deferred. Specificity beats the plain
	   .is-active rules above (extra attribute selector); scoped to this media query, so desktop
	   pristine loads are untouched. */
	[data-bpd-vtp-pristine] .bpd-vtp__tab.is-active {
		background-color: var(--wp--preset--color--surface-invert-secondary);
	}

	[data-bpd-vtp-pristine] .bpd-vtp__tab.is-active::after {
		content: "+";
	}

	[data-bpd-vtp-pristine] .bpd-vtp__panel.is-active {
		grid-template-rows: 0fr;
	}

	[data-bpd-vtp-pristine] .bpd-vtp__panel.is-active .bpd-vtp__panel-inner {
		padding-block: 0;
	}
}

/* ---- Reduced motion: keep the open/closed state, drop the animation ----
   Last in the file on purpose: the responsive block above re-declares `transition` on both of
   these selectors, so an earlier kill switch of equal specificity would lose to it. */
@media ( prefers-reduced-motion: reduce ) {
	.bpd-vtp__panel,
	.bpd-vtp__panel-inner,
	.bpd-vtp__tab {
		transition: none;
	}
}