/* =============================================================================
   ampeco/tw-customer-story — a single customer-story card (testimonial + stats)
   -----------------------------------------------------------------------------
   The block wrapper IS the card. Stack several blocks for a stories section
   (16px rhythm via margin-block-end; last one trims). SCOPED under
   `.tw-customer-story`. Colours from DS tokens only (no raw hex); font
   family/weight from Tailwind utilities in render.php; this file owns LAYOUT +
   the component type scale + the quote glyph. The --dark remap reuses the
   tw-testimonial dark recipe (raven surface, frost text, brand border).
   ============================================================================= */
.tw-customer-story {
	margin: 0 0 16px;
	display: flex;
	flex-direction: row;
	align-items: stretch;
	gap: clamp(28px, 4vw, 52px);
	padding: clamp(26px, 3vw, 34px);
	border-radius: var(--radius-l, var(--radius-m));
	background: transparent;
	border: 1px solid var(--border-default-default);
	font-family: var(--font-body);
	transition: box-shadow .25s ease, transform .25s ease;
}
.tw-customer-story:last-child { margin-bottom: 0; }
.tw-customer-story *,
.tw-customer-story *::before,
.tw-customer-story *::after { box-sizing: border-box; }
.tw-customer-story:hover {
	box-shadow: var(--nds-elevation-2, var(--nds-elevation-1));
	transform: translateY(-2px);
}

/* -------- Left column (logo, headline, quote, author) ----------------- */
.tw-customer-story__main {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}
.tw-customer-story__logo {
	height: 39px;
	overflow: hidden;
	margin-bottom: 18px;
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
}
.tw-customer-story__logo-img {
	height: 100%;
	width: auto;
	display: block;
	object-fit: contain;
}
.tw-customer-story__headline {
	margin: 0 0 14px;
	font-size: 18px;
	line-height: 1.3;
	color: var(--text-default-default);
}
.tw-customer-story__quote {
	margin: 0 0 22px;
	padding: 0;
	border: 0;
	quotes: none;
	flex: 1;
	font-size: 16px;
	line-height: 1.55;
	color: var(--text-default-secondary);
}
.tw-customer-story__quote::before {
	content: "\201C";
	font-family: var(--font-display);
	font-size: 42px;
	line-height: 0;
	color: var(--p-frost-600, var(--p-frost-500));
	vertical-align: -16px;
	margin-right: 2px;
}

/* -------- Author ------------------------------------------------------- */
.tw-customer-story__person {
	display: flex;
	align-items: center;
	gap: 13px;
}
.tw-customer-story__avatar {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	object-fit: cover;
	flex: none;
	box-shadow: var(--nds-elevation-1);
}
.tw-customer-story__id {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.tw-customer-story__name {
	font-size: 15.5px;
	line-height: 1.2;
	color: var(--text-brand-default, var(--p-primary-500));
}
.tw-customer-story__role {
	margin-top: 2px;
	font-size: 13px;
	color: var(--text-default-tertiary);
}

/* -------- Right column (proof stats) ---------------------------------- */
.tw-customer-story__stats {
	flex: none;
	width: clamp(160px, 18vw, 200px);
	display: flex;
	flex-direction: column;
	gap: 22px;
	padding-left: clamp(28px, 4vw, 52px);
	border-left: 1px solid var(--border-default-secondary);
	justify-content: center;
}
.tw-customer-story__stat-value {
	font-size: 27px;
	line-height: 1;
	letter-spacing: -0.01em;
	color: var(--text-default-default);
}
.tw-customer-story__stat-label {
	margin-top: 7px;
	font-size: 12.5px;
	line-height: 1.3;
	color: var(--text-default-tertiary);
}

/* -------- Responsive: stack, stats become a horizontal row ------------ */
@media (max-width: 720px) {
	.tw-customer-story {
		flex-direction: column;
		gap: 24px;
	}
	.tw-customer-story__stats {
		width: auto;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 16px 24px;
		padding-left: 0;
		padding-top: 22px;
		border-left: none;
		border-top: 1px solid var(--border-default-secondary);
	}
	.tw-customer-story__stat {
		flex: 1;
		min-width: 110px;
	}
}

/* =============================================================================
   Dark theme (theme="dark") — tw-testimonial recipe: raven surface, frost text,
   brand-blue border.
   ============================================================================= */
.tw-customer-story--dark {
	background: var(--p-raven-500);
	border-color: var(--p-primary-500);
}
.tw-customer-story--dark .tw-customer-story__headline,
.tw-customer-story--dark .tw-customer-story__name,
.tw-customer-story--dark .tw-customer-story__stat-value {
	color: var(--p-frost-100);
}
.tw-customer-story--dark .tw-customer-story__quote {
	color: color-mix(in srgb, var(--p-frost-100) 80%, transparent);
}
.tw-customer-story--dark .tw-customer-story__role {
	color: var(--p-secondary-500);
}
.tw-customer-story--dark .tw-customer-story__stat-label {
	color: color-mix(in srgb, var(--p-frost-100) 60%, transparent);
}
.tw-customer-story--dark .tw-customer-story__stats {
	border-left-color: color-mix(in srgb, var(--p-frost-100) 12%, transparent);
}
@media (max-width: 720px) {
	.tw-customer-story--dark .tw-customer-story__stats {
		border-top-color: color-mix(in srgb, var(--p-frost-100) 12%, transparent);
	}
}

/* =============================================================================
   is-style-spotlight — the About us customer-proof slide (dc.html:308)
   -----------------------------------------------------------------------------
   Same DOM as the default card; a different skin. Everything is scoped to the
   style class, so the eight existing cards across three posts are untouched.

   Geometry verbatim from the export: 24px radius, 540px min-height, a 16px
   inner frame, a 340px frosted stats panel, and the `sea` gradient. The stats
   numerals are #083A75 (background-brand-default-hover) on the frost, which is
   why they stay dark on a dark panel.
   ============================================================================= */
.tw-customer-story.is-style-spotlight {
	position: relative;
	margin: 0;
	padding: 16px;
	gap: 16px;
	min-height: 540px;
	border: 0;
	border-radius: 24px;
	overflow: hidden;
	/* NO hairline. The export declares `box-shadow: inset 0 0 0 1px #363F47` here
	   and then covers it with its own absolutely-positioned gradient layer at
	   inset:0 — an inset shadow paints under child boxes — so the border never
	   appears in the design's own render. Pixel-scanning both confirmed it:
	   white -> gradient with nothing between. Painting the gradient as this
	   element's background instead makes the declared shadow visible, which is
	   a border the design does not have. Taking the declaration at face value
	   was the mistake. */
	background: var(--wp--preset--gradient--sea);
	align-items: stretch;
}
.tw-customer-story.is-style-spotlight:hover { box-shadow: none; transform: none; }

/* The customer's own photograph, washed back so the gradient still reads. */
.tw-customer-story.is-style-spotlight .tw-customer-story__backdrop {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}
.tw-customer-story.is-style-spotlight .tw-customer-story__backdrop-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.1;
}

.tw-customer-story.is-style-spotlight .tw-customer-story__main {
	position: relative;
	z-index: 1;
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 42px;
	padding: 34px 20px 34px 40px;
}

.tw-customer-story.is-style-spotlight .tw-customer-story__logo {
	display: flex;
	align-items: center;
	height: 52px;
}
.tw-customer-story.is-style-spotlight .tw-customer-story__logo-img { height: 100%; width: auto; }
/* Colour marks need knocking out on the gradient; white ones must not be. The
   design inverts Allego only, so this is per-card (the logoInvert attribute). */
.tw-customer-story.is-style-spotlight.tw-customer-story--logo-invert .tw-customer-story__logo-img {
	filter: brightness(0) invert(1);
}

.tw-customer-story.is-style-spotlight .tw-customer-story__quote {
	max-width: 600px;
	margin: 0;
	font-size: 28px;
	font-weight: 400;
	line-height: 1.35;
	color: var(--text-default-alternative, #F5FAFF);
}
.tw-customer-story.is-style-spotlight .tw-customer-story__quote::before { content: none; }

.tw-customer-story.is-style-spotlight .tw-customer-story__ctas {
	display: flex;
	align-items: center;
	gap: 40px;
	flex-wrap: wrap;
}
.tw-customer-story.is-style-spotlight .tw-customer-story__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	color: var(--text-default-alternative, #F5FAFF);
}
.tw-customer-story.is-style-spotlight .tw-customer-story__cta--primary {
	padding: 11px 18px;
	border-radius: var(--radius-xs, 4px);
	background: var(--wp--preset--gradient--moonshine);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.6;
}
.tw-customer-story.is-style-spotlight .tw-customer-story__cta--secondary {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.6;
}

.tw-customer-story.is-style-spotlight .tw-customer-story__person { gap: 14px; align-items: center; }
.tw-customer-story.is-style-spotlight .tw-customer-story__avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.3);
}
.tw-customer-story.is-style-spotlight .tw-customer-story__name {
	font-size: 16px;
	font-weight: 500;
	color: var(--text-default-alternative, #F5FAFF);
}
.tw-customer-story.is-style-spotlight .tw-customer-story__role {
	font-size: 14px;
	font-weight: 300;
	color: #C6DBF4;                                 /* BESPOKE */
}

/* Frosted proof panel. */
.tw-customer-story.is-style-spotlight .tw-customer-story__stats {
	position: relative;
	z-index: 1;
	flex: none;
	width: 340px;
	align-self: stretch;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 26px;
	padding: 26px 0;
	border: 0;
	border-radius: 24px;
	background: rgb(255 255 255 / 0.33);
	backdrop-filter: blur(44px);
	-webkit-backdrop-filter: blur(44px);
	box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.16);
}
.tw-customer-story.is-style-spotlight .tw-customer-story__stat { padding: 0 36px; }
.tw-customer-story.is-style-spotlight .tw-customer-story__stat-value {
	font-size: 48px;
	font-weight: 300;
	line-height: 1.2;
	white-space: nowrap;
	color: var(--background-brand-default-hover, #083A75);
}
.tw-customer-story.is-style-spotlight .tw-customer-story__stat-label {
	font-size: 18px;
	font-weight: 300;
	line-height: 1.4;
	color: var(--text-default-secondary, #454F59);
}

@media (max-width: 900px) {
	.tw-customer-story.is-style-spotlight { flex-direction: column; min-height: 0; }
	.tw-customer-story.is-style-spotlight .tw-customer-story__main { padding: 24px; gap: 28px; }
	.tw-customer-story.is-style-spotlight .tw-customer-story__quote { font-size: 22px; }
	.tw-customer-story.is-style-spotlight .tw-customer-story__stats { width: auto; padding: 24px 0; }
}

/* =============================================================================
   is-style-spotlight — tag pills (Testimonials 2026, tasks/testimonials-2026)
   -----------------------------------------------------------------------------
   The design's `.spot__top` + `.gtag` row, verbatim: the logo on the left, a
   frosted capsule row pushed right, sharing the card's top line.

   This only applies to `.tw-customer-story__top`, a wrapper render.php emits
   ONLY when the `tags` repeater has rows — so the eight existing cards across
   five production pages never see these rules at all.

   `--p-frost-100`, not `--color-*`: the `--color-*` names are declared with
   `@theme inline` and do not exist at runtime, so raw CSS must use the `--p-*` /
   `--c-*` layer (brain design/tailwind.md). The two rgba()s have no token — they
   are the design's own glass values over an arbitrary photo, not palette colours.
   ============================================================================= */
/* Centred, not top-aligned: the logo box is 52px and the pills 40px, so
   flex-start left the pills riding high against the wordmark. The logo's 18px
   bottom margin moves to the row, or it would push the centre line down too. */
.tw-customer-story.is-style-spotlight .tw-customer-story__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 18px;
}

.tw-customer-story.is-style-spotlight .tw-customer-story__tags {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	justify-content: flex-end;
}

.tw-customer-story.is-style-spotlight .tw-customer-story__tag {
	display: inline-flex;
	align-items: center;
	height: 40px;
	padding: 0 16px;
	border-radius: 24px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	background: rgba(26, 30, 34, 0.25);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: var(--p-frost-100, #F5FAFF);
	font-size: 16px;
	font-weight: 300;
	white-space: nowrap;
}

/* The logo inside __top must not stretch: it is a flex item of a ROW now, where
   the default card has it as an item of a COLUMN. */
.tw-customer-story.is-style-spotlight .tw-customer-story__top .tw-customer-story__logo {
	flex: 0 0 auto;
	margin-bottom: 0;
}

@media (max-width: 900px) {
	.tw-customer-story.is-style-spotlight .tw-customer-story__top {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}
	.tw-customer-story.is-style-spotlight .tw-customer-story__tags { justify-content: flex-start; }
}

/* -----------------------------------------------------------------------------
   is-style-spotlight + --on-photo   (Testimonials 2026, tasks/testimonials-2026)
   -----------------------------------------------------------------------------
   The spotlight style has TWO presentations in the design system and they differ
   by more than the image:

   About us  (the default)  the backdrop is a texture at 10% behind a frosted
                            panel; panel numerals are #083A75 on near-white.
   Testimonials (this)      the photo IS the card at full strength; the panel is
                            a light glass veil and everything on it is frost.

   So this modifier carries the whole treatment, not just the opacity. Values are
   the design's own: `.spot__panel` rgba(255,255,255,.15) + blur(44px),
   `.spot__metric` frost-100 at 40px, `.spot__metric .l` frost-500.

   The CTA is white-on-dark because the design's `.btn--primary` resolves
   `--color-bg-brand` under `data-theme="dark"`, where it flips to frost-100. This
   block renders no `data-theme`, so the flip has to be stated here.

   All opt-in, so the eight cards on the five production About pages keep the
   default presentation untouched.
   ----------------------------------------------------------------------------- */
.tw-customer-story.is-style-spotlight.tw-customer-story--on-photo .tw-customer-story__backdrop-img {
	opacity: 1;
}

.tw-customer-story.is-style-spotlight.tw-customer-story--on-photo .tw-customer-story__stats {
	background: rgba(255, 255, 255, 0.15);
	-webkit-backdrop-filter: blur(44px);
	backdrop-filter: blur(44px);
}

.tw-customer-story.is-style-spotlight.tw-customer-story--on-photo .tw-customer-story__stat-value {
	color: var(--p-frost-100, #F5FAFF);
	font-size: 40px;
	line-height: 1.1;
}

.tw-customer-story.is-style-spotlight.tw-customer-story--on-photo .tw-customer-story__stat-label {
	color: var(--p-frost-500, #CEE5FD);
}

.tw-customer-story.is-style-spotlight.tw-customer-story--on-photo .tw-customer-story__cta--primary {
	background: var(--p-frost-100, #F5FAFF);
	color: var(--p-raven-500, #1A1E22);
}

.tw-customer-story.is-style-spotlight.tw-customer-story--on-photo .tw-customer-story__cta--primary:hover {
	background: var(--p-frost-300, #E2EFFE);
}

/* A scrim only where the design declares one. Three of the four cards sit on a
   photo that is already dark enough on the copy side; the fourth (Velian) carries
   this gradient inline, so it is a per-card opt-in, not part of --on-photo. */
.tw-customer-story.is-style-spotlight.tw-customer-story--scrim .tw-customer-story__backdrop::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(14, 24, 40, .88) 0%, rgba(14, 24, 40, .72) 55%, rgba(14, 24, 40, .6) 100%);
}

@media (max-width: 900px) {
	.tw-customer-story.is-style-spotlight.tw-customer-story--scrim .tw-customer-story__backdrop::after {
		background: linear-gradient(180deg, rgba(14, 24, 40, .72) 0%, rgba(14, 24, 40, .88) 60%);
	}
}

/* ── Bar quote — `is-style-bar-quote` (case studies: Powy switch day, INDIGO) ──
   Rendered by ampeco_tw_customer_story_render_bar() under its own root class,
   so none of the card rules above apply. A 2px brand rule on the left, the quote
   mark sitting above the start of the rule, then the quote and a small byline.
   Sizes are the theme presets (they step down at <=640px); colours are DS
   semantic tokens. Space above the block (the mark needs ~40px) comes from the
   block's container in the editor, not from here. */
.tw-customer-story-bar {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--xl, 20px);
	margin: 0;
	padding: var(--wp--preset--spacing--5-xl, 40px);
	border-left: 2px solid var(--c-line-brand, #0E60C3);
}
.tw-customer-story-bar__mark {
	position: absolute;
	top: -37px;
	left: 0;
	width: 19px;
	height: 20px;
	line-height: 0;
	color: var(--c-icon-brand, #0E60C3);
}
.tw-customer-story-bar__mark svg { display: block; width: 19px; height: 20px; }
.tw-customer-story-bar__quote {
	margin: 0;
	padding: 0;
	border: 0;
	quotes: none;
	font-family: var(--font-body, "Lexend", sans-serif);
	font-weight: 300;
	font-style: normal;
	font-size: var(--wp--preset--font-size--body-large, 18px);
	line-height: 1.45;
	color: var(--c-ink-3, #233D63);
	text-wrap: pretty;
}
.tw-customer-story-bar__quote::before,
.tw-customer-story-bar__quote::after { content: none; }
.tw-customer-story-bar__byline {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--m, 12px);
	margin: 0;
}
.tw-customer-story-bar__avatar {
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	object-position: 50% 12%;
	background: var(--c-surface-2, #E2EFFE);
}
.tw-customer-story-bar__meta { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--xs, 4px); }
.tw-customer-story-bar__name,
.tw-customer-story-bar__role {
	font-family: var(--font-body, "Lexend", sans-serif);
	font-size: var(--wp--preset--font-size--body-small, 14px);
	line-height: 1.6;
}
.tw-customer-story-bar__name { font-weight: 500; color: var(--c-ink-brand, #0E60C3); }
.tw-customer-story-bar__role { font-weight: 300; color: var(--c-ink-3, #233D63); }