/*
 Theme Name:   Vantix Esports — Kadence Child
 Template:     kadence
 Description:  Thin Kadence child carrying the Vantix design system. Follows the qltech-child pattern: sections are CORE blocks (group / columns / heading / paragraph / buttons) styled by the classes below, not custom ACF blocks with inline styles. Colours come from the Kadence palette (Appearance -> Customize -> Colors) so they stay editable.
 Version:      0.1.0
 Author:       QL Tech
 Text Domain:  vantix-child
*/

/* ============================================================
   Tokens — docs/DESIGN.md + themes/vantix/assets/css/vantix-tokens.css.
   Colours reference the Kadence palette variables instead of hard hex,
   so the customizer is the single place to change them.

   Declared on `body` as well as `:root` on purpose: WordPress prefixes
   editor stylesheets with .editor-styles-wrapper, which turns `:root`
   into a selector that matches nothing. The `body` copy carries these
   tokens into the block editor.
   ============================================================ */
:root,
body {
	--vx-red:         var(--global-palette1, #e10600);
	--vx-red-deep:    var(--global-palette2, #c8102e);
	--vx-red-text:    #ff1a1a;
	--vx-ink:         var(--global-palette3, #f2f4f6);
	--vx-body:        var(--global-palette4, #9aa0a6);
	--vx-silver:      var(--global-palette5, #c0c4c8);
	--vx-dim:         var(--global-palette6, #7d8389);
	--vx-surface:     var(--global-palette7, #0e1012);
	--vx-surface-alt: var(--global-palette8, #0c0e10);
	--vx-stage:       var(--global-palette9, #000000);

	--vx-border:  #1f2226;
	--vx-divider: #1a1d20;

	/* chrome.css (copied verbatim from the live theme) references --font-saira
	   and --font-barlow by those names. Aliased rather than renamed so that file
	   can stay an unmodified copy. The "* Fallback" families are the metric
	   faces assets/css/fonts.css defines, same as live. */
	--font-saira: "Saira", "Saira Fallback", system-ui;
	--font-barlow: "Barlow Semi Condensed", "Barlow Semi Condensed Fallback", "Helvetica Neue", Arial;

	--vx-display: "Saira", "Saira Fallback", system-ui, sans-serif;
	--vx-sans:    "Barlow Semi Condensed", "Barlow Semi Condensed Fallback", "Helvetica Neue", Arial, sans-serif;

	/* Kadence renders `h1 { font-family: var(--global-heading-font-family) }`,
	   which outranks a bare `h1` rule here. Feeding its variables sets the
	   faces everywhere at once — front end, editor and Kadence chrome. */
	--global-heading-font-family: var(--vx-display);
	--global-body-font-family: var(--vx-sans);

	--vx-gutter: 5vw;
	--vx-max: 1180px;
}

body {
	background: var(--vx-stage);
	color: var(--vx-body);
	font-family: var(--vx-sans);
}

/* ============================================================
   Scroll reveal — copied verbatim from the live theme's theme.css so the
   motion matches. `vx-in` is added by assets/js/vantix-theme.js (itself a
   verbatim copy); assets/js/marks.js is what puts the `data-reveal` and
   `--reveal-delay` on core blocks in the first place.
   ============================================================ */
[data-reveal] {
	opacity: 0;
	transform: translateY(30px);
	transition:
		opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: var(--reveal-delay, 0s);
	will-change: opacity, transform;
}
[data-reveal="left"]  { transform: translateX(-40px); }
[data-reveal="right"] { transform: translateX(40px); }
[data-reveal="scale"] { transform: scale(0.9); }
[data-reveal].vx-in { opacity: 1; transform: none; will-change: auto; }

@media (prefers-reduced-motion: reduce) {
	[data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   Shared section furniture
   ============================================================ */
.vx-wash { position: relative; overflow: hidden; }
.vx-wash::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.vx-wash > * { position: relative; }

/* Buttons — the skewed slab, matching `vantix_skew_button()` in the live
   theme (themes/vantix/inc/template-tags.php): flat crimson fill, 1px lit
   border, black elevation shadow, upright label. (Colours below.)

   The live theme gets there by nesting a counter-skewed <span> inside the
   <a>. That trick is unavailable here on purpose: the core button block
   stores the <a>'s innerHTML as its `text` attribute, so a wrapper <span>
   is stripped on the next save and the block flags as invalid content.

   So the slab is a ::before instead — skewed, carrying the fill, border and
   both shadows — with the label sitting upright on top of it. Same result,
   and the block stays a stock core button anyone can edit. (clip-path was
   the other option and was rejected: it cuts borders and box-shadows off
   along the angled edges, which loses the hairline the ghost variant is.) */
/* Metrics are `vantix_skew_button()`'s, verified against production markup:
   md = padding 16px 38px / 17px / letter-spacing 3px (hero, About/Rosters CTA)
   lg = padding 18px 46px / 19px / letter-spacing 3px (home CTA). */
.wp-block-button.vx-btn .wp-block-button__link {
	position: relative;
	z-index: 0;
	display: inline-block;
	background: none;
	border: 0;
	border-radius: 0;
	padding: 16px 38px;
	font-family: var(--vx-display);
	font-weight: 800;
	font-size: 17px;
	letter-spacing: 3px;
	text-transform: uppercase;
	text-decoration: none;
}
.wp-block-button.vx-btn--lg .wp-block-button__link {
	padding: 18px 46px;
	font-size: 19px;
}
.wp-block-button.vx-btn .wp-block-button__link::before {
	content: "";
	position: absolute;
	/* -1px, not 0: on the live theme the 1px border sits OUTSIDE the padding
	   box (the skin is a separate span), making the slab 2px taller and wider
	   than the padding box. inset:0 would draw the border inside and come out
	   2px short in both axes — measured against production, not assumed. */
	inset: -1px;
	z-index: -1;
	transform: skewX(-12deg);
	transition:
		transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
		background 0.14s,
		box-shadow 0.22s cubic-bezier(0.22, 1, 0.36, 1),
		border-color 0.22s;
}
/* IMPORTANT: these values come from `assets/css/theme-extra.css` §"Buttons:
   flat crimson, black elevation", NOT from theme.css. theme-extra loads after
   theme.css and overrides it, so theme.css's gradient fill, lit border and
   crimson glow are DEAD on production — verified against the live DOM, where
   the primary skin computes to background #e10600 (no gradient) and border
   #ff4a44. Building from theme.css reproduces a design that was deliberately
   retired in the de-templating pass. */
.wp-block-button.vx-btn--primary .wp-block-button__link { color: #ffffff; }
.wp-block-button.vx-btn--primary .wp-block-button__link::before {
	background: #e10600;
	border: 1px solid #ff4a44;
	box-shadow: 0 8px 18px -10px rgba(0, 0, 0, 0.9);
}
.wp-block-button.vx-btn--ghost .wp-block-button__link { color: var(--vx-silver); }
.wp-block-button.vx-btn--ghost .wp-block-button__link::before {
	background: transparent;
	border: 1px solid #3a3e43;
	box-shadow: none;
}
@media (hover: hover) and (pointer: fine) {
	.wp-block-button.vx-btn--primary .wp-block-button__link:hover::before {
		background: #ff1a1a;
		box-shadow: 0 12px 24px -12px rgba(0, 0, 0, 0.95);
	}
	.wp-block-button.vx-btn--ghost .wp-block-button__link:hover::before {
		border-color: #f2f4f6;
		background: rgba(255, 255, 255, 0.04);
	}
	.wp-block-button.vx-btn .wp-block-button__link:hover::before {
		transform: skewX(-12deg) translateY(-2px);
	}
}
.wp-block-button.vx-btn .wp-block-button__link:active::before {
	transform: skewX(-12deg) translateY(1px) scale(0.985);
}

/* ============================================================
   1. Hero  (was blocks/hero/render.php)
   ============================================================ */
.vx-hero {
	min-height: 88vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 72px var(--vx-gutter) 84px;
}
.vx-hero::before {
	background: radial-gradient(ellipse 62% 52% at 50% 40%, rgba(200, 16, 46, 0.20), transparent 64%);
}
/* The <figure> stretches to the full 1180 content width, so centring the
   figure is not enough — the 520px <img> still sits at its left edge.
   Centre the image inside the figure, not the figure inside the group. */
.vx-hero .wp-block-image {
	margin: 0;
	display: flex;
	justify-content: center;
}
.vx-hero .wp-block-image img { width: min(520px, 84vw); height: auto; }
.vx-hero-tagline {
	margin: 34px auto 0;
	max-width: 44ch;
	font-size: clamp(19px, 2.6vw, 24px);
	color: #c8ccd0;
	line-height: 1.4;
	font-weight: 500;
	text-wrap: pretty;
}
.vx-hero-tagline strong { color: #ffffff; font-weight: 700; }
.vx-hero .wp-block-buttons { justify-content: center; margin-top: 36px; gap: 14px; }

/* ============================================================
   2. Page header  (was blocks/page-header/render.php)
   ============================================================ */
.vx-pagehead { padding: 76px var(--vx-gutter) 44px; }
.vx-pagehead::before {
	background: radial-gradient(ellipse 70% 130% at 18% 0%, rgba(200, 16, 46, 0.14), transparent 62%);
}
/* Layout comes from the block's own flex layout attribute — see sections.php.
   Only the gap and the baseline are ours: core's "bottom" vertical alignment
   is `align-items: flex-end`, which drops the kicker below the title's
   baseline because the h1 runs at line-height 0.92. */
.wp-block-group.vx-pagehead-row {
	gap: 20px;
	/* Beats the per-block .wp-container-core-group-is-layout-* rule WordPress
	   prints inline AFTER this stylesheet — same specificity would lose on
	   source order, so the extra class is load-bearing. */
	align-items: baseline;
}
.vx-pagehead-title {
	font-family: var(--vx-display);
	font-weight: 900;
	font-size: clamp(44px, 8vw, 80px);
	margin: 0;
	line-height: 0.92;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	color: var(--vx-ink);
	text-wrap: balance;
}
.vx-pagehead-kicker {
	font-family: var(--vx-display);
	color: var(--vx-dim);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 2px;
	text-transform: uppercase;
	white-space: nowrap;
	margin: 0;
}
/* The long selector is load-bearing. Core's constrained layout ships
   `.wp-block-group.is-layout-constrained > :where(:not(.alignleft)…)` at
   specificity (0,2,0), setting both `max-width: <content-size>` and
   `margin-inline: auto`. A bare `.vx-pagehead-sub` (0,1,0) loses on both, so
   the paragraph ran the full 1180px and then centred itself — measured at
   margin-left 572px. (0,2,1) is what actually beats it, giving the original's
   58ch measure, left-aligned under the title. */
.vx-pagehead p.vx-pagehead-sub {
	max-width: 58ch;
	margin: 20px auto 0 0;
	font-size: 18px;
	color: var(--vx-body);
	font-weight: 500;
	line-height: 1.55;
	text-wrap: pretty;
}
/* The hairline rule with the crimson tick — a core separator, not a div.

   The `:not()` chain is not decoration: core ships
   `.wp-block-separator:not(.is-style-wide):not(.is-style-dots){width:100px}`
   at specificity (0,3,0), which outranks a plain `.wp-block-separator.vx-rule`
   and leaves the rule a centred 100px stub. Matching the chain is what makes
   the full-width override actually land. */
.wp-block-separator.vx-rule:not(.is-style-wide):not(.is-style-dots) {
	position: relative;
	width: 100%;
	max-width: var(--vx-max);
	margin: 38px auto 0;
	height: 1px;
	border: 0;
	background: var(--vx-divider);
	opacity: 1;
}
.wp-block-separator.vx-rule::after {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 88px;
	background: var(--vx-red);
}

/* ============================================================
   3. CTA band  (was blocks/cta/render.php — size lg / md)
   ============================================================ */
.vx-cta {
	padding: 96px var(--vx-gutter);
	text-align: center;
	border-top: 1px solid var(--vx-divider);
}
.vx-cta--md { padding: 80px var(--vx-gutter); border-top: 0; }
.vx-cta::before {
	background: radial-gradient(ellipse 55% 100% at 50% 0%, rgba(200, 16, 46, 0.15), transparent 62%);
}
.vx-cta-heading {
	font-family: var(--vx-display);
	font-weight: 900;
	font-size: clamp(40px, 8vw, 84px);
	margin: 0;
	line-height: 0.94;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	color: var(--vx-ink);
	text-wrap: balance;
}
.vx-cta--md .vx-cta-heading { font-size: clamp(34px, 6vw, 60px); }
.vx-cta-text {
	max-width: 52ch;
	margin: 20px auto 34px;
	font-size: 18px;
	color: #a6acb2;
	font-weight: 500;
	line-height: 1.55;
	text-wrap: pretty;
}
.vx-cta .wp-block-buttons { justify-content: center; }

/* ============================================================
   4. Story  (was blocks/story/render.php — a 2-up grid)
   ============================================================ */
/* GRID, not core's column flexbox. The original is
   `repeat(auto-fit, minmax(300px, 1fr))`, which reflows as soon as a column
   would go under 300px; core columns hold a rigid row until 782px and then
   stack all at once. Overriding the display is what makes the mid-width
   behaviour match, not just the wide-viewport screenshot. */
.wp-block-columns.vx-story {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	max-width: var(--vx-max);
	margin: 0 auto;
	padding: 64px var(--vx-gutter) 30px;
	align-items: center;
	gap: 46px;
}
.vx-story-heading {
	font-family: var(--vx-display);
	font-weight: 900;
	font-size: clamp(30px, 5vw, 46px);
	margin: 0 0 20px;
	text-transform: uppercase;
	letter-spacing: -0.005em;
	color: var(--vx-ink);
	text-wrap: balance;
}
.vx-story p {
	max-width: 62ch;
	font-size: 17px;
	color: #a6acb2;
	line-height: 1.65;
	font-weight: 500;
	margin: 0 0 16px;
	text-wrap: pretty;
}
.vx-story p:last-child { margin-bottom: 0; }
.vx-story p strong { color: #ffffff; font-weight: 700; }
.vx-story .wp-block-image { display: flex; justify-content: center; margin: 0; }
.vx-story .wp-block-image img { width: min(380px, 78vw); height: auto; }

/* ============================================================
   5. Value cards  (was blocks/values/render.php — 3 columns under a rule)
   ============================================================ */
/* Same grid override as .vx-story — the original is
   `repeat(auto-fit, minmax(250px, 1fr))` with a 36px/44px gap. */
.wp-block-columns.vx-values {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	max-width: var(--vx-max);
	margin: 0 auto;
	padding: 56px var(--vx-gutter) 40px;
	gap: 36px 44px;
}
.vx-values .wp-block-column {
	padding-top: 20px;
	border-top: 2px solid var(--vx-border);
}
.vx-values .wp-block-column:first-child { border-top-color: var(--vx-red); }
.vx-value-title {
	font-family: var(--vx-display);
	font-weight: 900;
	font-size: 23px;
	margin: 0 0 12px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--vx-ink);
}
.vx-values p {
	max-width: 42ch;
	font-size: 16px;
	color: #a6acb2;
	line-height: 1.62;
	font-weight: 500;
	margin: 0;
	text-wrap: pretty;
}

@media (max-width: 781px) {
	.vx-story,
	.vx-values { gap: 32px; }
	.vx-values .wp-block-column:first-child ~ .wp-block-column { border-top-color: var(--vx-border); }
}

/* ============================================================
   6. Staff flip cards  (blocks/staff-grid/render.php)

   The flip itself — perspective, preserve-3d, the rotateY and backface — is
   vantix-extra.css's, unchanged. Two things here bridge it to core blocks.

   FIRST: `display: contents` on the inner containers. WordPress wraps a
   group's children in .wp-block-group__inner-container, and a wrapper between
   .vx-flip-inner and the two faces flattens `transform-style: preserve-3d` —
   the card would fade instead of turning.

   SECOND: the front face has to set the height (the back is absolutely
   positioned over it), which means the front cannot be display:contents.
   ============================================================ */
.vx-flip > .wp-block-group__inner-container,
.vx-flip-inner > .wp-block-group__inner-container,
.vx-flip-back > .wp-block-group__inner-container { display: contents; }

.wp-block-group.vx-flip { margin-block-start: 0; }
.vx-staff-leadwrap {
	max-width: var(--vx-max);
	margin: 0 auto;
	padding: 48px var(--vx-gutter) 10px;
}
.vx-staff-gridwrap {
	max-width: var(--vx-max);
	margin: 0 auto;
	padding: 30px var(--vx-gutter) 76px;
}
.wp-block-group.vx-staff-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 22px;
}
.vx-staff-grid > .wp-block-group__inner-container { display: contents; }

/* --- the front face ------------------------------------------------------ */
.wp-block-group.vx-staff-lead {
	display: grid;
	grid-template-columns: minmax(200px, 280px) 1fr;
	background: var(--vx-surface);
	border: 1px solid var(--vx-border);
	overflow: hidden;
}
.vx-staff-lead > .wp-block-group__inner-container { display: contents; }
.wp-block-group.vx-staff-card {
	background: var(--vx-surface);
	border: 1px solid var(--vx-border);
	overflow: hidden;
	--n: 20px;
}
.vx-staff-card > .wp-block-group__inner-container { display: contents; }

.wp-block-group.vx-staff-shot {
	position: relative;
	margin-block-start: 0;
	background: var(--vx-stage);
	overflow: hidden;
}
.vx-staff-lead .vx-staff-shot { min-height: 300px; }
.vx-staff-card .vx-staff-shot { height: 210px; }
.vx-staff-shot .wp-block-image { margin: 0; }
.vx-staff-shot .wp-block-image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* The bottom fade over the photo — grid cards only, as on live. */
.vx-staff-card .vx-staff-shot::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 3;
	background: linear-gradient(180deg, transparent 50%, rgba(8, 8, 9, 0.9) 96%);
}
/* The INFO badge: the whole photo is the hit area, the chip is the only hint.
   A core button block, so the <a> is the thing to size and the .wp-block-button
   wrapper is the thing to stretch. */
.vx-staff-shot .wp-block-buttons { margin: 0; }
/* The whole photo is the hit area — the wrapper covers it, and marks.js puts
   `data-flip-toggle` on this element so a click anywhere on the photo turns
   the card, as it does on live. */
.wp-block-button.vx-staff-info {
	position: absolute;
	inset: 0;
	z-index: 4;
	display: block;
	cursor: pointer;
}
/* The CHIP is the <a>, and it is positioned rather than flex-aligned on
   purpose: core's own .wp-block-button rules stretch a button's anchor to its
   flex line, which made the chip a full-height red bar down the photo. Taking
   it out of flow is the one thing that cannot be overridden from underneath. */
.vx-staff-info .wp-block-button__link {
	position: absolute;
	left: 12px;
	bottom: 12px;
	width: auto;
	height: auto;
	background: var(--vx-red);
	color: #ffffff;
	border: 0;
	border-radius: 0;
	padding: 4px 9px;
	font-family: var(--vx-display);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 2px;
	text-transform: uppercase;
	transition: background 0.15s, transform 0.15s;
}
@media (hover: hover) and (pointer: fine) {
	.vx-staff-info:hover .wp-block-button__link { background: var(--vx-red-text); transform: translateY(-2px); }
}

.wp-block-group.vx-staff-body { margin-block-start: 0; }
.vx-staff-lead .vx-staff-body {
	padding: clamp(26px, 4vw, 44px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	border-left: 1px solid var(--vx-divider);
}
.vx-staff-card .vx-staff-body {
	padding: 16px 18px 20px;
	border-top: 1px solid var(--vx-divider);
}
.vx-staff-lead p.vx-staff-chip {
	margin: 0;
	font-family: var(--vx-display);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: #ffffff;
	background: var(--vx-red);
	padding: 5px 11px;
	width: fit-content;
}
/* On a grid card the role is the grey line UNDER the name, not a chip — same
   element, different register, exactly as production renders it. */
.vx-staff-card p.vx-staff-chip {
	order: 2;
	margin-block-start: 10px;
	margin-bottom: 0;
	font-family: var(--vx-display);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 2px;
	color: var(--vx-body);
	text-transform: uppercase;
}
.vx-staff-card .vx-staff-body > .wp-block-group__inner-container { display: flex; flex-direction: column; }
.vx-staff-name {
	font-family: var(--vx-display);
	font-weight: 900;
	text-transform: uppercase;
	color: var(--vx-ink);
	margin: 0;
}
.vx-staff-lead .vx-staff-name {
	font-size: clamp(38px, 6.5vw, 60px);
	margin-block-start: 18px;
	letter-spacing: -0.01em;
	line-height: 0.96;
}
.vx-staff-card .vx-staff-name {
	order: 1;
	font-size: 24px;
	letter-spacing: 0.5px;
	line-height: 1;
	text-transform: none;
}
.vx-staff-lead p.vx-staff-lead-short {
	max-width: 52ch;
	margin-block-start: 16px;
	margin-bottom: 0;
	font-size: 17px;
	color: #a6acb2;
	font-weight: 500;
	line-height: 1.6;
	text-wrap: pretty;
}

/* --- the back face ------------------------------------------------------- */
.wp-block-group.vx-flip-back {
	display: flex;
	flex-direction: column;
	background: var(--vx-surface);
	border: 1px solid var(--vx-border);
}
.vx-flip-back .vx-staff-back-name {
	font-family: var(--vx-display);
	font-weight: 900;
	font-size: clamp(20px, 2.6vw, 28px);
	line-height: 1;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--vx-ink);
	margin: 0;
}
.vx-flip-back p.vx-staff-back-role {
	margin-block-start: 7px;
	margin-bottom: 0;
	font-family: var(--vx-display);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--vx-red);
}
/* flex:1 + overflow is what makes the story scroll inside a card that is only
   as tall as the photo above it — vantix-extra.css dresses that scrollbar. */
.vx-flip-back p.vx-staff-bio {
	margin-block-start: 12px;
	margin-bottom: 0;
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	color: #a6acb2;
	text-wrap: pretty;
}
.vx-flip-back .wp-block-buttons { margin-block-start: 12px; }
.vx-staff-back-btn .wp-block-button__link {
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
	font-family: var(--vx-display);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--vx-body);
}
.vx-staff-back-btn .wp-block-button__link:hover { color: #ffffff; }

/* ============================================================
   7. FAQ  (blocks/faq/render.php)

   Core `wp:details` — a native <details>/<summary>, so the accordion needs no
   JavaScript. One behavioural difference from live, deliberate and noted in
   sections-inner.php: production's is single-open, <details> elements are
   independent, so more than one answer can be open here.
   ============================================================ */
.vx-faqlist {
	max-width: 860px;
	margin: 0 auto;
	padding: 44px var(--vx-gutter) 30px;
	border-top: 1px solid var(--vx-divider);
	margin-top: 44px;
}
details.vx-faqitem {
	margin-block-start: 0;
	border-bottom: 1px solid var(--vx-divider);
	overflow: hidden;
	transition: border-color 0.18s;
}
details.vx-faqitem[open] { border-color: rgba(225, 6, 0, 0.45); }
.vx-faqitem summary {
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 22px 4px;
	font-family: var(--vx-display);
	font-weight: 800;
	font-size: clamp(17px, 2.4vw, 20px);
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--vx-silver);
	transition: color 0.18s;
	text-wrap: balance;
	list-style: none;
}
/* Both are needed: WebKit uses the pseudo-element, everyone else `list-style`. */
.vx-faqitem summary::-webkit-details-marker { display: none; }
.vx-faqitem[open] summary { color: #ffffff; }
/* The crimson + that turns into a x — the marker is a ::after so the summary
   text stays plain editable text in the block editor. */
.vx-faqitem summary::after {
	content: "+";
	flex-shrink: 0;
	font-family: var(--vx-display);
	font-weight: 400;
	font-size: 26px;
	line-height: 1;
	color: var(--vx-red);
	transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.vx-faqitem[open] summary::after { transform: rotate(135deg); }
.vx-faqitem p {
	margin: 0;
	padding: 0 4px 24px;
	max-width: 64ch;
	font-size: 17px;
	line-height: 1.65;
	color: #a6acb2;
	font-weight: 500;
	text-wrap: pretty;
}

@media (max-width: 640px) {
	.wp-block-group.vx-staff-lead { grid-template-columns: 1fr; }
	.vx-staff-lead .vx-staff-body { border-left: 0; border-top: 1px solid var(--vx-divider); }
}