/**
 * PropOffice Property Gallery — Design #1.
 *
 * Measured from the reference rather than guessed:
 *   featured cell         ~65.5% of the gallery width
 *   supporting column     ~34.5%, two equal cells
 *   column gap            ~16px, row gap ~16px
 *   badge                 inset ~20px from the top and left of the image
 *   Gallery CTA           inset ~20px from the bottom and left
 *   controls              inset ~12px from the bottom and right
 *
 * ## Not one brand value appears below
 *
 * Every colour is a design token the WEBSITE supplies (Elementor globals, or
 * the design-system filter), and the type inherits the site's own face. That is
 * the contract: changing the brand in Elementor changes this gallery without
 * this file being touched. The design-system tokens below name semantic ROLES;
 * their values live in the design-system boundary, never here.
 */

.po-gallery {
	/* Structure the design owns. */
	--po-gallery-gap: 16px;
	--po-gallery-featured: 65.5%;
	--po-gallery-inset: 20px;
	--po-gallery-radius: 0;

	/* Roles the website fills. */
	--po-gallery-ink: var(--po-ds-color-text);
	--po-gallery-primary: var(--po-ds-color-primary);
	--po-gallery-on-primary: var(--po-ds-color-surface);
	--po-gallery-accent: var(--po-ds-color-accent);
	--po-gallery-on-accent: var(--po-ds-color-surface);
	--po-gallery-well: var(--po-ds-color-background);
	--po-gallery-surface: var(--po-ds-color-surface);
	--po-gallery-scrim: rgb(0 0 0 / 62%);
	--po-gallery-on-scrim: var(--po-ds-color-surface);

	box-sizing: border-box;
	display: block;
	width: 100%;
	max-width: 100%;
	font-family: var(--po-ds-font-family);
	color: var(--po-gallery-ink);
	container-type: inline-size;
}

.po-gallery *,
.po-gallery *::before,
.po-gallery *::after {
	box-sizing: border-box;
}

.po-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------------------ stage */

.po-gallery__stage {
	display: grid;
	grid-template-columns: var(--po-gallery-featured) 1fr;
	gap: var(--po-gallery-gap);
	margin-block-start: var(--po-gallery-gap);
}

/*
 * A listing with a single photograph has no supporting column, so the featured
 * cell takes the full width and carries the controls itself.
 */
.po-gallery__stage:not(:has(.po-gallery__supporting)) {
	grid-template-columns: minmax(0, 1fr);
}

.po-gallery__featured,
.po-gallery__cell {
	position: relative;
	overflow: hidden;
	background: var(--po-gallery-well);
	border-radius: var(--po-gallery-radius);
}

/*
 * The featured cell sets the height and the right column follows it, which is
 * what keeps the two supporting cells exactly half of it. An aspect ratio
 * rather than a fixed height, so the composition holds at every width.
 */
.po-gallery__featured {
	aspect-ratio: 1100 / 636;
}

.po-gallery__supporting {
	position: relative;
	display: grid;
	grid-template-rows: 1fr 1fr;
	gap: var(--po-gallery-gap);
	min-height: 0;
}

/*
 * Taken OUT of flow, and that is the whole reason the composition holds.
 *
 * A photograph left in flow contributes its own intrinsic height to the track
 * it sits in. The two supporting cells are `1fr 1fr` in a row the grid sizes
 * automatically, so those intrinsic heights - not the featured cell's aspect
 * ratio - decided how tall the row was, and the right column ended up TALLER
 * than the photograph it was supposed to follow. With 3:2 photographs that
 * left the featured cell about a fifth of its own height short of the bottom
 * of the column beside it, at every width.
 *
 * Absolute means each cell asks its content for nothing. The row is then sized
 * by the only thing left that has a definite height - `.po-gallery__featured`
 * and its aspect ratio - and `1fr 1fr` splits exactly that, which is what makes
 * the two supporting cells half of the featured cell rather than half of
 * whatever the photographs happened to be.
 *
 * The cells carry `position: relative` already, so this anchors to the cell.
 */
.po-gallery__image {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * The whole cell opens the viewer. A transparent button rather than a wrapping
 * anchor: this is an action, not a destination, and a button is what a screen
 * reader and a keyboard both expect.
 *
 * 🚨 SCOPED UNDER `.po-gallery` TO SURVIVE THE HOST THEME, NOT FOR TIDINESS.
 *
 * This button is `inset: 0` over the photograph and painted after it, so
 * whatever colour it carries is what the visitor sees INSTEAD of the image.
 * A single class is not enough to keep it transparent: Elementor's kit emits
 * `.elementor-kit-N button { background: var(--e-global-color-accent) }`,
 * which is one class PLUS an element - (0,1,1) - and beats a lone
 * `.po-gallery__opener` at (0,1,0). Measured on a real site: the entire
 * 1312x759 hero cell was painted the site's accent blue, with the photograph
 * loaded and intact underneath it.
 *
 * Two classes - (0,2,0) - outrank any `class + element` host rule, which is
 * the shape themes and page builders actually ship. Every button background
 * below is scoped for the same reason; the values are unchanged.
 *
 * The grid does not need this because its image is a DESCENDANT of its opener
 * rather than a sibling beneath it, so the same host rule paints a frame round
 * the photograph instead of over it.
 */
/**
 * The invisible click target over each photograph.
 *
 * 🚨 `background: none` was not enough, and the reason generalises: specificity
 * only protects properties this file DECLARES. The earlier hardening won the
 * background contest at two classes, but the same `.elementor-kit-N button` rule
 * also sets `box-shadow`, `opacity` and `border-radius` — and for a property no
 * PropOffice rule mentions there is no contest to win.
 *
 * Measured on the acceptance rig: a 14px blue glow and a 12px rounded corner
 * drawn ON TOP of the hero photograph, by an element whose whole purpose is to
 * be invisible. Same defect class as the original, one layer along.
 */
.po-gallery .po-gallery__opener {
	position: absolute;
	inset: 0;
	padding: 0;
	min-width: auto;
	max-width: none;
	cursor: pointer;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	opacity: 1;
	font: inherit;
	outline-offset: 0;
}

/**
 * The focus ring carries THREE classes, and the third one is load-bearing.
 *
 * The control rules below declare `outline-offset: 0` — they have to, it is one
 * of the properties a host button rule sets — and they sit LATER in this file.
 * At equal specificity source order decides, so a two-class focus rule would
 * have been flattened to `0` by the very reset that protects it, and the inset
 * ring the design draws over a photograph would have moved outside the button.
 *
 * `.po-gallery .po-gallery__cta:focus-visible` is (0,3,0) and outranks both the
 * reset and any host `button:focus` rule.
 */
.po-gallery .po-gallery__opener:focus-visible,
.po-gallery .po-gallery__cta:focus-visible,
.po-gallery .po-gallery__control--button:focus-visible {
	outline: 3px solid var(--po-gallery-accent);
	outline-offset: -3px;
}

/* ----------------------------------------------------------------- states */

.po-gallery__badge {
	position: absolute;
	top: var(--po-gallery-inset);
	left: var(--po-gallery-inset);
	z-index: 2;
	padding: 14px 26px;
	font-size: 17px;
	font-weight: var(--po-ds-font-heading);
	line-height: 1;
	color: var(--po-gallery-on-primary);
	pointer-events: none;
	background: var(--po-gallery-primary);
}

.po-gallery__actions {
	position: absolute;
	bottom: var(--po-gallery-inset);
	left: var(--po-gallery-inset);
	z-index: 2;
	display: flex;
	gap: 8px;
}

/**
 * 🚨 SCOPED, AND EXHAUSTIVELY DECLARED — MEASURED, not reasoned about.
 *
 * This rule used to be a lone `.po-gallery__cta` at (0,1,0). Every structural
 * value it needs was already here — `border: 0`, the radius, the padding, the
 * type — and a host still repainted all of them, because a single class loses
 * to the shape themes actually ship. On the acceptance rig, twentytwentyfive's
 * own scope is enough:
 *
 *     .entry-content button, .wp-site-blocks button { … }
 *
 * — one class plus an element, and no `!important` anywhere. The "Gallery" call
 * to action over the hero photograph took a 6px dashed border, a 40px radius, a
 * red glow, 30px of padding and 35% opacity from it.
 *
 * Two fixes, and BOTH are needed:
 *
 * 1. Two classes — (0,2,0) — so the values this file already declares win.
 * 2. The properties it never declared. Specificity only protects a property
 *    this stylesheet MENTIONS; `box-shadow` and `opacity` had no contest to
 *    win, so the host took them uncontested however the rule was scoped. Same
 *    defect class as the viewer's chrome, `.po-gallery__opener` and the grid's
 *    tiles — fourth instance, one component along.
 *
 * The neutral values are chosen so declaring them changes nothing the design
 * decided: `min-width: auto` and `max-width: none` are the initial values, so
 * pinning them cannot squash a flex item that was sizing to its own label.
 */
.po-gallery .po-gallery__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	min-width: auto;
	max-width: none;
	padding: 0 30px;
	font-family: inherit;
	font-size: 17px;
	font-weight: var(--po-ds-font-button);
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	cursor: pointer;
	border: 0;
	border-radius: var(--po-gallery-radius);
	box-shadow: none;
	opacity: 1;
	outline-offset: 0;
}

.po-gallery .po-gallery__cta--gallery {
	color: var(--po-gallery-on-accent);
	background: var(--po-gallery-accent);
}

/* The reference's secondary treatment: a light chip beside the accent one. */
.po-gallery .po-gallery__cta--video {
	color: var(--po-gallery-accent);
	background: var(--po-gallery-surface);
}

/* --------------------------------------------------------------- controls */

.po-gallery__controls {
	position: absolute;
	right: 12px;
	bottom: 12px;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: flex-end;
}

/**
 * The count / Fullscreen / Grid strip, hardened for the same reason.
 *
 * This rule was already scoped to two classes, so the values below held — but
 * `box-shadow` and `opacity` were not among them, and on the rig the whole
 * strip picked up the host's red glow and faded to 35% over the photograph.
 * Scoping is half the remedy; DECLARING is the other half.
 *
 * `.po-gallery__count` is a span rather than a button and no host `button` rule
 * reaches it, but it shares the strip's treatment and costs nothing to cover.
 */
.po-gallery .po-gallery__control {
	display: inline-flex;
	gap: 6px;
	align-items: center;
	min-height: 30px;
	min-width: auto;
	max-width: none;
	padding: 0 11px;
	font-family: inherit;
	font-size: 14px;
	font-weight: var(--po-ds-font-label);
	line-height: 1;
	color: var(--po-gallery-on-scrim);
	background: var(--po-gallery-scrim);
	border: 0;
	border-radius: 3px;
	box-shadow: none;
	opacity: 1;
	outline-offset: 0;
}

/*
 * Tracking and casing are pinned on the BUTTONS only, never on the shared
 * strip rule above.
 *
 * `.po-gallery__count` is a `<span>`; no host `button` rule can reach it, and
 * it inherits the site's own tracking — twentytwentyfive gives it -0.1px.
 * Declaring `letter-spacing: normal` on the shared rule was measured on the rig
 * to CHANGE that span from -0.1px to normal: hardening that quietly restyles an
 * element which was never at risk is a regression wearing a fix's clothes.
 *
 * The two buttons compute `normal` already, so this costs nothing today and
 * stops an Elementor kit's `text-transform: uppercase` from shouting FULLSCREEN
 * tomorrow.
 */
.po-gallery .po-gallery__control--button {
	cursor: pointer;
	letter-spacing: normal;
	text-transform: none;
}

.po-gallery__count-value {
	font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------- responsive */

/*
 * Breakpoints, and why they are where they are.
 *
 * 900px — the supporting column can no longer hold a legible photograph beside
 * a 65% featured cell, so the composition becomes one column: the featured
 * image, then the two supporting cells side by side beneath it. The reference's
 * relationship is preserved rather than squeezed.
 *
 * 620px — the badge and the calls to action pull in to a 12px inset, because
 * a 20px one takes a visible share of a photograph this narrow.
 *
 * 420px — the CTAs and the badge take their compact sizing so a 320px screen
 * still shows the whole of both buttons.
 */
@container (max-width: 900px) {
	.po-gallery__stage {
		grid-template-columns: minmax(0, 1fr);
	}

	.po-gallery__supporting {
		grid-template-rows: none;
		grid-template-columns: 1fr 1fr;
	}

	.po-gallery__featured {
		aspect-ratio: 16 / 10;
	}

	.po-gallery__cell {
		aspect-ratio: 4 / 3;
	}
}

/*
 * These rules set properties on DESCENDANTS, never on `.po-gallery` itself.
 *
 * A container query styles what is inside the container; an element cannot
 * respond to its own. Declaring `--po-gallery-inset` on `.po-gallery` in here
 * would silently do nothing — so the values are applied where they are read.
 */
@container (max-width: 620px) {
	.po-gallery__badge {
		top: 12px;
		left: 12px;
	}

	.po-gallery__actions {
		bottom: 12px;
		left: 12px;
	}
}

/*
 * 🚨 RAISING A BASE RULE'S SPECIFICITY SILENTLY KILLS EVERY OVERRIDE OF IT.
 *
 * A container query buys no specificity whatsoever, and source order only
 * decides a TIE. So each rule in here has to be scoped to match the rule it
 * overrides — no more and, decisively, NO LESS.
 *
 * `.po-gallery__cta` is scoped because THIS change scoped its base rule to
 * `.po-gallery .po-gallery__cta` (0,2,0). Left at one class it would have lost
 * to its own base, and the compact sizing the breakpoint note above promises —
 * "the CTAs and the badge take their compact sizing" — would have died as a
 * side effect of hardening. Scoping both halves keeps 15px reaching the screen.
 *
 * `.po-gallery__badge` needs nothing: its base rule is still one class.
 *
 * `.po-gallery__control` is deliberately NOT scoped, and it is INERT because of
 * that. Its base rule has been `.po-gallery .po-gallery__control` at (0,2,0)
 * since `dd2921d` — a commit whose message states "No colour, geometry, DOM or
 * JavaScript changed; the values are exactly what they were" — so this 13px has
 * reached nothing since, and the strip renders 14px at every width. Scoping it
 * here WOULD revive it: measured on the rig by swapping only this stylesheet at
 * a 298px gallery, 14px before and 13px after.
 *
 * That revival is a RENDERING CHANGE, and nothing authorises it. No reference,
 * no design contract, no test and no documented behaviour asks for 13px — the
 * breakpoint note above names the CTAs and the badge, not the control strip.
 * Host protection does not need it either: the base rule declares `font-size`
 * at (0,2,0) and already outranks any `class + element` host rule at every
 * width. So the rule stays exactly as it shipped, and reviving it stays a
 * design decision for someone to take on purpose rather than a side effect of
 * hardening — which is precisely how it came to be inert in the first place.
 *
 * `PropertyGalleryControlHardeningTest` pins all three reaches, in both
 * directions.
 */
@container (max-width: 420px) {
	.po-gallery .po-gallery__cta {
		min-height: 42px;
		padding: 0 18px;
		font-size: 15px;
	}

	.po-gallery__badge {
		padding: 9px 16px;
		font-size: 14px;
	}

	.po-gallery__control {
		font-size: 13px;
	}
}

/* Containers only answer when one is established; a viewport fallback covers
   the gallery being placed somewhere that suppresses containment. */
@media (max-width: 900px) {
	.po-gallery__stage {
		grid-template-columns: minmax(0, 1fr);
	}

	.po-gallery__supporting {
		grid-template-rows: none;
		grid-template-columns: 1fr 1fr;
	}
}

/* ------------------------------------------------------- additional modes */

/**
 * The More menu and the Plans / Progress panels (2026-10).
 *
 * Drawn by the shell whichever arrangement runs, and only on a property that
 * has the content. Every colour is still a role the website fills; the panels
 * add two measures of their own — how wide an entry's picture is beside its
 * details, and the panel's inner padding — as custom properties a Style
 * control can reach.
 *
 * Every rule that paints a button carries two classes and declares every
 * property the measured host rule sets, for the reason the controls above do.
 */

.po-gallery {
	--po-gallery-entry-media: 65%;
	--po-gallery-panel-padding: 24px;
	--po-gallery-panel-surface: var(--po-ds-color-surface);
	--po-gallery-panel-ink: var(--po-ds-color-text);
	--po-gallery-panel-muted: var(--po-ds-color-muted);
	--po-gallery-panel-line: var(--po-ds-color-border);
}

.po-gallery__more {
	position: relative;
	display: inline-flex;
}

/* The caret on the More control: a small chevron, drawn in CSS so the button
   needs no artwork and inherits its own colour. */
.po-gallery__more-mark {
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-inline-start: 10px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
}

.po-gallery .po-gallery__cta--more[aria-expanded="true"] .po-gallery__more-mark {
	transform: translateY(2px) rotate(225deg);
}

.po-gallery .po-gallery__cta--more {
	color: var(--po-gallery-accent);
	background: var(--po-gallery-surface);
}

/* The menu opens UPWARD: the control sits over the bottom edge of the
   photograph, so there is room above it and none below. */
.po-gallery__menu {
	position: absolute;
	bottom: calc(100% + 8px);
	left: 0;
	z-index: 4;
	min-width: 180px;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: var(--po-gallery-surface);
	border-radius: var(--po-gallery-radius);
	box-shadow: 0 10px 30px rgb(0 0 0 / 22%);
}

.po-gallery__menu[hidden] {
	display: none;
}

.po-gallery .po-gallery__menu-item {
	display: block;
	width: 100%;
	min-width: auto;
	max-width: none;
	padding: 12px 16px;
	font-family: inherit;
	font-size: 16px;
	font-weight: var(--po-ds-font-button);
	line-height: 1.2;
	letter-spacing: normal;
	text-align: left;
	text-transform: none;
	color: var(--po-gallery-ink);
	cursor: pointer;
	background: transparent;
	border: 0;
	border-radius: 3px;
	box-shadow: none;
	opacity: 1;
	outline-offset: 0;
}

.po-gallery .po-gallery__menu-item:hover,
.po-gallery .po-gallery__menu-item:focus-visible {
	background: var(--po-gallery-well);
	outline: none;
}

/* ------------------------------------------------------------------ panel */

/**
 * The approved presentation (2026-10): the entry's picture fills the panel,
 * edge to edge, and the entry's details sit on a translucent card over its
 * right-hand third — about 65 / 35 — with every control over the picture:
 * the entry tabs top-left and the counter top-right, the mode strip
 * bottom-left, previous and next at the picture's edges, and the gallery's
 * own count / Fullscreen / Grid strip at the picture's bottom-right. The
 * panel's name is a heading for assistive technology only: the active mode
 * in the strip already says which panel this is. The card is the SURFACE role with
 * transparency, not glass: no backdrop filter, no blur; the picture simply
 * shows through.
 *
 * The frame is a one-cell grid. The head, the switch and every entry share
 * the cell, so the panel is exactly as tall as the entry showing, and the
 * head and the switch — which precede the entries in the markup, as the
 * script and the reading order want — lie over it taking no pointer events
 * of their own. Only their controls take the pointer; the card beneath takes
 * everything else. The entries create no stacking context, so an entry's
 * viewer, fixed and layered by the media stylesheet, still covers the
 * overlays when it opens.
 *
 * `--po-gallery-entry-media` is the picture's share of the width (the Style
 * control's "Entry image width"); the card takes the rest, within bounds.
 */

.po-gallery__panel {
	--po-gallery-entry-panel: clamp(280px, calc(100% - var(--po-gallery-entry-media)), 560px);

	position: relative;
	display: grid;
	grid-template-areas: "entry";
	margin-block-start: var(--po-gallery-gap);
	padding: 0;
	color: var(--po-gallery-panel-ink);
	background: var(--po-gallery-well);
	border-radius: var(--po-gallery-radius);
}

.po-gallery__panel[hidden],
.po-gallery__stage[hidden],
.po-gallery__entry[hidden] {
	display: none;
}

.po-gallery__panel-head,
.po-gallery__panel-switch,
.po-gallery__entry {
	grid-area: entry;
	min-width: 0;
}

.po-gallery__panel-head,
.po-gallery__panel-switch {
	position: relative;
	z-index: 3;
	margin: 0;
	border: 0;
	pointer-events: none;
}

.po-gallery__panel-head > *,
.po-gallery__panel-switch > * {
	pointer-events: auto;
}

/* The panel's name: not drawn — the active mode in the strip names the
   panel — but kept as the panel's heading and as the element the script
   moves focus to when a mode is chosen, so it is hidden visually only. */
.po-gallery__panel-title {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* The mode strip: a pill bar, bottom-left over the picture, as the
   reference draws it. */
.po-gallery__panel-modes {
	position: absolute;
	bottom: var(--po-gallery-panel-padding);
	left: var(--po-gallery-panel-padding);
	display: flex;
	gap: 4px;
	max-width: calc(100% - var(--po-gallery-entry-panel) - var(--po-gallery-panel-padding) * 3);
	padding: 6px;
	overflow-x: auto;
	scrollbar-width: none;
	background: var(--po-gallery-surface);
	border: 1px solid var(--po-gallery-panel-line);
	border-radius: 999px;
}

.po-gallery .po-gallery__panel-mode {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	min-height: 40px;
	min-width: auto;
	max-width: none;
	padding: 0 18px;
	font-family: inherit;
	font-size: 15px;
	font-weight: var(--po-ds-font-button);
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	white-space: nowrap;
	color: var(--po-gallery-panel-ink);
	cursor: pointer;
	background: transparent;
	border: 0;
	border-radius: 999px;
	box-shadow: none;
	opacity: 1;
	outline-offset: 0;
}

.po-gallery .po-gallery__panel-mode.is-active {
	color: var(--po-gallery-on-accent);
	background: var(--po-gallery-accent);
}

.po-gallery .po-gallery__panel-mode:focus-visible,
.po-gallery .po-gallery__tab:focus-visible,
.po-gallery .po-gallery__panel-arrow:focus-visible,
.po-gallery .po-gallery__entry-contact:focus-visible {
	outline: 3px solid var(--po-gallery-accent);
	outline-offset: 2px;
}

/* --------------------------------------------------------- entry switch */

/* The entry tabs: pills top-left over the picture, clear of the counter at
   its top-right. Not thumbnails — names. */
.po-gallery__tabs {
	position: absolute;
	top: var(--po-gallery-panel-padding);
	left: var(--po-gallery-panel-padding);
	display: flex;
	gap: 4px;
	max-width: calc(100% - var(--po-gallery-entry-panel) - var(--po-gallery-panel-padding) * 4 - 96px);
	overflow-x: auto;
	scrollbar-width: thin;
}

.po-gallery .po-gallery__tab {
	flex: 0 0 auto;
	min-height: 36px;
	min-width: auto;
	max-width: none;
	padding: 0 14px;
	font-family: inherit;
	font-size: 14px;
	font-weight: var(--po-ds-font-label);
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	white-space: nowrap;
	color: var(--po-gallery-panel-ink);
	cursor: pointer;
	background: var(--po-gallery-surface);
	border: 1px solid var(--po-gallery-panel-line);
	border-radius: 999px;
	box-shadow: none;
	opacity: 1;
	outline-offset: 0;
}

.po-gallery .po-gallery__tab.is-active {
	color: var(--po-gallery-on-accent);
	background: var(--po-gallery-accent);
	border-color: var(--po-gallery-accent);
}

/* Previous, the counter and next are placed one by one over the picture;
   the group that holds them is only markup. */
.po-gallery__panel-nav {
	display: contents;
}

.po-gallery .po-gallery__panel-arrow {
	position: absolute;
	top: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	min-width: auto;
	max-width: none;
	padding: 0;
	font-family: inherit;
	font-size: 28px;
	line-height: 1;
	color: var(--po-gallery-ink);
	cursor: pointer;
	background: var(--po-gallery-surface);
	border: 1px solid var(--po-gallery-panel-line);
	border-radius: 50%;
	box-shadow: 0 2px 10px rgb(0 0 0 / 18%);
	opacity: 1;
	outline-offset: 0;
	transform: translateY(-50%);
}

.po-gallery .po-gallery__panel-arrow--prev {
	left: var(--po-gallery-panel-padding);
}

.po-gallery .po-gallery__panel-arrow--next {
	right: calc(var(--po-gallery-entry-panel) + var(--po-gallery-panel-padding) * 2);
}

.po-gallery .po-gallery__panel-arrow:disabled {
	cursor: default;
	opacity: 0.35;
}

/* The counter: top-right of the picture, opposite the tabs it counts, so the
   bottom-right corner is the count / Fullscreen / Grid strip's alone. */
.po-gallery__panel-count {
	position: absolute;
	top: var(--po-gallery-panel-padding);
	right: calc(var(--po-gallery-entry-panel) + var(--po-gallery-panel-padding) * 2);
	padding: 0 14px;
	font-size: 14px;
	font-weight: var(--po-ds-font-label);
	line-height: 40px;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: var(--po-gallery-panel-ink);
	background: var(--po-gallery-surface);
	border: 1px solid var(--po-gallery-panel-line);
	border-radius: 999px;
}

/* ---------------------------------------------------------------- entry */

/* The entry is 3:2 of the gallery's width (the container), within bounds —
   a height, not an aspect ratio, so a capped height never narrows it. */
.po-gallery__entry {
	position: relative;
	height: min(66.667cqw, 80vh);
	min-height: 420px;
}

/* An entry with no picture is its card alone, in flow. */
.po-gallery__entry:not(:has(.po-gallery__entry-media)) {
	height: auto;
	min-height: 0;
}

.po-gallery__entry:not(:has(.po-gallery__entry-media)) .po-gallery__entry-body {
	position: static;
	width: auto;
}

.po-gallery__entry-media {
	position: absolute;
	inset: 0;
}

/* The picture. A photograph is covered; a floor plan is contained on the
   surface, within the part of the picture the card and the controls leave
   clear — the whole plan stays visible, never cropped and never under the
   card. The padding is the figure's, so the image's box is the clear part. */
.po-gallery__entry-figure {
	position: absolute;
	inset: 0;
	margin: 0;
	overflow: hidden;
	background: var(--po-gallery-well);
}

.po-gallery__entry--plans .po-gallery__entry-figure {
	padding:
		calc(var(--po-gallery-panel-padding) + 48px)
		calc(var(--po-gallery-entry-panel) + var(--po-gallery-panel-padding) * 2)
		calc(var(--po-gallery-panel-padding) + 56px)
		var(--po-gallery-panel-padding);
	background: var(--po-gallery-surface);
}

.po-gallery__entry-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.po-gallery__entry--progress .po-gallery__entry-image {
	object-fit: cover;
}

/* The gallery's own count / Fullscreen / Grid strip, drawn by the same
   chrome the stage uses, placed at the picture's bottom-right beside the
   card. Only its position is the entry's; how it looks is the strip's. Its
   buttons open the entry's own viewer — the nearest media block's. Three
   classes, and the position declared rather than inherited, because the
   Type 2 arrangement re-places the stage's strip with two-class rules
   (`position: static` in flow) that must not reach an entry's. */
.po-gallery .po-gallery__entry .po-gallery__controls {
	position: absolute;
	right: calc(var(--po-gallery-entry-panel) + var(--po-gallery-panel-padding) * 2);
	bottom: var(--po-gallery-panel-padding);
	z-index: 2;
	margin-top: 0;
}

/* The card: the entry's details over the picture's right-hand side. The
   surface role with transparency — never a backdrop filter. Taller content
   scrolls within it — wheel, trackpad, touch and keyboard — without a
   visible scrollbar: the card is chrome over a picture, and a track down its
   edge is noise the design does not want. */
.po-gallery__entry-body {
	position: absolute;
	top: var(--po-gallery-panel-padding);
	right: var(--po-gallery-panel-padding);
	bottom: var(--po-gallery-panel-padding);
	z-index: 2;
	width: var(--po-gallery-entry-panel);
	min-width: 0;
	padding: 24px;
	overflow: auto;
	scrollbar-width: none;
	background: var(--po-gallery-panel-surface);
	background: color-mix(in srgb, var(--po-gallery-panel-surface) 88%, transparent);
	border: 1px solid var(--po-gallery-panel-line);
	border-radius: var(--po-gallery-radius);
}

.po-gallery__entry-body::-webkit-scrollbar {
	display: none;
}

.po-gallery__entry-heading {
	margin: 0 0 8px;
	font-size: 22px;
	font-weight: var(--po-ds-font-heading);
	line-height: 1.2;
	color: inherit;
}

.po-gallery__entry-price {
	margin: 0 0 14px;
	font-size: 24px;
	font-weight: var(--po-ds-font-heading);
	color: var(--po-gallery-accent);
}

.po-gallery__entry-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 14px;
	align-items: center;
	margin-block-end: 8px;
	font-size: 14px;
	color: var(--po-gallery-panel-muted);
}

.po-gallery__entry-status {
	padding: 4px 10px;
	font-size: 12px;
	font-weight: var(--po-ds-font-label);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--po-gallery-on-primary);
	background: var(--po-gallery-primary);
	border-radius: 3px;
}

.po-gallery__entry-milestone {
	font-weight: var(--po-ds-font-label);
	color: var(--po-gallery-ink);
}

.po-gallery__specs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px 16px;
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}

.po-gallery__spec {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	font-size: 15px;
}

.po-gallery__spec-icon {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
}

.po-gallery__spec-value {
	font-weight: var(--po-ds-font-heading);
	font-variant-numeric: tabular-nums;
}

.po-gallery__spec-label {
	color: var(--po-gallery-panel-muted);
}

.po-gallery__entry-text {
	font-size: 16px;
	line-height: 1.6;
}

.po-gallery__entry-text p {
	margin: 0 0 1em;
}

.po-gallery__entry-text p:last-child {
	margin-block-end: 0;
}

.po-gallery__entry-docs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.po-gallery__entry-doc-link {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	padding: 8px 14px;
	font-size: 14px;
	font-weight: var(--po-ds-font-label);
	color: var(--po-gallery-accent);
	text-decoration: none;
	background: var(--po-gallery-well);
	border-radius: 3px;
}

.po-gallery__entry-doc-icon {
	width: 16px;
	height: 16px;
}

/* The contact action: the page's own contact target, drawn as the card's
   call to action. */
.po-gallery__entry-contact {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	margin-block-start: 18px;
	padding: 0 22px;
	font-size: 15px;
	font-weight: var(--po-ds-font-button);
	color: var(--po-gallery-on-accent);
	text-decoration: none;
	background: var(--po-gallery-accent);
	border-radius: var(--po-gallery-radius);
}

.po-gallery__entry-contact:hover {
	color: var(--po-gallery-on-accent);
	text-decoration: none;
	opacity: 0.92;
}

/* ------------------------------------------------------------- progress */

.po-gallery__progress {
	display: flex;
	gap: 12px;
	align-items: center;
	margin: 0 0 14px;
}

.po-gallery__progress-track {
	position: relative;
	flex: 1 1 auto;
	height: 8px;
	overflow: hidden;
	background: var(--po-gallery-well);
	border-radius: 4px;
}

.po-gallery__progress-bar {
	position: absolute;
	inset: 0 auto 0 0;
	display: block;
	background: var(--po-gallery-accent);
	border-radius: 4px;
}

.po-gallery__progress-value {
	font-size: 14px;
	font-weight: var(--po-ds-font-heading);
	font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------- responsive */

/* Narrow: the mode strip, then the entry tabs, sit in flow above the
   picture; the picture is 3:2 of the gallery's width with the card beneath
   it, opaque; previous/next, the counter (bottom-left) and the count /
   Fullscreen / Grid strip (bottom-right) stay over the picture, whose height
   is two thirds of the container's width.
   The switch dissolves (`display: contents`) so its tabs can take a row of
   their own while its arrows keep lying over the picture. */
@container (max-width: 900px) {
	.po-gallery__panel {
		--po-gallery-panel-padding: 12px;

		grid-template-areas: "head" "tabs" "entry";
		row-gap: 10px;
		padding-block-start: var(--po-gallery-panel-padding);
	}

	.po-gallery__panel-head {
		grid-area: head;
		position: static;
		z-index: auto;
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		align-items: center;
		padding: 0 var(--po-gallery-panel-padding);
		pointer-events: auto;
	}

	.po-gallery__panel-modes {
		position: static;
		max-width: 100%;
	}

	.po-gallery__panel-switch {
		display: contents;
	}

	.po-gallery__tabs {
		grid-area: tabs;
		position: static;
		max-width: none;
		padding: 0 var(--po-gallery-panel-padding);
	}

	.po-gallery__panel-nav {
		grid-area: entry;
		position: relative;
		z-index: 3;
		display: block;
		pointer-events: none;
	}

	.po-gallery__panel-nav > * {
		pointer-events: auto;
	}

	.po-gallery__entry {
		height: auto;
		min-height: 0;
	}

	.po-gallery__entry-media {
		position: relative;
		inset: auto;
	}

	.po-gallery__entry-figure {
		position: relative;
		inset: auto;
		aspect-ratio: 3 / 2;
	}

	.po-gallery__entry--plans .po-gallery__entry-figure {
		padding:
			var(--po-gallery-panel-padding)
			var(--po-gallery-panel-padding)
			calc(var(--po-gallery-panel-padding) + 52px);
	}

	.po-gallery__entry-body {
		position: static;
		width: auto;
		padding: 16px;
		background: var(--po-gallery-panel-surface);
		border: 0;
		border-radius: 0;
	}

	.po-gallery .po-gallery__panel-arrow {
		top: 33.333cqw;
		width: 40px;
		height: 40px;
		font-size: 24px;
	}

	.po-gallery .po-gallery__panel-arrow--next {
		right: var(--po-gallery-panel-padding);
	}

	.po-gallery__panel-count {
		top: calc(66.667cqw - var(--po-gallery-panel-padding));
		right: auto;
		left: var(--po-gallery-panel-padding);
		transform: translateY(-100%);
	}

	.po-gallery .po-gallery__entry .po-gallery__controls {
		right: var(--po-gallery-panel-padding);
	}

	.po-gallery__specs {
		grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	}
}

@container (max-width: 620px) {
	.po-gallery__menu {
		left: auto;
		right: 0;
		min-width: 160px;
	}

	.po-gallery .po-gallery__panel-mode {
		min-height: 36px;
		padding: 0 14px;
		font-size: 14px;
	}

	.po-gallery__entry-heading {
		font-size: 20px;
	}
}

/* The same stacking for a browser without container queries. */
@media (max-width: 900px) {
	.po-gallery__entry {
		height: auto;
		min-height: 0;
	}

	.po-gallery__entry-media {
		position: relative;
		inset: auto;
	}

	.po-gallery__entry-figure {
		position: relative;
		inset: auto;
		aspect-ratio: 3 / 2;
	}

	.po-gallery__entry--plans .po-gallery__entry-figure {
		padding:
			var(--po-gallery-panel-padding)
			var(--po-gallery-panel-padding)
			calc(var(--po-gallery-panel-padding) + 52px);
	}

	.po-gallery__entry-body {
		position: static;
		width: auto;
		padding: 16px;
		background: var(--po-gallery-panel-surface);
		border: 0;
		border-radius: 0;
	}

	.po-gallery .po-gallery__entry .po-gallery__controls {
		right: var(--po-gallery-panel-padding);
	}
}