/*
 * Components for the home, family and case patterns and for the DRV Core blocks.
 * Block styles are registered in functions.php; their look lives here. Colours come from the
 * context variables in style.css (--drv-*), so a component looks right on navy and on paper.
 */

/* ---------- Text helpers ---------- */

.drv-muted {
	color: var(--drv-muted);
}

.drv-subtle {
	color: var(--drv-subtle);
}

.drv-lead {
	font-size: var(--wp--preset--font-size--lead);
}

.drv-small {
	font-size: var(--wp--preset--font-size--small);
}

.drv-compact {
	font-size: var(--wp--preset--font-size--compact);
}

.drv-caption {
	font-size: var(--wp--preset--font-size--label);
}

.drv-story-text {
	font-size: 18px;
}

/* Mono label: card eyebrows, step labels, numbers. */
.is-style-label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 500;
	line-height: 1.4;
	color: var(--drv-accent);
}

/* Spec values: figures in cards, strips and results. */
.is-style-spec-value {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 20px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--drv-text);
}

/* Inline "code" format = mono detail, e.g. "Orion  Ø 45 mm stator" or "Variants: 4524 KV516". */
:where(h1, h2, h3, h4) code {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 16px;
	font-weight: 500;
	color: var(--drv-subtle);
	background: none;
	padding: 0;
}

p code {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 1em;
	color: var(--drv-text);
	background: none;
	padding: 0;
}

/* Arrow links ("Explore the motors →"). */
.drv-arrow-link {
	font-weight: 600;
}

.drv-arrow-link a {
	color: var(--drv-accent);
	text-decoration: none;
}

.drv-arrow-link a:hover {
	text-decoration: underline;
}

/* Links and buttons inside a navy box that sits in a light section. */
.is-style-navy-box a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--copper);
}

.is-style-navy-box .wp-element-button {
	background-color: var(--wp--preset--color--copper);
	color: var(--wp--preset--color--navy);
}

/* Outline buttons in light sections. */
:is(.is-style-section-paper, .is-style-section-paper-slant) .is-style-outline .wp-element-button {
	color: var(--wp--preset--color--navy);
}

/* ---------- Section layout ---------- */

/* Standard vertical rhythm of a section inside the wide container. */
.drv-section {
	padding-top: var(--wp--preset--spacing--80);
	padding-bottom: var(--wp--preset--spacing--80);
}

.drv-stack {
	display: flex;
	flex-direction: column;
	gap: 48px;
}

.drv-stack > * {
	margin: 0 !important;
}

.drv-stack--tight {
	gap: 24px;
}

.drv-stack--loose {
	gap: 56px;
}

.drv-stack--story {
	gap: 80px;
}

/* Responsive grids: as many columns as fit, each at least --drv-min wide. */
.drv-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(var(--drv-min, 300px), 100%), 1fr));
	gap: 24px;
}

.drv-grid > * {
	margin: 0 !important;
}

.drv-grid--170 {
	--drv-min: 170px;
}

.drv-grid--200 {
	--drv-min: 200px;
}

.drv-grid--220 {
	--drv-min: 220px;
}

.drv-grid--240 {
	--drv-min: 240px;
}

.drv-grid--260 {
	--drv-min: 260px;
}

.drv-grid--280 {
	--drv-min: 280px;
	gap: 40px;
}

.drv-grid--320 {
	--drv-min: 320px;
}

.drv-grid--340 {
	--drv-min: 340px;
}

.drv-gap-16 {
	gap: 16px;
}

.drv-gap-32 {
	gap: 32px;
}

/* Heading block on the left, intro on the right; stacks on narrow screens. */
.drv-split {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 24px 64px;
}

.drv-split > * {
	flex: 1 1 420px;
	min-width: 0;
	margin: 0 !important;
}

.drv-split > :first-child {
	flex-basis: 520px;
}

.drv-split--between {
	justify-content: space-between;
}

.drv-split--between > * {
	flex: 0 1 auto;
}

/* Small vertical stack of eyebrow + heading. */
.drv-heading-stack {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.drv-heading-stack > * {
	margin: 0 !important;
}

/* Narrow title column + wide content column (sovereign, case story). */
.drv-aside {
	display: flex;
	flex-wrap: wrap;
	gap: 32px 64px;
}

.drv-aside > * {
	margin: 0 !important;
	min-width: 0;
}

.drv-aside > :first-child {
	flex: 1 1 260px;
}

.drv-aside > :last-child {
	flex: 3 1 560px;
}

.drv-aside > * > * {
	margin: 0;
}

.drv-aside > :first-child > * + * {
	margin-top: 8px;
}

.drv-aside > :last-child > * + * {
	margin-top: 16px;
}

.drv-aside h2 {
	font-size: 32px;
	line-height: 1.15;
}

.drv-rule-top {
	border-top: 1px solid var(--drv-accent);
	padding-top: 40px;
}

.drv-hairline-top {
	border-top: 1px solid var(--drv-line);
	padding-top: 48px;
}

.drv-hairline-top h2 {
	font-size: 24px;
	line-height: 1.2;
}

/* Breadcrumb line above a page title. */
.drv-breadcrumb {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--light-subtle);
}

.drv-breadcrumb a {
	color: inherit;
}

/* ---------- Hero: text on navy + white slanted panel ---------- */

.drv-hero {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	/* Text and white panel both sit inside the wide content column (theme.json wideSize). */
	padding-left: max(var(--wp--style--root--padding-left, 32px), calc((100vw - var(--wp--style--global--wide-size, 1376px)) / 2));
	padding-right: max(var(--wp--style--root--padding-right, 32px), calc((100vw - var(--wp--style--global--wide-size, 1376px)) / 2));
}

.drv-hero > * {
	margin: 0 !important;
}

.drv-hero__text {
	flex: 1.6 1 560px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 28px;
	padding: 88px 56px 80px 0;
}

.drv-hero__text > * {
	margin: 0 !important;
}

.drv-hero__text h1 {
	font-size: var(--wp--preset--font-size--display);
	line-height: 1.04;
	letter-spacing: -0.015em;
}

.drv-hero__text .drv-lead {
	max-width: 600px;
}

.drv-hero__cards {
	margin-top: 8px !important;
}

.drv-hero__cards h2 {
	font-size: 22px;
	line-height: 1.2;
}

/* Family hero: breadcrumb at the top, the rest centred in the remaining height. */
.drv-hero--family .drv-hero__text {
	justify-content: flex-start;
	gap: 40px;
	padding-top: 40px;
}

.drv-hero__body {
	margin: auto 0 !important;
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.drv-hero__body > * {
	margin: 0 !important;
}

.drv-hero--family h1 {
	font-size: clamp(44px, 6vw, 76px);
	line-height: 1;
}

.drv-hero__buttons {
	margin-top: 8px !important;
}

@media (max-width: 599px) {
	.drv-hero__text {
		padding-right: 0;
		padding-top: 56px;
	}
}

.is-style-slanted-panel {
	position: relative;
	flex: 1 1 460px;
	min-width: 0;
	min-height: 440px;
	display: flex !important;
	align-items: center;
	justify-content: center;
	/* Render centred in the visible white part: at mid-height the slant is at 11 %, so 15 % left / 4 % right. */
	padding: 48px 4% 48px 15%;
	background: var(--wp--preset--color--white);
	clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%);
}

.is-style-slanted-panel > * {
	position: relative;
	margin: 0 !important;
	width: 100%;
	max-width: 350px;
}

.drv-hero--family .is-style-slanted-panel > * {
	max-width: 450px;
}

.is-style-slanted-panel img {
	display: block;
	width: 100%;
	height: auto;
}

/*
 * Home hero: faint DRV mark at the top of the white panel, render at the bottom. Both are items of
 * one column with the space between them, so they never overlap; if the panel is too short, it
 * grows instead. The mark sits a little to the right, where the slant leaves more white at the top.
 */
.drv-hero__mark {
	flex-direction: column;
	justify-content: space-between !important;
	gap: 32px;
}

.drv-hero__mark::before {
	content: "";
	flex: none;
	width: min(38%, 180px);
	aspect-ratio: 58 / 56;
	margin-left: 12%;
	background: url("../images/mark.svg") center / contain no-repeat;
	opacity: 0.1;
}

/* ---------- Cards ---------- */

.is-style-card,
.is-style-linked-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 32px;
	background: var(--drv-card);
	border: 1px solid var(--drv-line-strong);
	border-radius: 4px;
	overflow: hidden;
}

.is-style-card > *,
.is-style-linked-card > * {
	margin: 0 !important;
}

/* Last item of a card (link, buttons) sits at the bottom, so cards in a row line up. */
.is-style-card > :last-child:not(:first-child),
.is-style-linked-card > :last-child:not(:first-child) {
	margin-top: auto !important;
}

.is-style-card h3,
.is-style-linked-card h3 {
	font-size: 22px;
	line-height: 1.25;
}

/* Whole card clickable: its first link stretches over the card. */
.is-style-linked-card a {
	text-decoration: none;
}

.is-style-linked-card :where(h1, h2, h3, h4) a {
	color: inherit;
}

.is-style-linked-card a:first-of-type::after {
	content: "";
	position: absolute;
	inset: 0;
}

.is-style-linked-card:hover {
	border-color: var(--drv-accent);
}

.is-style-linked-card:focus-within {
	outline: 2px solid var(--drv-focus);
	outline-offset: 3px;
}

.is-style-linked-card a:focus-visible {
	outline: 0;
}

.drv-card--compact {
	padding: 24px;
	gap: 10px;
}

/* Placeholder card (e.g. a project case to come). */
.drv-card--placeholder {
	border-style: dashed;
	border-color: var(--wp--preset--color--input-border);
}

.is-style-outline-box {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 4px;
}

.is-style-outline-box > * {
	margin: 0 !important;
}

.drv-cta-box {
	justify-content: center;
	gap: 16px;
	padding: 32px;
	border-color: var(--wp--preset--color--copper);
}

.drv-cta-box h2,
.drv-next h2 {
	font-size: 24px;
	line-height: 1.2;
}

.drv-cta-box > :last-child {
	margin-top: 0 !important;
}

/* Motor card: render well + body. */
.drv-motor-card {
	padding: 0;
	gap: 0;
}

.drv-motor-card__body {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 28px;
}

.drv-motor-card__body > * {
	margin: 0 !important;
}

.drv-motor-card__body > :last-child {
	margin-top: auto !important;
}

.drv-motor-card__intro {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.drv-motor-card__intro > * {
	margin: 0 !important;
}

.drv-motor-card h3 {
	font-size: var(--wp--preset--font-size--heading-3);
	line-height: 1.1;
}

/* Slanted image well: render on white, slanted bottom edge. */
.is-style-image-well {
	height: 280px;
	display: flex !important;
	align-items: center;
	justify-content: center;
	padding: 24px 28px 56px;
	background: var(--wp--preset--color--white);
	clip-path: polygon(0 0, 100% 0, 100% 78%, 0 100%);
}

.is-style-image-well > * {
	margin: 0 !important;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.is-style-image-well img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* Two equal buttons at the bottom of a card. */
.drv-card-actions {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.drv-card-actions .wp-block-button,
.drv-card-actions .wp-block-button__link {
	width: 100%;
}

/* ---------- Cards with aligned rows ---------- */

/*
 * Block style on the Group around a row of cards (services A–E, team): the cards share their
 * rows, so a title that wraps to two lines moves the next line down in every card alike. Each
 * card keeps its own spacing (its gap). Works for cards of up to 8 blocks. Without subgrid or
 * :has() support the cards simply keep their own layout.
 */
@supports (grid-template-rows: subgrid) and selector(:has(*)) {
	.is-style-aligned-rows {
		display: grid !important;
	}

	:where(.is-style-aligned-rows) {
		grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
		gap: 24px;
	}

	.is-style-aligned-rows > * {
		display: grid !important;
		grid-template-rows: subgrid;
		align-content: start;
	}

	.is-style-aligned-rows > * > * {
		margin-block: 0;
	}

	.is-style-aligned-rows > :has(> :nth-child(2):last-child) { grid-row: span 2; }
	.is-style-aligned-rows > :has(> :nth-child(3):last-child) { grid-row: span 3; }
	.is-style-aligned-rows > :has(> :nth-child(4):last-child) { grid-row: span 4; }
	.is-style-aligned-rows > :has(> :nth-child(5):last-child) { grid-row: span 5; }
	.is-style-aligned-rows > :has(> :nth-child(6):last-child) { grid-row: span 6; }
	.is-style-aligned-rows > :has(> :nth-child(7):last-child) { grid-row: span 7; }
	.is-style-aligned-rows > :has(> :nth-child(8):last-child) { grid-row: span 8; }
}

/* ---------- Spec grids and strips ---------- */

/* Hairline grid of label/value cells (motor card, case details). */
.is-style-spec-grid {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px !important;
	background: var(--drv-line);
	border: 1px solid var(--drv-line);
}

.is-style-spec-grid > * {
	margin: 0 !important;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 12px 14px;
	background: var(--drv-card);
}

/* An odd number of cells (e.g. the owner removed one) leaves no empty slot: the last spans the row. */
.is-style-spec-grid > :last-child:nth-child(odd) {
	grid-column: 1 / -1;
}

.is-style-spec-grid > * > * {
	margin: 0;
}

.drv-details-grid {
	flex: 1 1 320px;
	border-color: var(--drv-line-strong);
	background: var(--drv-line-strong);
	border-radius: 4px;
	overflow: hidden;
}

.drv-details-grid > * {
	padding: 14px 16px;
}

.drv-details-grid p:not(.drv-spec-label) {
	font-weight: 600;
}

/* Label above a value. */
.drv-spec-label {
	font-size: var(--wp--preset--font-size--caption);
	color: var(--drv-subtle);
}

/* Free-flowing strip of label/value pairs (shared specs, facts, key results, pairing). */
.drv-strip {
	gap: 20px 32px !important;
}

.drv-strip > * {
	margin: 0 !important;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.drv-strip > * > * {
	margin: 0;
}

.drv-strip .drv-spec-label {
	font-size: var(--wp--preset--font-size--label);
}

/* A small logo beside a value (a Row with an Image) sits on the value line, centred, without
   pushing the label down: the image takes no height of its own and may overhang the line.
   Not in the editor, where the image needs its own box to be clicked and resized. */
.drv-strip .is-layout-flex:has(> .wp-block-image) {
	align-items: center;
	gap: 12px;
}

.drv-strip .is-layout-flex > .wp-block-image:not(.block-editor-block-list__block) {
	display: flex;
	align-items: center;
	height: 0;
	margin: 0;
	flex: none;
}

.drv-strip .is-layout-flex > .wp-block-image img {
	max-height: 44px;
	width: auto !important;
}

.drv-strip--facts {
	gap: 24px 40px !important;
}

.drv-strip--facts > * {
	gap: 4px;
}

.drv-strip--facts .is-style-spec-value {
	font-size: 26px;
}

.drv-strip--facts .drv-spec-label {
	font-size: var(--wp--preset--font-size--small);
}

.drv-strip--shared .is-style-spec-value {
	font-size: 22px;
}

.drv-strip--results {
	gap: 32px 48px !important;
}

.drv-strip--results > * {
	gap: 6px;
}

.drv-strip--results .is-style-spec-value {
	font-size: 40px;
	line-height: 1.1;
}

.drv-strip--results .drv-spec-label {
	font-size: var(--wp--preset--font-size--compact);
}

.drv-strip--pairing {
	gap: 16px 32px !important;
}

.drv-strip--pairing p:not(.drv-spec-label) {
	font-weight: 600;
}

/* Band padding for strips. */
.drv-band {
	padding-top: 32px;
	padding-bottom: 32px;
}

.drv-band--roomy {
	padding-top: 40px;
	padding-bottom: 40px;
}

/* ---------- Chips ---------- */

.is-style-chips {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.is-style-chips li {
	margin: 0;
	padding: 7px 12px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--caption);
	line-height: 1.3;
	background: var(--drv-chip);
	border: 1px solid var(--drv-chip-border);
	border-radius: 3px;
}

/* ---------- Spec table ---------- */

.wp-block-table.is-style-spec-table {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
	border-color: var(--wp--preset--color--line-light);
}

.is-style-spec-table table {
	min-width: 920px;
	font-size: var(--wp--preset--font-size--compact);
}

.wp-block-table.is-style-spec-table thead th {
	padding: 14px 18px;
	background: var(--wp--preset--color--tint);
	font-weight: 700;
}

.wp-block-table.is-style-spec-table tbody td {
	padding: 16px 18px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	white-space: nowrap;
}

.wp-block-table.is-style-spec-table tbody th {
	padding: 16px 18px;
	font-size: var(--wp--preset--font-size--body);
	white-space: nowrap;
}

.wp-block-table.is-style-spec-table tbody tr {
	border-top-color: var(--wp--preset--color--line-light);
}

/* The column before the Datasheet button (Availability) holds the owner's own wording: let it wrap. */
.wp-block-table.is-style-spec-table tbody td:has(+ td > a) {
	min-width: 160px;
	white-space: normal;
}

/* A link in the table body is the row's "Datasheet" button. */
.is-style-spec-table tbody a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin: -12px 0;
	padding: 0 16px;
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--light);
	border-radius: 3px;
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
}

.is-style-spec-table tbody a:hover {
	background: var(--wp--preset--color--navy-card);
	color: var(--wp--preset--color--light);
}

.is-style-spec-table figcaption {
	margin: 0;
	padding: 14px 18px;
	border-top: 1px solid var(--wp--preset--color--line-light);
	text-align: left;
	font-size: var(--wp--preset--font-size--label);
	color: var(--wp--preset--color--ink-muted);
}

/* ---------- Steps, services, Taurus ---------- */

.drv-steps {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1px !important;
	background: var(--drv-line);
	border: 1px solid var(--drv-line);
	border-radius: 4px;
	overflow: hidden;
}

.drv-steps > * {
	margin: 0 !important;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 24px;
	background: var(--drv-card);
}

.drv-steps > * > * {
	margin: 0;
}

.drv-steps h3 {
	font-size: 18px;
	line-height: 1.3;
}

.drv-steps p:not(.is-style-label) {
	font-size: var(--wp--preset--font-size--small);
	color: var(--drv-muted);
}

/* Services A–E on top of the Taurus box, one bordered unit. */
.drv-services {
	border: 1px solid var(--drv-line);
	border-radius: 4px;
	overflow: hidden;
}

.drv-services > * {
	margin: 0 !important;
}

.drv-services .drv-steps {
	border: 0;
	border-radius: 0;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.drv-services .drv-steps > * {
	gap: 10px;
	padding: 28px 24px 32px;
}

.drv-services .drv-steps h3 {
	font-size: 19px;
	line-height: 1.25;
}

.drv-services .drv-steps .is-style-label {
	font-size: var(--wp--preset--font-size--label);
}

.drv-taurus {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 32px 48px;
	padding: 40px clamp(24px, 3vw, 40px);
}

.drv-taurus > * {
	margin: 0 !important;
}

.drv-taurus > :first-child {
	flex: 1 1 320px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.drv-taurus > :first-child > * {
	margin: 0;
}

.drv-taurus h3 {
	font-size: 26px;
	line-height: 1.15;
}

.drv-taurus .is-style-label {
	letter-spacing: 0.08em;
}

/* Taurus layers: boxes joined by arrows. */
.drv-flow {
	flex: 2 1 540px;
	display: flex !important;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 12px 36px !important;
}

.drv-flow > * {
	position: relative;
	margin: 0 !important;
	flex: 1 1 150px;
}

.drv-flow > * + *::before {
	content: "→";
	position: absolute;
	left: -27px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--wp--preset--color--copper);
	font-size: 20px;
}

.drv-flow p:not(.is-style-label) {
	font-size: var(--wp--preset--font-size--small);
}

@media (max-width: 599px) {
	.drv-flow > * + *::before {
		display: none;
	}
}

/* ---------- Placeholders (photos, figures, images to come) ---------- */

.drv-placeholder {
	display: flex !important;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: var(--wp--preset--color--placeholder);
	border-radius: 4px;
	color: var(--wp--preset--color--ink-muted);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--label);
	text-align: center;
}

.drv-placeholder > * {
	margin: 0 !important;
}

.drv-placeholder--photo {
	aspect-ratio: 4 / 5;
	font-size: 28px;
	color: var(--wp--preset--color--ink-subtle);
}

.drv-placeholder--figure {
	aspect-ratio: 16 / 6;
	border: 1px dashed var(--wp--preset--color--input-border);
}

/* Team member. */
.drv-person {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.drv-person > * {
	margin: 0 !important;
}

.drv-person h3 {
	margin-top: 4px !important;
	font-size: 19px;
}

.drv-person p {
	font-size: var(--wp--preset--font-size--small);
}

.drv-person .wp-block-image img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 4px;
}

.drv-person a {
	color: var(--wp--preset--color--navy);
	font-weight: 600;
}

/* LinkedIn logo: 44 px touch target, lined up with the text and at the same height on every card. */
.drv-person .drv-person__social {
	gap: 0;
	margin: auto 0 -10px -10px !important;
}

.drv-person__social .wp-social-link a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0;
}

.drv-person__social .wp-social-link a:focus-visible {
	outline: 2px solid var(--drv-focus);
	outline-offset: -4px;
}

.drv-role {
	font-weight: 600;
	color: var(--drv-accent);
}

/* Quote on the case page. */
.drv-quote {
	margin: 8px 0 0;
	padding: 20px 24px;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line-light);
	border-radius: 4px;
	color: var(--wp--preset--color--navy);
	font-size: 19px;
}

.drv-quote p {
	margin: 0;
}

.drv-quote cite {
	display: block;
	margin-top: 8px;
	font-size: var(--wp--preset--font-size--label);
	font-style: normal;
	color: var(--wp--preset--color--ink-muted);
}

/* Figure (placeholder or image) with caption. */
.drv-figure {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.drv-figure > * {
	margin: 0 !important;
}

/* Milestones box (Why DRV). */
.drv-milestones {
	flex-direction: row !important;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px !important;
}

.drv-milestones > :first-child {
	flex: 1 1 480px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.drv-milestones > :first-child > * {
	margin: 0;
}

.drv-milestones > :last-child {
	margin-top: 0 !important;
}

.drv-milestones ul {
	padding-left: 20px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.drv-milestones li {
	margin: 0;
}

/* Columns of text with a hairline on top (Why DRV). */
.drv-ruled-columns > * {
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	padding-top: 24px;
}

.drv-ruled-columns > * > * {
	margin: 0;
}

.drv-ruled-columns > * > * + * {
	margin-top: 12px;
}

.drv-ruled-columns h3 {
	font-size: 21px;
}

/* Numbered columns (Sovereign by design). */
.drv-numbered > * > * {
	margin: 0;
}

.drv-numbered > * > * + * {
	margin-top: 10px;
}

.drv-numbered h3 {
	font-size: var(--wp--preset--font-size--lead);
}

.drv-numbered p:not(.is-style-label) {
	font-size: var(--wp--preset--font-size--compact);
}

.drv-numbered .is-style-label {
	font-size: var(--wp--preset--font-size--body);
}

/* Contact address. */
.drv-address-lines p {
	margin: 0;
}

.drv-address-lines > * + * {
	margin-top: 4px !important;
}

/* ---------- Dynamic blocks from DRV Core ---------- */

/* Forms (datasheet request, contact). */
.drv-form {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 16px;
}

.drv-form > * {
	margin: 0;
}

.drv-form__wide {
	grid-column: 1 / -1;
}

.drv-form__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.drv-form :is(input[type="text"], input[type="email"], select, textarea) {
	min-height: 48px;
	padding: 0 14px;
	background: var(--drv-input);
	color: var(--drv-text);
	border: 1px solid var(--drv-input-border);
	border-radius: 3px;
	font: inherit;
	font-weight: 400;
	font-size: var(--wp--preset--font-size--body);
}

.drv-form textarea {
	padding: 12px 14px;
	resize: vertical;
}

.drv-form :is(input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--drv-focus);
	outline-offset: 1px;
}

.drv-form input[type="checkbox"] {
	flex: none;
	width: 20px;
	height: 20px;
	margin: 2px 0 0;
	accent-color: var(--drv-accent);
}

:is(.is-style-section-paper, .is-style-section-paper-slant) .drv-form input[type="checkbox"] {
	accent-color: var(--wp--preset--color--navy);
}

.drv-form__picker {
	background: var(--drv-input);
	border: 1px solid var(--drv-input-border);
	border-radius: 3px;
	font-weight: 400;
}

.drv-form__picker summary {
	min-height: 48px;
	padding: 12px 14px;
	cursor: pointer;
	color: var(--drv-text);
}

.drv-form__picker[open] summary {
	border-bottom: 1px solid var(--drv-line);
}

.drv-form__options {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 4px 14px 12px;
}

.drv-form__options fieldset {
	margin: 0;
	padding: 0;
	border: 0;
}

.drv-form__options legend {
	padding: 8px 0 2px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--drv-accent);
}

.drv-form__check {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	font-weight: 400;
	font-size: var(--wp--preset--font-size--body);
}

.drv-form__check input[type="checkbox"] {
	margin: 0;
}

/* Optional "also interested in" question on the datasheet form. */
.drv-form__interest {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.drv-form__interest legend {
	padding: 0 0 4px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.drv-form__interest .drv-form__field {
	margin-top: 8px;
}

/* Subject of a pre-filled contact form. */
.drv-form__enquiry {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin: 0;
	padding-left: 14px;
	border: 1px solid var(--drv-line);
	border-left: 3px solid var(--drv-accent);
	border-radius: 3px;
	background: var(--drv-card);
	color: var(--drv-text);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.drv-form__enquiry-remove {
	flex: none;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	color: inherit;
	font-size: 22px;
	line-height: 1;
	text-decoration: none;
}

.drv-form__enquiry-remove:focus-visible {
	outline: 2px solid var(--drv-focus);
	outline-offset: -2px;
}

.drv-form__optin {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: var(--wp--preset--font-size--small);
	color: var(--drv-muted);
}

.drv-form__submit {
	min-height: 52px;
	border: 0;
	border-radius: 3px;
	background: var(--wp--preset--color--copper);
	color: var(--wp--preset--color--navy);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.drv-form__submit:hover {
	background: var(--wp--preset--color--copper-hover);
}

:is(.is-style-section-paper, .is-style-section-paper-slant) .drv-form__submit {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--light);
}

:is(.is-style-section-paper, .is-style-section-paper-slant) .drv-form__submit:hover {
	background: var(--wp--preset--color--navy-card);
}

.drv-form__note {
	font-size: var(--wp--preset--font-size--label);
	color: var(--drv-subtle);
}

:is(.is-style-section-paper, .is-style-section-paper-slant) .drv-form__note {
	color: var(--drv-muted);
}

.drv-form__note a {
	color: var(--drv-accent);
}

.drv-form__trap {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* After a failed submission (no-JavaScript round trip). */
.drv-form [aria-invalid="true"] {
	border-color: var(--drv-error);
	box-shadow: inset 0 0 0 1px var(--drv-error);
}

.drv-form__error,
.drv-form__alert {
	color: var(--drv-error);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
}

.drv-form__alert {
	padding: 12px 14px;
	border: 1px solid var(--drv-error);
	border-radius: 3px;
}

.drv-form__submit:disabled {
	opacity: 0.7;
	cursor: progress;
}

/* Thank-you message in place of a sent form. */
.drv-form-result {
	align-self: start;
	padding: 24px 28px;
	border: 1px solid var(--drv-line);
	border-left: 3px solid var(--drv-accent);
	border-radius: 3px;
	background: var(--drv-card);
	color: var(--drv-text);
}

.drv-form-result > * {
	margin: 0;
}

.drv-form-result > * + * {
	margin-top: 10px;
}

.drv-form-result__title {
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 700;
}

.drv-form-result a {
	color: var(--drv-accent);
}

.drv-form-result:focus {
	outline: 2px solid var(--drv-focus);
	outline-offset: 2px;
}

/* Light box around the home datasheet form. */
.drv-datasheet-box {
	display: flex;
	flex-wrap: wrap;
	gap: 40px 64px;
	padding: clamp(28px, 4vw, 56px);
	border-radius: 4px;
}

.drv-datasheet-box > * {
	margin: 0 !important;
	min-width: 0;
}

.drv-datasheet-box > :first-child {
	flex: 1 1 340px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.drv-datasheet-box > :first-child > * {
	margin: 0;
}

.drv-datasheet-box > :last-child {
	flex: 1 1 440px;
}

.drv-datasheet-box h2,
.drv-form-section h2 {
	font-size: 34px;
	line-height: 1.1;
}

.drv-datasheet-box ul {
	padding-left: 20px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.drv-datasheet-box li {
	margin: 0;
}

/* Text column + form column (family datasheet, contact). */
.drv-form-section {
	display: flex;
	flex-wrap: wrap;
	gap: 40px 64px;
}

.drv-form-section > * {
	margin: 0 !important;
	min-width: 0;
}

.drv-form-section > :first-child {
	flex: 1 1 340px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.drv-form-section > :first-child > * {
	margin: 0;
}

.drv-form-section > :last-child {
	flex: 1 1 480px;
}

.drv-form-section--contact {
	gap: 48px 80px;
}

.drv-form-section--contact > :first-child {
	gap: 20px;
}

.drv-form-section--contact h2 {
	font-size: var(--wp--preset--font-size--heading-2);
	line-height: 1.08;
}

/* News cards. */
.drv-news-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: 24px;
}

.drv-news-card {
	display: flex;
	flex-direction: column;
	background: var(--drv-card);
	border: 1px solid var(--drv-line-strong);
	border-radius: 4px;
	overflow: hidden;
	color: var(--drv-text);
	text-decoration: none;
}

.drv-news-card:hover {
	border-color: var(--drv-accent);
	color: var(--drv-text);
}

.drv-news-card__media {
	aspect-ratio: 16 / 9;
	background: var(--wp--preset--color--navy-media);
}

/* No image yet: the brand mark, small and quiet, instead of an empty box. */
.drv-news-card__media--empty {
	background: var(--wp--preset--color--navy-media) url("../images/mark.svg") center / 18% no-repeat;
}

.drv-news-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.drv-news-card__body {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 24px;
}

.drv-news-card__meta {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--caption);
	text-transform: uppercase;
	color: var(--drv-accent);
}

.drv-news-card__title {
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 700;
	line-height: 1.25;
}

.drv-news-card__excerpt {
	font-size: var(--wp--preset--font-size--small);
	color: var(--drv-muted);
}

.drv-news-card__more {
	margin-top: auto;
	font-weight: 600;
	color: var(--drv-accent);
}

.drv-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 40px;
}

.drv-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid var(--drv-line-strong);
	border-radius: 3px;
	text-decoration: none;
}

.drv-pagination .current {
	background: var(--wp--preset--color--copper);
	color: var(--wp--preset--color--navy);
}

.drv-empty-note {
	color: var(--drv-subtle);
}

/* Other families and the /motors/ archive: small render tile + text. */
.drv-family-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: 24px;
}

.drv-family-tile {
	position: relative;
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 20px;
	background: var(--drv-card);
	border: 1px solid var(--drv-line-strong);
	border-radius: 4px;
	color: var(--drv-text);
	text-decoration: none;
}

.drv-family-tile:hover {
	border-color: var(--drv-accent);
	color: var(--drv-text);
}

.drv-family-tile > *,
.drv-family-tile__text > * {
	margin: 0 !important;
}

.drv-family-tile__image {
	flex: none;
	width: 104px;
	height: 88px;
	padding: 8px 8px 8px 18px;
	background: var(--wp--preset--color--white);
	clip-path: polygon(16% 0, 100% 0, 100% 100%, 0 100%);
}

.drv-family-tile__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.drv-family-tile__text {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.drv-family-tile__label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	text-transform: uppercase;
	color: var(--drv-accent);
}

.drv-family-tile__title {
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
}

/* ---------- Section spacing per reference page ---------- */

.drv-section--motors {
	padding-bottom: 56px;
}

.drv-section--sovereign {
	padding-top: 56px;
	padding-bottom: var(--wp--preset--spacing--70);
}

.drv-section--flush-top {
	padding-top: 0;
}

.drv-section--news {
	border-top: 1px solid var(--wp--preset--color--line-dark);
	padding-top: var(--wp--preset--spacing--70);
}

.drv-section--96 {
	padding-top: var(--wp--preset--spacing--70);
	padding-bottom: var(--wp--preset--spacing--70);
}

.drv-section--other {
	border-top: 1px solid var(--wp--preset--color--line-dark);
	padding-top: 72px;
	padding-bottom: var(--wp--preset--spacing--70);
}

.drv-section--case-header {
	padding-top: 40px;
	padding-bottom: 80px;
}

/* Slanted light sections: the ::before adds the 64 px slant on top of this padding. */
.is-style-section-paper-slant.drv-section {
	padding-top: clamp(56px, 7.5vw, 104px);
}

.is-style-section-paper-slant.drv-section--variants,
.is-style-section-paper-slant.drv-section--story {
	padding-top: clamp(48px, 6vw, 88px);
	padding-bottom: var(--wp--preset--spacing--70);
}

.drv-stack--16 {
	gap: 16px;
}

.drv-stack--40,
.drv-stack--news {
	gap: 40px;
}

.drv-heading-stack--12 {
	gap: 12px;
}

.drv-label-spaced {
	letter-spacing: 0.08em;
}

/* ---------- Heading sizes that differ from the element defaults ---------- */

h3.drv-h-28,
h2.drv-h-26 {
	font-size: 28px;
	line-height: 1.15;
}

h2.drv-h-26 {
	font-size: 26px;
}

h2.drv-h-42 {
	font-size: clamp(30px, 3.4vw, 42px);
	line-height: 1.1;
}

h1.drv-h-56 {
	font-size: var(--wp--preset--font-size--heading-1);
}

.drv-case-title {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.drv-case-title > * {
	margin: 0 !important;
}

.drv-case-title h1 {
	font-size: clamp(36px, 4.6vw, 58px);
}

.drv-measure {
	max-width: 760px;
}

.drv-measure-680 {
	max-width: 680px;
}

/* "All news →" and "Follow us on LinkedIn ↗". */
.drv-link-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 28px;
	font-weight: 600;
}

.drv-link-row > * {
	margin: 0 !important;
}

.drv-link-row a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--drv-accent);
	text-decoration: none;
}

.drv-link-row a:hover {
	text-decoration: underline;
}

/* ---------- Pairing + "Need a different variant?" ---------- */

.drv-pairing-row,
.drv-next-row {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}

.drv-pairing-row > *,
.drv-next-row > * {
	margin: 0 !important;
	min-width: 0;
}

.drv-pairing-row > :first-child {
	flex: 2 1 560px;
	gap: 18px;
}

.drv-pairing-row > :last-child {
	flex: 1 1 300px;
}

.drv-next-row > * {
	flex: 1 1 420px;
}

.drv-navy-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 32px;
	border-radius: 4px;
}

.drv-navy-card > * {
	margin: 0 !important;
}

.drv-callout {
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 700;
	line-height: 1.3;
}

/* ---------- Details matched to the reference ---------- */

.drv-arrow-link {
	color: var(--drv-accent);
}

:is(.is-style-section-paper, .is-style-section-paper-slant) .is-style-linked-card .drv-arrow-link {
	text-decoration: underline;
}

.drv-placeholder > p {
	font: inherit;
	color: inherit;
}

.drv-placeholder--photo {
	font-family: var(--wp--preset--font-family--sans);
}

.drv-rule-top {
	border-top-color: rgba(255, 255, 255, 0.18);
}

.drv-numbered p:not(.is-style-label) {
	color: var(--drv-muted);
}

.drv-heading-stack.drv-measure {
	max-width: 900px;
}

.drv-link-row a {
	text-decoration: underline;
}

.drv-arrow-link a {
	text-decoration: underline;
}

.drv-section--case-header .drv-details-grid {
	flex: 0 1 320px;
}

.drv-section--case-header .drv-split > :first-child {
	flex: 1 1 560px;
}

.drv-pairing-row > :first-child {
	flex-grow: 1.35;
}

.drv-pairing-row > :last-child {
	flex-grow: 1;
}

.wp-block-table.is-style-spec-table thead th {
	vertical-align: middle;
}

/* Sub-pages: the menu item of the home section they belong to is marked. */
.single-drv_family .drv-site-header a[href$="#motors"],
.post-type-archive-drv_family .drv-site-header a[href$="#motors"],
.single-drv_project .drv-site-header a[href$="#engineering"] {
	color: var(--wp--preset--color--copper);
}

.drv-card-actions .wp-block-button__link {
	padding-left: 12px;
	padding-right: 12px;
	white-space: nowrap;
}

@media (max-width: 599px) {
	.is-style-slanted-panel {
		min-height: 300px;
		padding: 32px 4% 32px 15%;
	}
}

/*
 * Home hero, side by side: the white panel slides under the text column, so the slant cuts through
 * the second entry card (which has its own background) but stays clear of the text above it.
 */
@media (min-width: 1100px) {
	.drv-hero__text {
		position: relative;
		z-index: 1;
	}

	.drv-hero:not(.drv-hero--family) > .is-style-slanted-panel {
		margin-left: -96px !important;
	}

	/* The render sits at the bottom, where the slant leaves the most white: less left padding.
	   The mark at the top moves right by the same amount, to stay centred in the white there. */
	.drv-hero__mark {
		padding-left: 6% !important;
	}

	.drv-hero__mark::before {
		align-self: center;
		margin-left: 14%;
	}
}