/*
 * bpwp-theme base layout — MOBILE FIRST (INV-01).
 *
 * Unprefixed rules are the mobile base. Tablet and desktop only enhance,
 * through the named media conditions --tablet-up, --tablet-only and --desktop-up.
 * The build resolves them from core/design-system/breakpoints.json.
 * Never write raw widths, max-width overrides or additional states here (INV-02).
 * Values come from theme.json tokens only.
 */

/* Header height per state is a token (header.md); the active value is exposed as
   --wp--custom--header-height for occupied space and scroll padding. */
:root {
	--wp--custom--header-height: var(--wp--custom--header-height--mobile);
}

html {
	scroll-padding-top: calc(var(--wp--custom--header-height) + var(--wp-admin--admin-bar--height, 0px));
}

/* Heading colour (design-system.md → Heading colour, AD-64). A site may set the optional
   `heading` colour token; the generated theme.json then carries the palette slug and headings
   on the page background, the surface and the secondary band take it (pairs validated at
   build). Without the token the custom property is undefined and headings inherit the text
   colour of their context, as before. On a primary band headings keep on-primary. */
:root {
	--bpwp-heading-color: var(--wp--preset--color--heading);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--bpwp-heading-color, inherit);
}

/* Fixed header (INV-03, header.md). Sticky keeps the header's occupied space in the
   document flow, so content is never hidden underneath it. The behavior is not
   configurable; only token values change its appearance. */
.bpwp-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
	min-height: var(--wp--custom--header-height);
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--on-surface);
	border-bottom: 1px solid var(--wp--preset--color--border);
}

/* The bar shares the page container of the sections and the footer: the root padding, and
   the wideSize edge once the viewport is wider than wideSize. */
.bpwp-header__bar {
	box-sizing: border-box;
	min-height: var(--wp--custom--header-height);
	padding-inline: max(var(--wp--style--root--padding-left), calc((100% - var(--wp--style--global--wide-size)) / 2));
}

.bpwp-header__brand {
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
}

/* Brand link: touch target of at least 44 CSS px (2.75rem, A11Y-13). */
.bpwp-header__brand a {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	color: inherit;
	text-decoration: none;
}

.bpwp-header__brand a:focus-visible {
	outline: 2px solid var(--wp--preset--color--focus);
	outline-offset: 2px;
}

/* Programmatic focus target of the skip link; no ring for focus via script/click. */
.bpwp-main:focus:not(:focus-visible) {
	outline: none;
}

/* Brand: logo (WordPress site logo, header.md → Brand) or the text brand. The site-logo
   block renders nothing without a logo; with one, the logo alone is the brand (its alt text
   names the business) and the text brand is not rendered twice. */
.bpwp-header__brand-group {
	gap: var(--wp--preset--spacing--20);
}

.bpwp-header__logo {
	margin: 0;
	line-height: 0;
}

.bpwp-header__logo a {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
}

.bpwp-header__logo img {
	width: auto;
	max-width: none;
	height: calc(var(--wp--custom--header-height) - var(--wp--preset--spacing--20) * 2);
}

.bpwp-header__logo a:focus-visible {
	outline: 2px solid var(--wp--preset--color--focus);
	outline-offset: 2px;
}

.bpwp-header__logo + .bpwp-header__brand {
	display: none;
}

/* ── Page sections (patterns bpwp/hero, bpwp/text-media, bpwp/cta-band) ──────────────
   Full-width sections stacked without gaps; each section carries its own spacing and
   token color pair. Structure: section > content group (+ optional image figure after it:
   the DOM order is always text first). Variants and options are modifier classes. */
.wp-block-post-content > .bpwp-hero,
.wp-block-post-content > .bpwp-text-media,
.wp-block-post-content > .bpwp-cta-band,
.wp-block-post-content > .bpwp-feature-list {
	margin-block: 0;
}

.bpwp-hero,
.bpwp-text-media,
.bpwp-cta-band,
.bpwp-feature-list {
	position: relative;
	isolation: isolate;
	padding-block: var(--wp--preset--spacing--60);
}

/* Section rhythm (composition.md §7): a data-driven block placed directly in the page content
   is a page section like a pattern section and takes the same vertical rhythm, whatever the
   source of its content (runtime data, editorial or mixed). Every bpwp/ data block wrapper
   carries data-bpwp-state (bpwp-core), so new data blocks join the rhythm automatically. */
.wp-block-post-content > [data-bpwp-state] {
	margin-block: 0;
	padding-block: var(--wp--preset--spacing--60);
}

/* Per-state text (content.md, AD-60): a text field with another wording, case or length in a
   state renders one inline element per variant; each shows only in its states. Mobile first:
   the base shows the mobile variant, the tablet and desktop conditions switch it. A hidden
   variant is display: none, so every state exposes exactly one text. Only the three platform
   states exist (INV-02). */
.bpwp-text-variant {
	display: none;
}

.bpwp-text-variant.bpwp-in-mobile {
	display: inline;
}

.bpwp-text-variant--case-uppercase {
	text-transform: uppercase;
}

.bpwp-text-variant--case-none {
	text-transform: none;
}

/* State rules (composition.md → State rules, AD-66) and per-state imagery (media.md, AD-67):
   an element the design shows in some states only carries bpwp-hide-<state> for every state
   that does not show it, written by the presentation mapping from the site's state rules. It
   is display: none in exactly that state, so every state exposes what it shows — to every
   user. Mobile first (INV-01): the mobile rule is the base; from its platform boundary the
   next state hands the element back to its own display and hides what it hides itself. An
   element returns to the display of its tag (revert); the targets the engine lays out as a
   row or a grid are named. All rules of one state have the same specificity, so within a
   state "hide" (written last) wins over "hand back". Only sections whose root is a plain
   block in every state can be hidden as a whole (site validation). */
.bpwp-hide-mobile {
	display: none !important;
}

/* A region all of whose parts are hidden in the state takes no space and adds no gap. */
.bpwp-composition__regions > .bpwp-composition__region:has(> *):not(:has(> :not(.bpwp-hide-mobile))) {
	display: none !important;
}

/* Order rules: the content fields of a section take an explicit visual order per state. The
   document order (the reading and focus order) never changes; only non-interactive text
   fields move. Only in a state whose order differs from the document order
   (bpwp-ordered-<state> on the content group) the group is a column of its fields; in every
   other state it stays in normal flow, exactly as a section without an order rule. A column
   does not collapse margins, so there a field keeps its top margin as the distance to the
   field above it: a paragraph or the calls to action follow at the paragraph distance, and a
   heading keeps the larger distance of its own margin on both sides. All of it at zero
   specificity: the layout of a component always wins. Mobile first: bpwp-order-<n> is the base. */
:where(.bpwp-ordered-mobile) {
	display: flex;
	flex-direction: column;
}

:where(.bpwp-ordered-mobile) > * {
	box-sizing: border-box;
	width: 100%;
	margin-block-end: 0;
}

:where(.bpwp-ordered-mobile > .bpwp-ctas) {
	margin-block-start: var(--wp--preset--font-size--base);
}

:where(.bpwp-ordered-mobile > h1) { margin-block-end: max(0rem, calc(0.67em - var(--wp--preset--font-size--base))); }
:where(.bpwp-ordered-mobile > h2) { margin-block-end: max(0rem, calc(0.83em - var(--wp--preset--font-size--base))); }
:where(.bpwp-ordered-mobile > h3) { margin-block-end: 0; }

.bpwp-order-1 { order: 1; }
.bpwp-order-2 { order: 2; }
.bpwp-order-3 { order: 3; }
.bpwp-order-4 { order: 4; }
.bpwp-order-5 { order: 5; }
.bpwp-order-6 { order: 6; }

.bpwp-eyebrow {
	margin-block-end: 0;
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.bpwp-subheading {
	font-size: var(--wp--preset--font-size--medium);
}

.bpwp-ctas {
	gap: var(--wp--preset--spacing--30);
}

/* Mobile: calls to action stacked full width. */
.bpwp-ctas > .wp-block-button {
	flex-basis: 100%;
}

.bpwp-ctas .wp-block-button__link {
	display: block;
	min-height: 2.75rem;
	box-sizing: border-box;
	text-align: center;
}

/* The outline takes its border out of the block padding, so both buttons of a pair have one height. */
.bpwp-cta--secondary .wp-block-button__link {
	padding-block: calc(var(--wp--preset--spacing--20) - 0.125rem);
	border: 0.125rem solid currentColor;
	background-color: transparent;
	color: inherit;
}

/* A data link without runtime data is removed by bpwp-core; without bpwp-core an
   unresolved one (no href) is never shown as a dead link. The block editor keeps it visible
   (its block wrapper, never rendered on the site): the stored button has no href by design, and
   its label is edited there (AD-81). A call to action inserted from a site pattern has no
   destination until a human sets its link (AD-85): it is not shown on the site until then either
   (generated pages never store one without a destination). */
.bpwp-data-link:not(:has(a[href])):not(.block-editor-block-list__block) {
	display: none;
}

.bpwp-cta:not(:has(a[href])):not(.block-editor-block-list__block) {
	display: none;
}

/* Images: decorative backdrops (hero default, cta-band image-background) cover the whole
   section behind a solid token panel; informative images keep their aspect ratio. */
.bpwp-hero__media,
.bpwp-text-media__media,
.bpwp-cta-band__media {
	margin: 0;
}

.bpwp-hero__media img,
.bpwp-text-media__media img,
.bpwp-cta-band__media img {
	display: block;
	width: 100%;
	height: auto;
}

.bpwp-hero--default > .bpwp-hero__media,
.bpwp-cta-band--image-background > .bpwp-cta-band__media {
	position: absolute;
	inset: 0;
	z-index: -1;
	max-width: none;
}

.bpwp-hero--default > .bpwp-hero__media img,
.bpwp-cta-band--image-background > .bpwp-cta-band__media img {
	height: 100%;
	object-fit: cover;
}

/* Hero — text contrast is carried by token pairs, never by the image (spec). */
.bpwp-hero {
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--on-surface);
}

.bpwp-hero .bpwp-hero__heading {
	font-size: var(--wp--preset--font-size--xx-large);
}

.bpwp-hero--default .bpwp-hero__content {
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--50);
	border-radius: var(--wp--custom--radius--medium);
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--on-surface);
}

.bpwp-hero--split-image > .bpwp-hero__media {
	margin-block-start: var(--wp--preset--spacing--50);
}

.bpwp-hero--split-image > .bpwp-hero__media img {
	border-radius: var(--wp--custom--radius--medium);
}

.bpwp-hero--align-center .bpwp-hero__content {
	text-align: center;
}

.bpwp-hero--align-center .bpwp-ctas,
.bpwp-hero--align-center .bpwp-keywords {
	justify-content: center;
}

/* Text and media. */
.bpwp-text-media--background-background {
	background-color: var(--wp--preset--color--background);
	color: var(--wp--preset--color--foreground);
}

.bpwp-text-media--background-surface {
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--on-surface);
}

.bpwp-text-media--background-secondary {
	background-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--on-secondary);
}

.bpwp-text-media > .bpwp-text-media__media {
	margin-block-start: var(--wp--preset--spacing--50);
}

.bpwp-text-media--image-shape-rounded .bpwp-text-media__media img {
	border-radius: var(--wp--custom--radius--medium);
}

/* Arch: fully rounded top corners (the radius is clamped to half the width). */
.bpwp-text-media--image-shape-arch .bpwp-text-media__media img {
	border-radius: var(--wp--custom--radius--pill) var(--wp--custom--radius--pill) 0 0;
}

/* Call-to-action band: tone = validated token pair. In image-background the pair colors
   the text panel, so contrast never depends on the image. */
.bpwp-cta-band--tone-primary,
.bpwp-cta-band--image-background.bpwp-cta-band--tone-primary .bpwp-cta-band__content {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
	/* The heading colour is validated on light surfaces only: on primary a heading is on-primary. */
	--bpwp-heading-color: currentColor;
}

.bpwp-cta-band--tone-surface,
.bpwp-cta-band--image-background.bpwp-cta-band--tone-surface .bpwp-cta-band__content {
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--on-surface);
}

.bpwp-cta-band--tone-secondary,
.bpwp-cta-band--image-background.bpwp-cta-band--tone-secondary .bpwp-cta-band__content {
	background-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--on-secondary);
}

.bpwp-cta-band--image-background .bpwp-cta-band__content {
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--50);
	border-radius: var(--wp--custom--radius--large);
}

/* On a primary band the primary button inverts its pair (on-primary/primary, validated),
   and focus rings use on-primary, the color validated against primary. */
.bpwp-cta-band--tone-primary .bpwp-cta--primary .wp-block-button__link {
	background-color: var(--wp--preset--color--on-primary);
	color: var(--wp--preset--color--primary);
}

.bpwp-cta-band--tone-primary a:focus-visible {
	outline-color: var(--wp--preset--color--on-primary);
}

.bpwp-cta-band--align-center .bpwp-cta-band__content {
	text-align: center;
}

.bpwp-cta-band--align-center .bpwp-ctas {
	justify-content: center;
}

/* Keyword row (hero items): short editorial keywords, separated by a decorative dot. */
.bpwp-keywords {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	margin-block: var(--wp--preset--spacing--40) 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.bpwp-keywords li + li::before {
	content: "·" / "";
	margin-inline-end: var(--wp--preset--spacing--30);
}

/* Focal point of cropped images (media.json → focalPoint, rounded to tenths): the
   presentation mapping adds bpwp-focal-x-<n> and bpwp-focal-y-<n> to the image figure. */
.bpwp-focal-x-0 { --bpwp-focal-x: 0%; }
.bpwp-focal-x-10 { --bpwp-focal-x: 10%; }
.bpwp-focal-x-20 { --bpwp-focal-x: 20%; }
.bpwp-focal-x-30 { --bpwp-focal-x: 30%; }
.bpwp-focal-x-40 { --bpwp-focal-x: 40%; }
.bpwp-focal-x-50 { --bpwp-focal-x: 50%; }
.bpwp-focal-x-60 { --bpwp-focal-x: 60%; }
.bpwp-focal-x-70 { --bpwp-focal-x: 70%; }
.bpwp-focal-x-80 { --bpwp-focal-x: 80%; }
.bpwp-focal-x-90 { --bpwp-focal-x: 90%; }
.bpwp-focal-x-100 { --bpwp-focal-x: 100%; }
.bpwp-focal-y-0 { --bpwp-focal-y: 0%; }
.bpwp-focal-y-10 { --bpwp-focal-y: 10%; }
.bpwp-focal-y-20 { --bpwp-focal-y: 20%; }
.bpwp-focal-y-30 { --bpwp-focal-y: 30%; }
.bpwp-focal-y-40 { --bpwp-focal-y: 40%; }
.bpwp-focal-y-50 { --bpwp-focal-y: 50%; }
.bpwp-focal-y-60 { --bpwp-focal-y: 60%; }
.bpwp-focal-y-70 { --bpwp-focal-y: 70%; }
.bpwp-focal-y-80 { --bpwp-focal-y: 80%; }
.bpwp-focal-y-90 { --bpwp-focal-y: 90%; }
.bpwp-focal-y-100 { --bpwp-focal-y: 100%; }

.bpwp-hero__media img,
.bpwp-cta-band__media img {
	object-position: var(--bpwp-focal-x, 50%) var(--bpwp-focal-y, 50%);
}

/* Responsive focal point (media.md → Focal point, AD-80). The default (desktop) crop is the native
   focal point of the image block, which WordPress writes as an inline object-position on the
   image; legacy focal classes (above) apply where it is absent. A human may override the crop for
   tablet and mobile (bpwpFocal): bpwp-theme then marks the figure .bpwp-focal-responsive and sets
   --bpwp-focal-tablet / --bpwp-focal-mobile (and --bpwp-focal-default from the native value).
   !important is required — and limited to this class — because a stylesheet can override the
   native inline style only that way; each state resolves: its override › the native default ›
   the legacy classes › the centre. Without an override the class is absent and nothing here
   applies. */
.bpwp-focal-responsive img {
	object-position: var(--bpwp-focal-mobile, var(--bpwp-focal-default, var(--bpwp-focal-x, 50%) var(--bpwp-focal-y, 50%))) !important;
}

/* Hero side-fade (hero 0.4.0, AD-79): one composition in every state. The decorative image
   (alt="") is the full-bleed canvas of the whole section and the text lies over it — no
   panel, no card, no section of its own below the image. The text stands on the contrast
   scrim: the surface token at a fixed strength (--bpwp-hero-scrim, 75 %), so its contrast is
   validated against the scrim over the darkest and the lightest possible image pixel, never
   against the image (site validation HERO_SCRIM_CONTRAST). The scrim fades into the image
   away from the text. Mobile base: the image shows on its own in an image zone of the
   existing 4:3 mobile proportion at the top; the text follows over the image, on the scrim
   that fades in above it. */
.bpwp-hero--side-fade {
	--bpwp-hero-scrim: color-mix(in srgb, var(--wp--preset--color--surface) 75%, transparent);
}

.has-global-padding > .bpwp-hero.bpwp-hero--side-fade {
	margin-right: calc(var(--wp--style--root--padding-right) * -1);
	margin-left: calc(var(--wp--style--root--padding-left) * -1);
}

.bpwp-hero.bpwp-hero--side-fade {
	display: flex;
	flex-direction: column;
	padding-inline: 0;
	overflow: hidden;
	border-radius: 0;
}

.bpwp-hero--side-fade > .bpwp-hero__content {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	padding-inline: var(--wp--style--root--padding-left) var(--wp--style--root--padding-right);
}

.bpwp-hero--side-fade > .bpwp-hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: auto;
	max-width: none;
	margin: 0;
}

/* The block editor writes an inline height: auto on the image and wraps a selected image in its
   resize box; the image fills the whole canvas there too, as on the frontend. */
.bpwp-hero--side-fade > .bpwp-hero__media img {
	height: 100% !important;
	object-fit: cover;
}

.bpwp-hero--side-fade > .bpwp-hero__media > .components-resizable-box__container {
	width: 100% !important;
	height: 100% !important;
}

/* With an image shown on mobile: the image zone at the top, the text over the image below it
   (zero-specificity condition, so the tablet and desktop rules replace it by source order). The
   scrim is a layer behind the text: it fades in over the end of the image zone and reaches the
   end of the section, between the image (z-index -2) and the text. */
.bpwp-hero.bpwp-hero--side-fade:where(:has(> .bpwp-hero__media:not(.bpwp-hide-mobile) img)) {
	padding-block-start: 0;
}

.bpwp-hero.bpwp-hero--side-fade:where(:has(> .bpwp-hero__media:not(.bpwp-hide-mobile) img))::before {
	content: "";
	aspect-ratio: 4 / 3;
}

.bpwp-hero--side-fade:where(:has(> .bpwp-hero__media:not(.bpwp-hide-mobile) img)) > .bpwp-hero__content {
	position: relative;
}

.bpwp-hero--side-fade:where(:has(> .bpwp-hero__media:not(.bpwp-hide-mobile) img)) > .bpwp-hero__content::before {
	content: "";
	position: absolute;
	inset: calc(var(--wp--preset--spacing--70) * -1) 0 calc(var(--wp--preset--spacing--60) * -1);
	z-index: -1;
	background: linear-gradient(to bottom, transparent, var(--bpwp-hero-scrim) var(--wp--preset--spacing--70));
}

.bpwp-cta-band--image-fade > .bpwp-cta-band__media {
	position: relative;
	order: -1;
	width: 100%;
	max-width: none;
	margin-block-end: var(--wp--preset--spacing--40);
}

.bpwp-cta-band--image-fade > .bpwp-cta-band__media img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.bpwp-cta-band--image-fade > .bpwp-cta-band__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, transparent 55%, var(--bpwp-fade-color));
}

/* Editable media slot without an image (media.md → Editable media slot): only the block editor
   shows it — the frontend renders no empty slot — so nothing covers the native Upload / Media
   Library controls of its placeholder: no fade over it, and the backdrop slots of the default
   and side-fade variants sit beside the text instead of behind it until an image is chosen
   (side-fade mobile: above the text, where the image zone is). */
.bpwp-hero > .bpwp-hero__media:not(:has(img))::after {
	content: none;
}

.bpwp-hero--default > .bpwp-hero__media:not(:has(img)) {
	position: relative;
	inset: auto;
	z-index: auto;
	margin-block-start: var(--wp--preset--spacing--50);
}

.bpwp-hero--side-fade > .bpwp-hero__media:not(:has(img)) {
	position: relative;
	inset: auto;
	z-index: auto;
	order: -1;
	margin-block-end: var(--wp--preset--spacing--40);
}

/* CTA band image-fade (mobile base): the decorative image first, fading into the band's
   tone color; the text below it on the solid tone pair. */
.bpwp-cta-band--tone-primary {
	--bpwp-fade-color: var(--wp--preset--color--primary);
}

.bpwp-cta-band--tone-surface {
	--bpwp-fade-color: var(--wp--preset--color--surface);
}

.bpwp-cta-band--tone-secondary {
	--bpwp-fade-color: var(--wp--preset--color--secondary);
}

.bpwp-cta-band.bpwp-cta-band--image-fade {
	display: flex;
	flex-direction: column;
	padding-block: 0 var(--wp--preset--spacing--60);
	padding-inline: 0;
	overflow: hidden;
}

.bpwp-cta-band--image-fade > .bpwp-cta-band__content {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	padding-inline: var(--wp--preset--spacing--40);
}

/* Without an image (none chosen, withheld or missing) the band does not start with its image:
   it takes the same spacing at its start as at its end (engine 0.6.0; found by a real render).
   A side-fade hero without an image keeps its base spacing at the start (above). */
.bpwp-cta-band.bpwp-cta-band--image-fade:not(:has(> .bpwp-cta-band__media)) {
	padding-block-start: var(--wp--preset--spacing--60);
}

/* CTA band inset: a rounded band inside wideSize, inset from the page edges. */
.has-global-padding > .bpwp-cta-band.bpwp-cta-band--inset-true {
	max-width: var(--wp--style--global--wide-size);
	margin-right: auto;
	margin-left: auto;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--large);
}

/* An inset band that ends the page keeps the section rhythm between its panel and the footer. */
.wp-block-post-content > .bpwp-cta-band.bpwp-cta-band--inset-true:last-child {
	margin-block-end: var(--wp--preset--spacing--60);
}

/* CTA band image-overlay (cta-band 0.3.0, AD-80): an image-backed overlay composition in every
   state. The decorative image (alt="") is the canvas of the whole band and the text and calls to
   action lie over it — no panel, no card, no text section of its own below the image. The text
   stands on the scrim: the band's tone colour at a fixed strength (--bpwp-band-scrim, 75 %), so
   its contrast is validated against the scrim over the darkest and the lightest possible image
   pixel, never against the image (site validation OVERLAY_SCRIM_CONTRAST). Mobile base: the image
   shows on its own in an image zone of the 4:3 proportion at the top; the text follows over the
   image, on the scrim that fades in above it. Separate selectors from the hero (AD-79). */
.bpwp-cta-band--image-overlay {
	--bpwp-band-scrim: color-mix(in srgb, var(--bpwp-fade-color) 75%, transparent);
}

.bpwp-cta-band.bpwp-cta-band--image-overlay {
	display: flex;
	flex-direction: column;
	padding-inline: 0;
	overflow: hidden;
}

.bpwp-cta-band--image-overlay > .bpwp-cta-band__content {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	padding-inline: var(--wp--style--root--padding-left) var(--wp--style--root--padding-right);
}

.bpwp-cta-band--image-overlay.bpwp-cta-band--inset-true > .bpwp-cta-band__content {
	padding-inline: var(--wp--preset--spacing--40);
}

.bpwp-cta-band--image-overlay > .bpwp-cta-band__media {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: auto;
	max-width: none;
	margin: 0;
}

/* The block editor writes an inline height: auto on the image and wraps a selected image in its
   resize box; the image fills the whole canvas there too, as on the frontend. */
.bpwp-cta-band--image-overlay > .bpwp-cta-band__media img {
	height: 100% !important;
	object-fit: cover;
}

.bpwp-cta-band--image-overlay > .bpwp-cta-band__media > .components-resizable-box__container {
	width: 100% !important;
	height: 100% !important;
}

/* With an image shown on mobile: the image zone at the top, the text over the image below it
   (zero-specificity condition, so the tablet and desktop rules replace it by source order). The
   scrim is a layer behind the text: it fades in over the end of the image zone and reaches the
   end of the band, between the image (z-index -2) and the text. */
.bpwp-cta-band.bpwp-cta-band--image-overlay:where(:has(> .bpwp-cta-band__media:not(.bpwp-hide-mobile) img)) {
	padding-block-start: 0;
}

.bpwp-cta-band.bpwp-cta-band--image-overlay:where(:has(> .bpwp-cta-band__media:not(.bpwp-hide-mobile) img))::before {
	content: "";
	aspect-ratio: 4 / 3;
}

.bpwp-cta-band--image-overlay:where(:has(> .bpwp-cta-band__media:not(.bpwp-hide-mobile) img)) > .bpwp-cta-band__content {
	position: relative;
}

.bpwp-cta-band--image-overlay:where(:has(> .bpwp-cta-band__media:not(.bpwp-hide-mobile) img)) > .bpwp-cta-band__content::before {
	content: "";
	position: absolute;
	inset: calc(var(--wp--preset--spacing--70) * -1) 0 calc(var(--wp--preset--spacing--60) * -1);
	z-index: -1;
	background: linear-gradient(to bottom, transparent, var(--bpwp-band-scrim) var(--wp--preset--spacing--70));
}

/* Editable media slot of a band without an image (a band inserted from a site pattern, AD-85):
   only the block editor shows it — the frontend renders no image block without an image — so
   nothing covers the native Upload / Media Library controls of its placeholder: no fade or scrim
   over it, and on mobile the slot of a backdrop or overlay band sits in the band's flow at its
   start, where the image zone is, instead of behind the text. */
.bpwp-cta-band > .bpwp-cta-band__media:not(:has(img))::after {
	content: none;
}

.bpwp-cta-band--image-background > .bpwp-cta-band__media:not(:has(img)),
.bpwp-cta-band--image-overlay > .bpwp-cta-band__media:not(:has(img)) {
	position: relative;
	inset: auto;
	z-index: auto;
	order: -1;
	margin-block-end: var(--wp--preset--spacing--40);
}

/* Feature list: short editorial items (core list), each optionally led by a theme icon or
   a small image; one column on mobile. */
.bpwp-feature-list > .bpwp-feature-list__items {
	max-width: var(--wp--style--global--wide-size);
}

.bpwp-feature-list__items {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	margin-block: var(--wp--preset--spacing--40) 0;
	padding: 0;
	list-style: none;
}

.bpwp-feature-list__item {
	display: grid;
	align-content: start;
	gap: var(--wp--preset--spacing--20);
}

.bpwp-feature-list__item strong {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: inherit;
}

.bpwp-feature-list__item br {
	display: none;
}

.bpwp-feature-list__item img {
	display: block;
	width: 100%;
	height: auto;
}

.bpwp-feature-list--default .bpwp-feature-list__item img {
	width: 4rem;
}

.bpwp-feature-list--image-shape-rounded .bpwp-feature-list__item img {
	border-radius: var(--wp--custom--radius--medium);
}

.bpwp-feature-list--image-shape-arch .bpwp-feature-list__item img {
	border-radius: var(--wp--custom--radius--pill) var(--wp--custom--radius--pill) 0 0;
}

.bpwp-feature-list--cards .bpwp-feature-list__item {
	padding: var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radius--large);
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--on-surface);
}

.bpwp-feature-list > .bpwp-ctas {
	margin-block-start: var(--wp--preset--spacing--40);
}

/* Theme icons of feature items (items[].icon): decorative CSS masks in currentColor, so the
   color follows the token pair; no markup, no remote file. */
.bpwp-feature-list__item[class*="--icon-"]::before {
	content: "";
	display: block;
	width: 2.5rem;
	height: 2.5rem;
	background-color: currentColor;
	-webkit-mask: var(--bpwp-icon) center / contain no-repeat;
	mask: var(--bpwp-icon) center / contain no-repeat;
}

.bpwp-feature-list__item--icon-check { --bpwp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5l2.5 2.5L16 9.5'/%3E%3C/svg%3E"); }
.bpwp-feature-list__item--icon-star { --bpwp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.6 5.6 6.1.7-4.5 4.2 1.2 6L12 16.6l-5.4 2.9 1.2-6-4.5-4.2 6.1-.7z'/%3E%3C/svg%3E"); }
.bpwp-feature-list__item--icon-heart { --bpwp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7.5-4.6-7.5-10A4.3 4.3 0 0 1 12 7.3 4.3 4.3 0 0 1 19.5 10c0 5.4-7.5 10-7.5 10z'/%3E%3C/svg%3E"); }
.bpwp-feature-list__item--icon-leaf { --bpwp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19C5 10 10 5 20 4c-1 10-6 15-15 15z'/%3E%3Cpath d='M5 19l8-8'/%3E%3C/svg%3E"); }
.bpwp-feature-list__item--icon-blossom { --bpwp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3Cpath d='M12 9.5C9 6 10 3 12 3s3 3 0 6.5zM12 14.5C15 18 14 21 12 21s-3-3 0-6.5zM9.5 12C6 15 3 14 3 12s3-3 6.5 0zM14.5 12C18 9 21 10 21 12s-3 3-6.5 0z'/%3E%3C/svg%3E"); }
.bpwp-feature-list__item--icon-drop { --bpwp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M12 3s6 6.5 6 11a6 6 0 0 1-12 0c0-4.5 6-11 6-11z'/%3E%3C/svg%3E"); }
.bpwp-feature-list__item--icon-sparkle { --bpwp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8zM18 16l.8 2.2L21 19l-2.2.8L18 22l-.8-2.2L15 19l2.2-.8z'/%3E%3C/svg%3E"); }
.bpwp-feature-list__item--icon-diamond { --bpwp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M7 4h10l4 5-9 11L3 9z'/%3E%3Cpath d='M3 9h18M9 4l3 16 3-16'/%3E%3C/svg%3E"); }
.bpwp-feature-list__item--icon-sun { --bpwp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M2 12h2M20 12h2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E"); }
.bpwp-feature-list__item--icon-clock { --bpwp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.bpwp-feature-list__item--icon-calendar { --bpwp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E"); }
.bpwp-feature-list__item--icon-gift { --bpwp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='4'/%3E%3Cpath d='M5 12v9h14v-9M12 8v13M12 8c-2-4-6-4-6-1.5S10 8 12 8zm0 0c2-4 6-4 6-1.5S14 8 12 8z'/%3E%3C/svg%3E"); }

/* Global footer (footer.md): brand, contact items and social profiles from runtime data,
   then the copyright line and the footer menu. Mobile: everything stacked. */
.bpwp-footer {
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--on-surface);
	border-top: 1px solid var(--wp--preset--color--border);
}

.bpwp-footer a {
	color: inherit;
}

.bpwp-footer__inner {
	padding-block: var(--wp--preset--spacing--50);
}

.bpwp-footer__inner > .bpwp-footer__main,
.bpwp-footer__inner > .bpwp-footer__bottom {
	max-width: var(--wp--style--global--wide-size);
}

.bpwp-footer__main {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
}

.bpwp-footer__brand {
	display: flex;
	align-items: center;
}

.bpwp-footer__logo {
	margin: 0;
	line-height: 0;
}

.bpwp-footer__logo img {
	width: auto;
	max-width: none;
	height: 3rem;
}

.bpwp-footer__logo a:focus-visible {
	outline: 2px solid var(--wp--preset--color--focus);
	outline-offset: 2px;
}

.bpwp-footer__site-title {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
}

.bpwp-footer__logo + .bpwp-footer__site-title {
	display: none;
}

.bpwp-footer__bottom {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	margin-block-start: var(--wp--preset--spacing--40);
	padding-block-start: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--border);
	font-size: var(--wp--preset--font-size--small);
	text-align: center;
}

.bpwp-footer__bottom .bpwp-nav__list {
	justify-content: center;
}

.bpwp-copyright {
	margin: 0;
}

/* ── Composition (component composition, AD-51) ─────────────────────────────────────
   One band on one surface with the section rhythm, and a wideSize container of the layout's
   regions in document order (the reading order). Each state's layout is a fixed vocabulary of
   classes written by the presentation mapping from a core or site layout: --<state>-stack or
   --<state>-row, --<state>-tracks-<shares> (visual order), --<state>-align-<a> and
   --<state>-reverse (two regions, one of them images only: visual order only). Parts inside a
   region are not page sections: no section spacing, no own inline padding, no own band colour. */
.wp-block-post-content > .bpwp-composition {
	margin-block: 0;
}

.bpwp-composition {
	position: relative;
	isolation: isolate;
	padding-block: var(--wp--preset--spacing--60);
}

.bpwp-composition--surface-background {
	background-color: var(--wp--preset--color--background);
	color: var(--wp--preset--color--foreground);
}

.bpwp-composition--surface-surface {
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--on-surface);
}

.bpwp-composition--surface-secondary {
	background-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--on-secondary);
}

.bpwp-composition__regions {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--50);
}

.bpwp-composition__regions > .bpwp-composition__region {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--50);
	min-width: 0;
	margin: 0;
}

/* A region whose parts rendered nothing (a data-driven part without runtime data, INV-16)
   takes no space and adds no gap. */
.bpwp-composition__regions > .bpwp-composition__region:not(:has(> *)) {
	display: none;
}

.bpwp-composition__region > * {
	margin-block: 0;
}

.bpwp-composition__region > .alignfull,
.bpwp-composition__region > [data-bpwp-state] {
	max-width: none;
	margin-inline: 0;
	padding-block: 0;
	padding-inline: 0;
}

.bpwp-composition__region > .bpwp-text-media,
.bpwp-composition__region > .bpwp-feature-list {
	background-color: transparent;
	color: inherit;
}

/* Inside a region a part's content starts at the region's start edge: the constrained layout
   keeps its measure (contentSize) but not its centring, so text shares the start edge of the
   other parts and bands instead of floating in the middle of a wide region. WordPress centres
   constrained children with !important (layout support); this rule is more specific. */
.bpwp-composition__region > .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	margin-inline-start: 0 !important;
	margin-inline-end: auto !important;
}

/* Image frame (component image-frame): the image at the width of its region, cropped to the
   frame around the media.json focal point; fill takes the height of its row (tablet and
   desktop rows only, validated), never less than a token minimum. */
.bpwp-image-frame {
	margin: 0;
}

.bpwp-image-frame img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	object-position: var(--bpwp-focal-x, 50%) var(--bpwp-focal-y, 50%);
}

.bpwp-image-frame--shape-rounded img {
	border-radius: var(--wp--custom--radius--medium);
}

.bpwp-image-frame--shape-arch img {
	border-radius: var(--wp--custom--radius--pill) var(--wp--custom--radius--pill) 0 0;
}

/* Mobile layout of the composition and the base frame of the image. */
.bpwp-composition--mobile-row > .bpwp-composition__regions {
	display: grid;
	column-gap: var(--wp--preset--spacing--60);
}

.bpwp-composition--mobile-tracks-1-1 > .bpwp-composition__regions {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.bpwp-composition--mobile-tracks-1-2 > .bpwp-composition__regions {
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}

.bpwp-composition--mobile-tracks-2-1 > .bpwp-composition__regions {
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}

.bpwp-composition--mobile-tracks-2-3 > .bpwp-composition__regions {
	grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
}

.bpwp-composition--mobile-tracks-3-2 > .bpwp-composition__regions {
	grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
}

.bpwp-composition--mobile-tracks-1-3 > .bpwp-composition__regions {
	grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
}

.bpwp-composition--mobile-tracks-3-1 > .bpwp-composition__regions {
	grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
}

.bpwp-composition--mobile-tracks-1-1-1 > .bpwp-composition__regions {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}

.bpwp-composition--mobile-align-start > .bpwp-composition__regions {
	align-items: start;
}

.bpwp-composition--mobile-align-center > .bpwp-composition__regions {
	align-items: center;
}

.bpwp-composition--mobile-align-end > .bpwp-composition__regions {
	align-items: end;
}

.bpwp-composition--mobile-align-stretch > .bpwp-composition__regions {
	align-items: stretch;
}

.bpwp-composition--mobile-reverse > .bpwp-composition__regions > :first-child {
	order: 1;
}

.bpwp-composition--mobile-row > .bpwp-composition__regions > .bpwp-composition__region:has(> .bpwp-image-frame--frame-fill) {
	align-self: stretch;
}

.bpwp-image-frame--frame-native img {
	aspect-ratio: auto;
}

.bpwp-image-frame--frame-1-1 img {
	aspect-ratio: 1;
}

.bpwp-image-frame--frame-4-3 img {
	aspect-ratio: 4 / 3;
}

.bpwp-image-frame--frame-3-4 img {
	aspect-ratio: 3 / 4;
}

.bpwp-image-frame--frame-4-5 img {
	aspect-ratio: 4 / 5;
}

.bpwp-image-frame--frame-16-9 img {
	aspect-ratio: 16 / 9;
}

.bpwp-image-frame--frame-fill {
	position: relative;
	height: 100%;
	min-height: calc(var(--wp--preset--spacing--80) * 3);
}

.bpwp-image-frame--frame-fill img {
	position: absolute;
	inset: 0;
	height: 100%;
	aspect-ratio: auto;
}

/* Map area (component map-frame, AD-73): the map region of a find-us section as an explicit
   design placeholder — an empty frame on the surface colour with a dashed border and a centred
   location mark (a CSS mask, never a map image). No map, no request; the site owner replaces
   the block with their own map. fill takes the height of its row (rows only, validated). */
.bpwp-map-frame {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	aspect-ratio: 4 / 3;
	background-color: var(--wp--preset--color--surface);
	border: 1px dashed var(--wp--preset--color--border);
}

.bpwp-map-frame::before {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: var(--wp--preset--spacing--60);
	height: var(--wp--preset--spacing--60);
	background-color: var(--wp--preset--color--muted);
	-webkit-mask: var(--bpwp-map-mark) center / contain no-repeat;
	mask: var(--bpwp-map-mark) center / contain no-repeat;
}

.bpwp-map-frame { --bpwp-map-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6.5-6.1-6.5-11a6.5 6.5 0 0 1 13 0c0 4.9-6.5 11-6.5 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E"); }

.bpwp-map-frame--shape-rounded {
	border-radius: var(--wp--custom--radius--medium);
}

.bpwp-map-frame--shape-arch {
	border-radius: var(--wp--custom--radius--pill) var(--wp--custom--radius--pill) 0 0;
}

.bpwp-composition--mobile-row > .bpwp-composition__regions > .bpwp-composition__region:has(> .bpwp-map-frame--frame-fill) {
	align-self: stretch;
}

.bpwp-map-frame--frame-1-1 {
	aspect-ratio: 1;
}

.bpwp-map-frame--frame-4-3 {
	aspect-ratio: 4 / 3;
}

.bpwp-map-frame--frame-3-4 {
	aspect-ratio: 3 / 4;
}

.bpwp-map-frame--frame-16-9 {
	aspect-ratio: 16 / 9;
}

.bpwp-map-frame--frame-fill {
	height: 100%;
	min-height: calc(var(--wp--preset--spacing--80) * 3);
	aspect-ratio: auto;
}

/* TABLET (--tablet-up): enhancement of the mobile base. */
@media (min-width: 48em) {
	/* Responsive focal point (AD-80): the tablet override, else the default. */
	.bpwp-focal-responsive img {
		object-position: var(--bpwp-focal-tablet, var(--bpwp-focal-default, var(--bpwp-focal-x, 50%) var(--bpwp-focal-y, 50%))) !important;
	}

	/* Per-state text: the tablet variant replaces the mobile one. */
	.bpwp-text-variant.bpwp-in-mobile {
		display: none;
	}

	.bpwp-text-variant.bpwp-in-tablet {
		display: inline;
	}

	/* State rules: the tablet state shows what only mobile hides, and hides its own. */
	.bpwp-hide-mobile {
		display: revert !important;
	}

	:where(.bpwp-ctas, .bpwp-keywords).bpwp-hide-mobile {
		display: flex !important;
	}

	:where(.bpwp-feature-list__items).bpwp-hide-mobile {
		display: grid !important;
	}

	.bpwp-composition__regions > .bpwp-composition__region:has(> *):not(:has(> :not(.bpwp-hide-mobile))) {
		display: flex !important;
	}

	.bpwp-hide-tablet {
		display: none !important;
	}

	.bpwp-composition__regions > .bpwp-composition__region:has(> *):not(:has(> :not(.bpwp-hide-tablet))) {
		display: none !important;
	}

	/* A group ordered only in a smaller state returns to normal flow: its own display and the
	   margins of its fields (zero specificity: every component rule wins). */
	:where(.bpwp-ordered-mobile:not(.bpwp-ordered-tablet)) {
		display: revert;
	}

	:where(.bpwp-ordered-mobile:not(.bpwp-ordered-tablet)) > * {
		box-sizing: revert;
		width: revert;
		margin-block: revert;
	}

	:where(.bpwp-ordered-tablet) {
		display: flex;
		flex-direction: column;
	}

	:where(.bpwp-ordered-tablet) > * {
		box-sizing: border-box;
		width: 100%;
		margin-block-end: 0;
	}

	:where(.bpwp-ordered-tablet > .bpwp-ctas) {
		margin-block-start: var(--wp--preset--font-size--base);
	}

	:where(.bpwp-ordered-tablet > h1) { margin-block-end: max(0rem, calc(0.67em - var(--wp--preset--font-size--base))); }
	:where(.bpwp-ordered-tablet > h2) { margin-block-end: max(0rem, calc(0.83em - var(--wp--preset--font-size--base))); }
	:where(.bpwp-ordered-tablet > h3) { margin-block-end: 0; }

	/* Order rules: the tablet position replaces the mobile one. */
	.bpwp-tablet-order-1 { order: 1; }
	.bpwp-tablet-order-2 { order: 2; }
	.bpwp-tablet-order-3 { order: 3; }
	.bpwp-tablet-order-4 { order: 4; }
	.bpwp-tablet-order-5 { order: 5; }
	.bpwp-tablet-order-6 { order: 6; }

	:root {
		--wp--custom--header-height: var(--wp--custom--header-height--tablet);
	}

	/* Calls to action side by side when they fit. */
	.bpwp-ctas > .wp-block-button {
		flex-basis: auto;
	}

	/* Text beside the image: two columns inside wideSize (hero split-image, text-media
	   default and image-left). Visual order only; the DOM keeps the text first. */
	.bpwp-hero--split-image:has(> .bpwp-hero__media),
	.bpwp-text-media--default:has(> .bpwp-text-media__media),
	.bpwp-text-media--image-left:has(> .bpwp-text-media__media) {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, calc(var(--wp--style--global--wide-size) / 2)));
		justify-content: center;
		align-items: center;
		column-gap: var(--wp--preset--spacing--60);
	}

	.bpwp-hero--split-image:has(> .bpwp-hero__media) > *,
	.bpwp-text-media--default:has(> .bpwp-text-media__media) > *,
	.bpwp-text-media--image-left:has(> .bpwp-text-media__media) > * {
		max-width: none;
		margin: 0;
	}

	.bpwp-hero--split-image.bpwp-hero--image-position-start > .bpwp-hero__media,
	.bpwp-text-media--image-left > .bpwp-text-media__media {
		order: -1;
	}

	.bpwp-hero--tablet-align-center .bpwp-hero__content,
	.bpwp-cta-band--tablet-align-center .bpwp-cta-band__content {
		text-align: center;
	}

	.bpwp-hero--tablet-align-center .bpwp-ctas,
	.bpwp-hero--tablet-align-center .bpwp-keywords,
	.bpwp-cta-band--tablet-align-center .bpwp-ctas {
		justify-content: center;
	}

	.bpwp-hero--tablet-align-start .bpwp-hero__content,
	.bpwp-cta-band--tablet-align-start .bpwp-cta-band__content {
		text-align: start;
	}

	.bpwp-hero--tablet-align-start .bpwp-ctas,
	.bpwp-hero--tablet-align-start .bpwp-keywords,
	.bpwp-cta-band--tablet-align-start .bpwp-ctas {
		justify-content: flex-start;
	}

	/* Hero side-fade (AD-79): the same composition as on mobile, without the image zone. The
	   image covers the whole full-bleed band; the text takes one half of wideSize over it (side
	   per imagePosition), centred in the band, and stands on the scrim, which covers the text
	   half and fades into the image beyond it (mirrored for right-to-left). */
	.bpwp-hero.bpwp-hero--side-fade {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-content: center;
		column-gap: var(--wp--preset--spacing--60);
		padding-block: var(--wp--preset--spacing--60);
		padding-inline: max(var(--wp--style--root--padding-left), calc((100% - var(--wp--style--global--wide-size)) / 2));
	}

	.bpwp-hero.bpwp-hero--side-fade::before {
		content: none;
	}

	.bpwp-hero--side-fade > .bpwp-hero__content {
		grid-column: 1;
		padding-inline: 0;
	}

	.bpwp-hero--side-fade > .bpwp-hero__content::before {
		content: none;
	}

	.bpwp-hero--side-fade.bpwp-hero--image-position-start > .bpwp-hero__content {
		grid-column: 2;
	}

	.bpwp-hero--side-fade > .bpwp-hero__media::after,
	html[dir="rtl"] .bpwp-hero--side-fade.bpwp-hero--image-position-start > .bpwp-hero__media::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(to right, var(--bpwp-hero-scrim) calc(50% - var(--wp--preset--spacing--60) / 2), transparent 75%);
	}

	.bpwp-hero--side-fade.bpwp-hero--image-position-start > .bpwp-hero__media::after,
	html[dir="rtl"] .bpwp-hero--side-fade > .bpwp-hero__media::after {
		background: linear-gradient(to left, var(--bpwp-hero-scrim) calc(50% - var(--wp--preset--spacing--60) / 2), transparent 75%);
	}

	/* Editor only (an empty slot is never rendered): the empty slot takes the image half beside
	   the text column, so the placeholder's controls are not covered by the text. */
	.bpwp-hero--side-fade > .bpwp-hero__media:not(:has(img)) {
		position: absolute;
		inset-block: 0;
		inset-inline: 50% 0;
		z-index: -1;
		margin: 0;
	}

	.bpwp-hero--side-fade.bpwp-hero--image-position-start > .bpwp-hero__media:not(:has(img)) {
		inset-inline: 0 50%;
	}

	/* CTA band image-fade: full bleed again; the text takes one half of wideSize, the
	   decorative image the other half of the section and fades into the section color towards
	   the text. The text column never overlaps the image. */
	.bpwp-cta-band.bpwp-cta-band--image-fade {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-content: center;
		column-gap: var(--wp--preset--spacing--60);
		padding-block: var(--wp--preset--spacing--60);
		padding-inline: max(var(--wp--style--root--padding-left), calc((100% - var(--wp--style--global--wide-size)) / 2));
		border-radius: 0;
	}

	/* Inside the root padding the percentage resolves against the padded content box, not the
	   full-bleed band: the root padding is added back, so the text starts at the wideSize edge. */
	.has-global-padding > .bpwp-hero.bpwp-hero--side-fade,
	.has-global-padding > .bpwp-cta-band.bpwp-cta-band--image-fade {
		padding-inline: max(var(--wp--style--root--padding-left), calc((100% + var(--wp--style--root--padding-left) + var(--wp--style--root--padding-right) - var(--wp--style--global--wide-size)) / 2));
	}

	.has-global-padding > .bpwp-cta-band.bpwp-cta-band--image-fade.bpwp-cta-band--inset-true,
	.bpwp-cta-band.bpwp-cta-band--image-fade.bpwp-cta-band--inset-true {
		padding-inline: var(--wp--preset--spacing--50);
		border-radius: var(--wp--custom--radius--large);
	}

	.bpwp-cta-band.bpwp-cta-band--image-fade:not(:has(> .bpwp-cta-band__media)) {
		padding-block-start: var(--wp--preset--spacing--60);
	}

	.bpwp-cta-band--image-fade > .bpwp-cta-band__content {
		grid-column: 1;
		padding-inline: 0;
	}

	.bpwp-cta-band--image-fade.bpwp-cta-band--image-position-start > .bpwp-cta-band__content {
		grid-column: 2;
	}

	.bpwp-cta-band--image-fade > .bpwp-cta-band__media {
		position: absolute;
		inset-block: 0;
		inset-inline: 50% 0;
		z-index: -1;
		width: auto;
		margin: 0;
	}

	.bpwp-cta-band--image-fade.bpwp-cta-band--image-position-start > .bpwp-cta-band__media {
		inset-inline: 0 50%;
	}

	.bpwp-cta-band--image-fade > .bpwp-cta-band__media img {
		height: 100%;
		aspect-ratio: auto;
	}

	.bpwp-cta-band--image-fade > .bpwp-cta-band__media::after,
	html[dir="rtl"] .bpwp-cta-band--image-fade.bpwp-cta-band--image-position-start > .bpwp-cta-band__media::after {
		background: linear-gradient(to right, var(--bpwp-fade-color), transparent 40%);
	}

	.bpwp-cta-band--image-fade.bpwp-cta-band--image-position-start > .bpwp-cta-band__media::after,
	html[dir="rtl"] .bpwp-cta-band--image-fade > .bpwp-cta-band__media::after {
		background: linear-gradient(to left, var(--bpwp-fade-color), transparent 40%);
	}

	/* CTA band image-overlay (AD-80): the same composition as on mobile, without the image zone.
	   The image covers the whole band; the text takes one half of wideSize over it (side per
	   imagePosition), centred in the band, and stands on the scrim, which covers the text half
	   and fades into the image beyond it (mirrored for right-to-left). */
	.bpwp-cta-band.bpwp-cta-band--image-overlay {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-content: center;
		column-gap: var(--wp--preset--spacing--60);
		padding-block: var(--wp--preset--spacing--60);
		padding-inline: max(var(--wp--style--root--padding-left), calc((100% - var(--wp--style--global--wide-size)) / 2));
	}

	.has-global-padding > .bpwp-cta-band.bpwp-cta-band--image-overlay {
		padding-inline: max(var(--wp--style--root--padding-left), calc((100% + var(--wp--style--root--padding-left) + var(--wp--style--root--padding-right) - var(--wp--style--global--wide-size)) / 2));
	}

	.has-global-padding > .bpwp-cta-band.bpwp-cta-band--image-overlay.bpwp-cta-band--inset-true,
	.bpwp-cta-band.bpwp-cta-band--image-overlay.bpwp-cta-band--inset-true {
		padding-inline: var(--wp--preset--spacing--50);
	}

	.bpwp-cta-band.bpwp-cta-band--image-overlay::before {
		content: none;
	}

	.bpwp-cta-band--image-overlay > .bpwp-cta-band__content,
	.bpwp-cta-band--image-overlay.bpwp-cta-band--inset-true > .bpwp-cta-band__content {
		grid-column: 1;
		padding-inline: 0;
	}

	.bpwp-cta-band--image-overlay > .bpwp-cta-band__content::before {
		content: none;
	}

	.bpwp-cta-band--image-overlay.bpwp-cta-band--image-position-start > .bpwp-cta-band__content {
		grid-column: 2;
	}

	.bpwp-cta-band--image-overlay > .bpwp-cta-band__media::after,
	html[dir="rtl"] .bpwp-cta-band--image-overlay.bpwp-cta-band--image-position-start > .bpwp-cta-band__media::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(to right, var(--bpwp-band-scrim) calc(50% - var(--wp--preset--spacing--60) / 2), transparent 75%);
	}

	.bpwp-cta-band--image-overlay.bpwp-cta-band--image-position-start > .bpwp-cta-band__media::after,
	html[dir="rtl"] .bpwp-cta-band--image-overlay > .bpwp-cta-band__media::after {
		background: linear-gradient(to left, var(--bpwp-band-scrim) calc(50% - var(--wp--preset--spacing--60) / 2), transparent 75%);
	}

	/* Editor only (an empty slot is never rendered): the empty slot of an image-fade or
	   image-overlay band takes the image half beside the text column, so the placeholder's
	   controls are not covered by the text (AD-85). */
	.bpwp-cta-band--image-fade > .bpwp-cta-band__media:not(:has(img)),
	.bpwp-cta-band--image-overlay > .bpwp-cta-band__media:not(:has(img)) {
		position: absolute;
		inset-block: 0;
		inset-inline: 50% 0;
		z-index: -1;
		margin: 0;
	}

	.bpwp-cta-band--image-fade.bpwp-cta-band--image-position-start > .bpwp-cta-band__media:not(:has(img)),
	.bpwp-cta-band--image-overlay.bpwp-cta-band--image-position-start > .bpwp-cta-band__media:not(:has(img)) {
		inset-inline: 0 50%;
	}

	/* Feature list: two columns (or the tablet override). */
	.bpwp-feature-list__items {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.bpwp-feature-list--tablet-columns-3 .bpwp-feature-list__items {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.bpwp-feature-list--tablet-columns-4 .bpwp-feature-list__items {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.bpwp-feature-list > .bpwp-ctas > .wp-block-button {
		flex-basis: auto;
	}

	/* Footer: parts side by side where they fit; copyright and footer menu on one line. */
	.bpwp-footer__main {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: flex-start;
		justify-content: space-between;
		column-gap: var(--wp--preset--spacing--50);
	}

	.bpwp-footer__bottom {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		text-align: start;
	}

	/* Composition and image frames: the tablet state of the layout. */
	.bpwp-composition--tablet-stack > .bpwp-composition__regions {
		display: flex;
		flex-direction: column;
	}

	.bpwp-composition--tablet-row > .bpwp-composition__regions {
		display: grid;
		column-gap: var(--wp--preset--spacing--60);
	}

	.bpwp-composition--tablet-tracks-1-1 > .bpwp-composition__regions {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.bpwp-composition--tablet-tracks-1-2 > .bpwp-composition__regions {
		grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	}

	.bpwp-composition--tablet-tracks-2-1 > .bpwp-composition__regions {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	}

	.bpwp-composition--tablet-tracks-2-3 > .bpwp-composition__regions {
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	}

	.bpwp-composition--tablet-tracks-3-2 > .bpwp-composition__regions {
		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	}

	.bpwp-composition--tablet-tracks-1-3 > .bpwp-composition__regions {
		grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
	}

	.bpwp-composition--tablet-tracks-3-1 > .bpwp-composition__regions {
		grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
	}

	.bpwp-composition--tablet-tracks-1-1-1 > .bpwp-composition__regions {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
	}

	.bpwp-composition--tablet-align-start > .bpwp-composition__regions {
		align-items: start;
	}

	.bpwp-composition--tablet-align-center > .bpwp-composition__regions {
		align-items: center;
	}

	.bpwp-composition--tablet-align-end > .bpwp-composition__regions {
		align-items: end;
	}

	.bpwp-composition--tablet-align-stretch > .bpwp-composition__regions {
		align-items: stretch;
	}

	.bpwp-composition:not(.bpwp-composition--tablet-reverse) > .bpwp-composition__regions > :first-child {
		order: 0;
	}

	.bpwp-composition--tablet-reverse > .bpwp-composition__regions > :first-child {
		order: 1;
	}

	.bpwp-composition--tablet-row > .bpwp-composition__regions > .bpwp-composition__region:has(> .bpwp-image-frame--tablet-frame-fill) {
		align-self: stretch;
	}

	.bpwp-image-frame--tablet-frame-1-1,
	.bpwp-image-frame--tablet-frame-4-3,
	.bpwp-image-frame--tablet-frame-3-4,
	.bpwp-image-frame--tablet-frame-4-5,
	.bpwp-image-frame--tablet-frame-16-9,
	.bpwp-image-frame--tablet-frame-native {
		position: static;
		height: auto;
		min-height: 0;
	}

	.bpwp-image-frame--tablet-frame-1-1 img,
	.bpwp-image-frame--tablet-frame-4-3 img,
	.bpwp-image-frame--tablet-frame-3-4 img,
	.bpwp-image-frame--tablet-frame-4-5 img,
	.bpwp-image-frame--tablet-frame-16-9 img,
	.bpwp-image-frame--tablet-frame-native img {
		position: static;
		height: auto;
	}

	.bpwp-image-frame--tablet-frame-native img {
		aspect-ratio: auto;
	}

	.bpwp-image-frame--tablet-frame-1-1 img {
		aspect-ratio: 1;
	}

	.bpwp-image-frame--tablet-frame-4-3 img {
		aspect-ratio: 4 / 3;
	}

	.bpwp-image-frame--tablet-frame-3-4 img {
		aspect-ratio: 3 / 4;
	}

	.bpwp-image-frame--tablet-frame-4-5 img {
		aspect-ratio: 4 / 5;
	}

	.bpwp-image-frame--tablet-frame-16-9 img {
		aspect-ratio: 16 / 9;
	}

	.bpwp-image-frame--tablet-frame-fill {
		position: relative;
		height: 100%;
		min-height: calc(var(--wp--preset--spacing--80) * 3);
	}

	.bpwp-image-frame--tablet-frame-fill img {
		position: absolute;
		inset: 0;
		height: 100%;
		aspect-ratio: auto;
	}

	.bpwp-composition--tablet-row > .bpwp-composition__regions > .bpwp-composition__region:has(> .bpwp-map-frame--tablet-frame-fill) {
		align-self: stretch;
	}

	.bpwp-map-frame--tablet-frame-1-1,
	.bpwp-map-frame--tablet-frame-4-3,
	.bpwp-map-frame--tablet-frame-3-4,
	.bpwp-map-frame--tablet-frame-16-9 {
		height: auto;
		min-height: 0;
	}

	.bpwp-map-frame--tablet-frame-1-1 {
		aspect-ratio: 1;
	}

	.bpwp-map-frame--tablet-frame-4-3 {
		aspect-ratio: 4 / 3;
	}

	.bpwp-map-frame--tablet-frame-3-4 {
		aspect-ratio: 3 / 4;
	}

	.bpwp-map-frame--tablet-frame-16-9 {
		aspect-ratio: 16 / 9;
	}

	.bpwp-map-frame--tablet-frame-fill {
		height: 100%;
		min-height: calc(var(--wp--preset--spacing--80) * 3);
		aspect-ratio: auto;
	}
}

/* DESKTOP (--desktop-up): enhancement of tablet. */
@media (min-width: 64em) {
	/* Responsive focal point (AD-80): desktop renders the default (no override exists for it). */
	.bpwp-focal-responsive img {
		object-position: var(--bpwp-focal-default, var(--bpwp-focal-x, 50%) var(--bpwp-focal-y, 50%)) !important;
	}

	/* Per-state text: the desktop variant replaces the tablet one. */
	.bpwp-text-variant.bpwp-in-tablet {
		display: none;
	}

	.bpwp-text-variant.bpwp-in-desktop {
		display: inline;
	}

	/* State rules: the desktop state shows what only tablet hides, and hides its own. */
	.bpwp-hide-tablet {
		display: revert !important;
	}

	:where(.bpwp-ctas, .bpwp-keywords).bpwp-hide-tablet {
		display: flex !important;
	}

	:where(.bpwp-feature-list__items).bpwp-hide-tablet {
		display: grid !important;
	}

	.bpwp-composition__regions > .bpwp-composition__region:has(> *):not(:has(> :not(.bpwp-hide-tablet))) {
		display: flex !important;
	}

	.bpwp-hide-desktop {
		display: none !important;
	}

	.bpwp-composition__regions > .bpwp-composition__region:has(> *):not(:has(> :not(.bpwp-hide-desktop))) {
		display: none !important;
	}

	/* A group ordered only in a smaller state returns to normal flow: its own display and the
	   margins of its fields (zero specificity: every component rule wins). */
	:where(.bpwp-ordered-mobile:not(.bpwp-ordered-desktop), .bpwp-ordered-tablet:not(.bpwp-ordered-desktop)) {
		display: revert;
	}

	:where(.bpwp-ordered-mobile:not(.bpwp-ordered-desktop), .bpwp-ordered-tablet:not(.bpwp-ordered-desktop)) > * {
		box-sizing: revert;
		width: revert;
		margin-block: revert;
	}

	:where(.bpwp-ordered-desktop) {
		display: flex;
		flex-direction: column;
	}

	:where(.bpwp-ordered-desktop) > * {
		box-sizing: border-box;
		width: 100%;
		margin-block-end: 0;
	}

	:where(.bpwp-ordered-desktop > .bpwp-ctas) {
		margin-block-start: var(--wp--preset--font-size--base);
	}

	:where(.bpwp-ordered-desktop > h1) { margin-block-end: max(0rem, calc(0.67em - var(--wp--preset--font-size--base))); }
	:where(.bpwp-ordered-desktop > h2) { margin-block-end: max(0rem, calc(0.83em - var(--wp--preset--font-size--base))); }
	:where(.bpwp-ordered-desktop > h3) { margin-block-end: 0; }

	/* Order rules: the desktop position replaces the tablet one. */
	.bpwp-desktop-order-1 { order: 1; }
	.bpwp-desktop-order-2 { order: 2; }
	.bpwp-desktop-order-3 { order: 3; }
	.bpwp-desktop-order-4 { order: 4; }
	.bpwp-desktop-order-5 { order: 5; }
	.bpwp-desktop-order-6 { order: 6; }

	:root {
		--wp--custom--header-height: var(--wp--custom--header-height--desktop);
	}

	.bpwp-header__brand {
		font-size: var(--wp--preset--font-size--large);
	}

	/* Header variant `centered` (header.md → Variants; desktop only): the brand at the start,
	   the navigation links centred in the space between the brand and the call to action, the
	   call to action at the end. The navigation takes the rest of the bar; equal free space
	   before the first link and after the last one centres the links — the space after them
	   belongs to the call to action when the menu has one. Nothing moves in the document: the
	   focus order is the order of the menu. Mobile and tablet render the standard header.
	   The list separates its items by a column gap, so the call to action already stands one gap
	   after the last link: the same gap is put before the first link, and the bar puts none of
	   its own between the brand and the navigation, or the links would sit off centre. In the Site
	   Editor a header part edited on its own carries the variant on the bar itself (AD-84). */
	.bpwp-header--centered .bpwp-header__bar,
	.bpwp-header__bar.bpwp-header--centered {
		column-gap: 0;
	}

	.bpwp-header--centered .bpwp-nav:not(.bpwp-nav--list),
	.bpwp-header--centered .bpwp-nav.is-enhanced:not(.bpwp-nav--list),
	.bpwp-header--centered .bpwp-header__bar > .wp-block-bpwp-navigation,
	.bpwp-header__bar.bpwp-header--centered > .wp-block-bpwp-navigation {
		flex: 1 1 auto;
	}

	.bpwp-header--centered .bpwp-nav:not(.bpwp-nav--list) > .bpwp-nav__list:has(> .bpwp-nav__item--cta) {
		padding-inline-start: var(--wp--preset--spacing--30);
	}

	.bpwp-header--centered .bpwp-nav:not(.bpwp-nav--list) > .bpwp-nav__list > .bpwp-nav__item:first-child {
		margin-inline-start: auto;
	}

	.bpwp-header--centered .bpwp-nav:not(.bpwp-nav--list) > .bpwp-nav__list > .bpwp-nav__item:last-child:not(.bpwp-nav__item--cta) {
		margin-inline-end: auto;
	}

	.bpwp-header--centered .bpwp-nav:not(.bpwp-nav--list) > .bpwp-nav__list > .bpwp-nav__item--cta:not(:first-child) {
		margin-inline-start: auto;
	}

	.bpwp-hero .bpwp-hero__heading {
		font-size: var(--wp--preset--font-size--display);
	}

	.bpwp-hero,
	.bpwp-text-media,
	.bpwp-cta-band,
	.bpwp-feature-list {
		padding-block: var(--wp--preset--spacing--70);
	}

	.wp-block-post-content > [data-bpwp-state] {
		padding-block: var(--wp--preset--spacing--70);
	}

	/* Side-fade heroes and full-bleed image-fade bands take the desktop rhythm too (their tablet
	   rules are more specific than the section rule above); an inset band keeps its own spacing. */
	.bpwp-hero.bpwp-hero--side-fade,
	.bpwp-cta-band.bpwp-cta-band--image-fade:not(.bpwp-cta-band--inset-true),
	.bpwp-cta-band.bpwp-cta-band--image-overlay:not(.bpwp-cta-band--inset-true) {
		padding-block: var(--wp--preset--spacing--70);
	}

	.bpwp-cta-band.bpwp-cta-band--image-fade:not(.bpwp-cta-band--inset-true):not(:has(> .bpwp-cta-band__media)) {
		padding-block-start: var(--wp--preset--spacing--70);
	}

	.wp-block-post-content > .bpwp-cta-band.bpwp-cta-band--inset-true:last-child {
		margin-block-end: var(--wp--preset--spacing--70);
	}

	.bpwp-hero--height-medium {
		min-height: calc(var(--wp--preset--spacing--80) * 4);
	}

	.bpwp-hero--height-large {
		min-height: calc(var(--wp--preset--spacing--80) * 6);
	}

	.bpwp-hero--height-medium,
	.bpwp-hero--height-large {
		display: grid;
		align-content: center;
	}

	/* Hero default, align start: the text panel starts at the wideSize edge. */
	.bpwp-hero--default.bpwp-hero--align-start:not(.bpwp-hero--desktop-align-center) > .bpwp-hero__content,
	.bpwp-hero--default.bpwp-hero--desktop-align-start > .bpwp-hero__content {
		margin-inline: max(0rem, calc((100% - var(--wp--style--global--wide-size)) / 2)) auto;
	}

	/* CTA band, align start: text at the start, calls to action at the end. */
	.bpwp-cta-band--align-start:not(.bpwp-cta-band--desktop-align-center) .bpwp-cta-band__content,
	.bpwp-cta-band--desktop-align-start .bpwp-cta-band__content {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-auto-flow: dense;
		column-gap: var(--wp--preset--spacing--60);
		max-width: var(--wp--style--global--wide-size);
	}

	.bpwp-cta-band--align-start:not(.bpwp-cta-band--desktop-align-center) .bpwp-cta-band__content > *,
	.bpwp-cta-band--desktop-align-start .bpwp-cta-band__content > * {
		grid-column: 1;
	}

	/* The grid items keep one start edge: the constrained layout of the content group centres
	   its children with auto margins (!important), which would centre a short line such as the
	   eyebrow above a start-aligned heading. */
	.bpwp-cta-band--align-start:not(.bpwp-cta-band--desktop-align-center) .bpwp-cta-band__content.is-layout-constrained > *,
	.bpwp-cta-band--desktop-align-start .bpwp-cta-band__content.is-layout-constrained > * {
		margin-inline-start: 0 !important;
		margin-inline-end: auto !important;
	}

	.bpwp-cta-band--align-start:not(.bpwp-cta-band--desktop-align-center) .bpwp-cta-band__content > .bpwp-ctas,
	.bpwp-cta-band--desktop-align-start .bpwp-cta-band__content > .bpwp-ctas {
		grid-column: 2;
		grid-row: 1 / span 4;
		align-self: center;
	}

	/* An order rule inside this grid changes the order only: the grid places its fields with their
	   own margins, as it does without a rule (zero specificity, after the column rules). */
	:where(.bpwp-cta-band--align-start:not(.bpwp-cta-band--desktop-align-center):not(.bpwp-cta-band--image-fade):not(.bpwp-cta-band--image-overlay) .bpwp-cta-band__content.bpwp-ordered-desktop, .bpwp-cta-band--desktop-align-start:not(.bpwp-cta-band--image-fade):not(.bpwp-cta-band--image-overlay) .bpwp-cta-band__content.bpwp-ordered-desktop) > * {
		box-sizing: revert;
		width: revert;
		margin-block: revert;
	}

	.bpwp-hero--desktop-align-center .bpwp-hero__content,
	.bpwp-cta-band--desktop-align-center .bpwp-cta-band__content {
		text-align: center;
	}

	.bpwp-hero--desktop-align-center .bpwp-ctas,
	.bpwp-hero--desktop-align-center .bpwp-keywords,
	.bpwp-cta-band--desktop-align-center .bpwp-ctas {
		justify-content: center;
	}

	.bpwp-hero--desktop-align-start .bpwp-hero__content,
	.bpwp-cta-band--desktop-align-start .bpwp-cta-band__content {
		text-align: start;
	}

	.bpwp-hero--desktop-align-start .bpwp-ctas,
	.bpwp-hero--desktop-align-start .bpwp-keywords,
	.bpwp-cta-band--desktop-align-start .bpwp-ctas {
		justify-content: flex-start;
	}

	/* CTA band image-fade and image-overlay: text and calls to action stacked in the text column. */
	.bpwp-cta-band.bpwp-cta-band--image-fade .bpwp-cta-band__content,
	.bpwp-cta-band.bpwp-cta-band--image-overlay .bpwp-cta-band__content {
		display: block;
		max-width: none;
	}

	/* With an order rule the stacked text column keeps its explicit field order. */
	.bpwp-cta-band.bpwp-cta-band--image-fade .bpwp-cta-band__content.bpwp-ordered-desktop,
	.bpwp-cta-band.bpwp-cta-band--image-overlay .bpwp-cta-band__content.bpwp-ordered-desktop {
		display: flex;
	}

	/* Feature list: as many columns as the columns input; a desktop override wins. */
	.bpwp-feature-list--columns-2 .bpwp-feature-list__items {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.bpwp-feature-list--columns-3 .bpwp-feature-list__items {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.bpwp-feature-list--columns-4 .bpwp-feature-list__items {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.bpwp-feature-list--desktop-columns-2 .bpwp-feature-list__items {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.bpwp-feature-list--desktop-columns-3 .bpwp-feature-list__items {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.bpwp-feature-list--desktop-columns-4 .bpwp-feature-list__items {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.bpwp-footer__inner {
		padding-block: var(--wp--preset--spacing--60);
	}

	.bpwp-composition {
		padding-block: var(--wp--preset--spacing--70);
	}

	/* Composition and image frames: the desktop state of the layout. */
	.bpwp-composition--desktop-stack > .bpwp-composition__regions {
		display: flex;
		flex-direction: column;
	}

	.bpwp-composition--desktop-row > .bpwp-composition__regions {
		display: grid;
		column-gap: var(--wp--preset--spacing--60);
	}

	.bpwp-composition--desktop-tracks-1-1 > .bpwp-composition__regions {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.bpwp-composition--desktop-tracks-1-2 > .bpwp-composition__regions {
		grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	}

	.bpwp-composition--desktop-tracks-2-1 > .bpwp-composition__regions {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	}

	.bpwp-composition--desktop-tracks-2-3 > .bpwp-composition__regions {
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	}

	.bpwp-composition--desktop-tracks-3-2 > .bpwp-composition__regions {
		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	}

	.bpwp-composition--desktop-tracks-1-3 > .bpwp-composition__regions {
		grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
	}

	.bpwp-composition--desktop-tracks-3-1 > .bpwp-composition__regions {
		grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
	}

	.bpwp-composition--desktop-tracks-1-1-1 > .bpwp-composition__regions {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
	}

	.bpwp-composition--desktop-align-start > .bpwp-composition__regions {
		align-items: start;
	}

	.bpwp-composition--desktop-align-center > .bpwp-composition__regions {
		align-items: center;
	}

	.bpwp-composition--desktop-align-end > .bpwp-composition__regions {
		align-items: end;
	}

	.bpwp-composition--desktop-align-stretch > .bpwp-composition__regions {
		align-items: stretch;
	}

	.bpwp-composition:not(.bpwp-composition--desktop-reverse) > .bpwp-composition__regions > :first-child {
		order: 0;
	}

	/* As specific as the tablet reset (.bpwp-composition:not(--tablet-reverse) …, 0,4,0), which
	   also applies here: a composition reversed on desktop only must still reverse (I-4). */
	.bpwp-composition.bpwp-composition--desktop-reverse > .bpwp-composition__regions > :first-child {
		order: 1;
	}

	.bpwp-composition--desktop-row > .bpwp-composition__regions > .bpwp-composition__region:has(> .bpwp-image-frame--desktop-frame-fill) {
		align-self: stretch;
	}

	.bpwp-image-frame--desktop-frame-1-1,
	.bpwp-image-frame--desktop-frame-4-3,
	.bpwp-image-frame--desktop-frame-3-4,
	.bpwp-image-frame--desktop-frame-4-5,
	.bpwp-image-frame--desktop-frame-16-9,
	.bpwp-image-frame--desktop-frame-native {
		position: static;
		height: auto;
		min-height: 0;
	}

	.bpwp-image-frame--desktop-frame-1-1 img,
	.bpwp-image-frame--desktop-frame-4-3 img,
	.bpwp-image-frame--desktop-frame-3-4 img,
	.bpwp-image-frame--desktop-frame-4-5 img,
	.bpwp-image-frame--desktop-frame-16-9 img,
	.bpwp-image-frame--desktop-frame-native img {
		position: static;
		height: auto;
	}

	.bpwp-image-frame--desktop-frame-native img {
		aspect-ratio: auto;
	}

	.bpwp-image-frame--desktop-frame-1-1 img {
		aspect-ratio: 1;
	}

	.bpwp-image-frame--desktop-frame-4-3 img {
		aspect-ratio: 4 / 3;
	}

	.bpwp-image-frame--desktop-frame-3-4 img {
		aspect-ratio: 3 / 4;
	}

	.bpwp-image-frame--desktop-frame-4-5 img {
		aspect-ratio: 4 / 5;
	}

	.bpwp-image-frame--desktop-frame-16-9 img {
		aspect-ratio: 16 / 9;
	}

	.bpwp-image-frame--desktop-frame-fill {
		position: relative;
		height: 100%;
		min-height: calc(var(--wp--preset--spacing--80) * 3);
	}

	.bpwp-image-frame--desktop-frame-fill img {
		position: absolute;
		inset: 0;
		height: 100%;
		aspect-ratio: auto;
	}

	.bpwp-composition--desktop-row > .bpwp-composition__regions > .bpwp-composition__region:has(> .bpwp-map-frame--desktop-frame-fill) {
		align-self: stretch;
	}

	.bpwp-map-frame--desktop-frame-1-1,
	.bpwp-map-frame--desktop-frame-4-3,
	.bpwp-map-frame--desktop-frame-3-4,
	.bpwp-map-frame--desktop-frame-16-9 {
		height: auto;
		min-height: 0;
	}

	.bpwp-map-frame--desktop-frame-1-1 {
		aspect-ratio: 1;
	}

	.bpwp-map-frame--desktop-frame-4-3 {
		aspect-ratio: 4 / 3;
	}

	.bpwp-map-frame--desktop-frame-3-4 {
		aspect-ratio: 3 / 4;
	}

	.bpwp-map-frame--desktop-frame-16-9 {
		aspect-ratio: 16 / 9;
	}

	.bpwp-map-frame--desktop-frame-fill {
		height: 100%;
		min-height: calc(var(--wp--preset--spacing--80) * 3);
		aspect-ratio: auto;
	}
}