/* =========================================================================
   Portfolio — overview, category gallery, lightbox.
   Loaded only on portfolio views (inc/portfolio-front.php).

   Sources (Figma file 7lzi8YxyOgrcziRY6FNWTJ):
     overview desktop  2:79   · overview mobile 766:2813
     gallery desktop   2:265  · gallery mobile  766:2926
     viewer desktop    416:698… · viewer mobile 769:3177 / 797:1817 / 797:1870
   Labels: VERIFIED (read from Figma) · DERIVED (calculated from Figma geometry
   or fitted to Figma text boxes) · PROVISIONAL (not readable yet)
   · ASSUMPTION (no Figma reference, e.g. tablet).
   ========================================================================= */

.cdx-portfolio {
	/* Geometry — desktop (1440 reference) */
	--cdx-pf-pad-top: 70px;              /* VERIFIED: heading block starts 70px under the header */
	--cdx-pf-eyebrow-pad: 7.44px;        /* VERIFIED: text offset inside the 33.78px eyebrow row */
	--cdx-pf-eyebrow-h: 33.78px;         /* VERIFIED */
	--cdx-pf-title-pad: 14.08px;         /* VERIFIED: text offset inside the 90.09px heading row */
	--cdx-pf-title-lh: 76px;             /* VERIFIED: heading text box height */
	--cdx-pf-grid-top: 64.31px;          /* DERIVED: overview cards start 258.18px under the header */
	--cdx-pf-gallery-top: 56.13px;       /* DERIVED: gallery starts 250.18px under the header */

	--cdx-pf-card-w: 400px;              /* VERIFIED */
	--cdx-pf-card-ratio: 400 / 320.95;   /* VERIFIED image box */
	--cdx-pf-card-gap: 59px;             /* VERIFIED: 459 − 400 (columns) and 425 − 366 (rows) */
	--cdx-pf-card-overhang: max(-24.4px, -1.6944vw); /* VERIFIED: 3-column grid is 1318px, 24.4px wider than the 1294px content box */
	--cdx-pf-label-gap: 19.71px;         /* VERIFIED */
	--cdx-pf-label-h: 25.34px;           /* VERIFIED */
	--cdx-pf-label-size: 16.89px;        /* MEASURED: pixel-matched to the client's Figma screenshots; 16.89 × 150% = the verified 25.34px row */
	--cdx-pf-label-ls: 2.871px;          /* MEASURED: 17% */
	--cdx-pf-label-color: #999999;       /* MEASURED: rgb(153,153,153) labels and arrows */
	--cdx-pf-eyebrow-color: rgba(232, 228, 223, 0.35); /* MEASURED: rgb(81,80,78) on black */
	--cdx-pf-eyebrow-ls: 2.6316px;       /* MEASURED: 17% — "PORTFOLIO /" box 122 × 22 */
	--cdx-pf-title-ls: -0.6912px;        /* MEASURED: −1.2% — best pixel match; "Portfolio" box 214 × 76 */

	--cdx-gallery-cols: 3;               /* VERIFIED */
	--cdx-gallery-col3-offset: 12.33px;  /* MEASURED (Figma prototype) */
	--cdx-gallery-gap: 50px;             /* VERIFIED: columns at x 73 / 521 / 969, 398px wide */

	--cdx-pf-hover-t: var(--cdx-hover-t);          /* VERIFIED 0.3s */
	--cdx-pf-ease: var(--cdx-ease-out);            /* VERIFIED ease-out */

	width: 100%;
	max-width: calc(var(--cdx-content-max) + 2 * var(--cdx-gutter));
	margin-inline: auto;
	padding: var(--cdx-pf-pad-top) var(--cdx-gutter) 0;
}

/* Heading block ------------------------------------------------------------ */
.cdx-pf-head { margin: 0; }

.cdx-pf-head__eyebrow {
	box-sizing: border-box;
	height: var(--cdx-pf-eyebrow-h);
	margin: 0;
	padding-top: var(--cdx-pf-eyebrow-pad);
	color: var(--cdx-pf-eyebrow-color);
	font-size: var(--cdx-label-size);     /* 15.48px */
	font-weight: var(--cdx-label-wt);
	line-height: 22px;                    /* VERIFIED text box height */
	letter-spacing: var(--cdx-pf-eyebrow-ls);
	text-transform: uppercase;
	white-space: nowrap;
}

.cdx-pf-head__back {
	color: inherit;
	text-decoration: none;
	transition: color var(--cdx-pf-hover-t) var(--cdx-pf-ease);
}

.cdx-pf-head__back:hover,
.cdx-pf-head__back:focus-visible { color: var(--cdx-color-text-muted); }

.cdx-pf-head__title {
	margin: 0;
	padding-top: var(--cdx-pf-title-pad);
	color: var(--cdx-color-text);
	font-family: var(--cdx-font-display);
	font-size: var(--cdx-display-size);   /* DERIVED: Figma heading widths fit the verified 57.6px heading style */
	font-weight: var(--cdx-display-wt);
	line-height: var(--cdx-pf-title-lh);
	letter-spacing: var(--cdx-display-ls);
}

.cdx-pf-empty { margin: var(--cdx-pf-grid-top) 0 0; color: var(--cdx-pf-label-color); }

/* The overview heading. Category headings keep the verified page-heading
   spacing (+2%), which matched their Figma text boxes. */
.cdx-portfolio--overview .cdx-pf-head__title { letter-spacing: var(--cdx-pf-title-ls); }

/* Category heading (e.g. "Street") — client reference: letters closer
   together; −3.6px (−6.25%) pixel-matched to the supplied screenshot.
   Desktop/tablet only; the mobile heading keeps its Figma value below. */
.cdx-portfolio--category .cdx-pf-head__title { letter-spacing: -3.6px; }

/* Overview: category cards --------------------------------------------------- */
.cdx-pf-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, var(--cdx-pf-card-w)));
	justify-content: start;
	gap: var(--cdx-pf-card-gap);
	margin: var(--cdx-pf-grid-top) var(--cdx-pf-card-overhang) 0 0;
	padding: 0;
	list-style: none;
}

.cdx-pf-card { margin: 0; min-width: 0; }

.cdx-pf-card__link {
	display: block;
	color: var(--cdx-pf-label-color);
	text-decoration: none;
}

.cdx-pf-card__media {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: var(--cdx-pf-card-ratio);
	background: var(--cdx-color-black);
}

.cdx-pf-card__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transform: scale(1);
	transform-origin: 50% 50%;
	transition: transform var(--cdx-pf-hover-t) var(--cdx-pf-ease), opacity var(--cdx-pf-hover-t) var(--cdx-pf-ease);
}

.cdx-pf-card__label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	height: var(--cdx-pf-label-h);
	margin-top: var(--cdx-pf-label-gap);
	font-size: var(--cdx-pf-label-size);
	font-weight: var(--cdx-label-wt);
	line-height: var(--cdx-pf-label-h);
	letter-spacing: var(--cdx-pf-label-ls);
	text-transform: uppercase;
}

.cdx-pf-card__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cdx-pf-card__arrow {
	flex: none;
	display: block;
	width: var(--cdx-pf-arrow, 13px);          /* MEASURED: 12.9 × 12.8 thin-line arrow */
	height: var(--cdx-pf-arrow, 13px);
	margin-right: var(--cdx-pf-arrow-inset, 11.5px); /* MEASURED: ends 11.9px inside the card */
	overflow: visible;
	transition: transform var(--cdx-pf-hover-t) var(--cdx-pf-ease);
}

/* Hover (Smart Animate, 0.3s ease-out, starts as soon as the pointer
   enters, reverses on leave): the photo zooms from its centre inside its
   clipped box and the arrow moves 10px right. One zoom value for every
   category (client request) — change --cdx-pf-card-zoom to adjust all. */
.cdx-pf-card { --cdx-pf-card-zoom: 1.14; }
.cdx-pf-card__link:hover .cdx-pf-card__img,
.cdx-pf-card__link:focus-visible .cdx-pf-card__img { transform: scale(var(--cdx-pf-card-zoom)); }
.cdx-pf-card__link:hover .cdx-pf-card__arrow,
.cdx-pf-card__link:focus-visible .cdx-pf-card__arrow { transform: translateX(10px); }
.cdx-pf-card__link:focus-visible { outline: 2px solid var(--cdx-color-text); outline-offset: 6px; }

/* Optional hover image (Portfolio → Categories → "Hover image"). Not part of
   the Figma design (which zooms the same photo); only used when the client
   sets one: the card then crossfades to it instead of zooming. */
.cdx-pf-card__img--hover {
	position: absolute;
	inset: 0;
	opacity: 0;
}
.cdx-pf-card--has-hover .cdx-pf-card__link:hover .cdx-pf-card__img,
.cdx-pf-card--has-hover .cdx-pf-card__link:focus-visible .cdx-pf-card__img { transform: none; }
.cdx-pf-card--has-hover .cdx-pf-card__link:hover .cdx-pf-card__img--hover,
.cdx-pf-card--has-hover .cdx-pf-card__link:focus-visible .cdx-pf-card__img--hover { opacity: 1; }

/* Category gallery ------------------------------------------------------------
   CSS columns are the no-JavaScript fallback; portfolio.js switches to
   balanced columns (.is-masonry) while keeping the photographs' order.     */
.cdx-portfolio--category .cdx-pf-head + .cdx-gallery { margin-top: var(--cdx-pf-gallery-top); }

.cdx-gallery {
	column-count: var(--cdx-gallery-cols);
	column-gap: var(--cdx-gallery-gap);
}

.cdx-gallery__item {
	position: relative;
	display: block;
	overflow: hidden;
	margin: 0 0 var(--cdx-gallery-gap);
	break-inside: avoid;
	background: var(--cdx-color-black);
	cursor: zoom-in;
}

.cdx-gallery.is-masonry {
	display: flex;
	align-items: flex-start;
	gap: var(--cdx-gallery-gap);
	column-count: auto;
}

.cdx-gallery__col {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: var(--cdx-gallery-gap);
	min-width: 0;
}

.cdx-gallery.is-masonry .cdx-gallery__item { margin: 0; }

.cdx-gallery__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--cdx-ratio, auto);
	object-fit: cover;
	transform: scale(1);
	transform-origin: 50% 50%;
	transition: transform var(--cdx-pf-hover-t) var(--cdx-pf-ease);
}

/* Hover — MEASURED in the Figma prototype: the photo zooms 1.0904× from
   its centre, clipped by the tile; Smart Animate 0.3s ease-out. */
.cdx-gallery__item:hover .cdx-gallery__img,
.cdx-gallery__item:focus-visible .cdx-gallery__img { transform: scale(1.0904); }

/* MEASURED: on desktop the third column starts 12.33px lower than the
   first two in the Figma category frame. */
.cdx-gallery.is-masonry .cdx-gallery__col:nth-child(3) { margin-top: var(--cdx-gallery-col3-offset, 0px); }
.cdx-gallery__item:focus-visible { outline: 2px solid var(--cdx-color-text); outline-offset: 4px; }

/* Page background — MEASURED: the Portfolio frames are pure black (#000),
   not the #1A1A1A used on other pages. (Client: back to black after a short
   charcoal trial.) The photograph popup uses the same value. */
body.cdx-portfolio-view { --cdx-pf-page-bg: #000; background-color: var(--cdx-pf-page-bg); }

/* Space below the footer row — MEASURED: the Figma Portfolio frame below the
   header is 1172px tall, which leaves 47.53px under the 22px footer row
   (other pages keep the footer's own 36px). Desktop only; mobile unchanged. */
@media (min-width: 1024px) {
	body.cdx-portfolio-view .cdx-footer { padding-bottom: 47.53px; }
	/* MEASURED: the Portfolio frame's content column is 1437.18px wide, so its
	   centred 1097px footer row sits at x 170.09 — 1.41px left of centre. */
	body.cdx-portfolio-view .cdx-footer__inner { transform: translateX(-1.41px); }
}

/* Space above the footer — DERIVED from the Figma frames, minus the
   footer's own 40px top padding (main.css):
   overview: footer text 53.4px below the last card → 13.4px;
   gallery:  footer text 65px below the last tile    → 25px.            */
.cdx-portfolio--overview { padding-bottom: 13.4px; }
.cdx-portfolio--category { padding-bottom: 25px; }

/* Page transition between overview and category (VERIFIED: Figma mobile
   prototype uses Dissolve, 0.3s ease-out, from a category card to its
   gallery). Cross-document View Transitions where supported; elsewhere the
   page simply loads.
   Client request: the same fade, slower and smoother (was 0.3s ease-out),
   and on every arrival at a Portfolio or category page (from any page, in
   any browser): the heading, photographs, footer — everything under the
   header — fade in together. The header stays put. That content fade is
   now site-wide and lives in main.css (section "Page fade-in"); only the
   cross-page dissolve between portfolio pages is set here. */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: 0.6s;                        /* = --cdx-page-fade-t in main.css (custom properties don't reach these pseudo-elements) */
	animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}

/* Lightbox ---------------------------------------------------------------------
   Measured in the Figma prototype (desktop 416:698, mobile 769:3177).
   The viewer covers the page under the 80px header (header stays visible)
   on the Portfolio black, and scrolls. Desktop: photo 44px below the header,
   centred, at most 1234px wide (85.694vw); arrows 32px icons centred 45.2px
   from the screen edges, 11.71px below the photo centre; close icon 21px,
   19.2px below the photo top and 17.2px from its right edge; caption under
   the photo; the site footer follows (Figma frame). Mobile: photo 25px from
   each side, 52px below the header; 16px arrows centred 14px from the edges;
   Client updates: every photo is sized by portfolio.js to fit the screen
   (no scrolling); mobile photos are centred on the screen; a short fade
   out/in between photos; "Fit to screen" button top-left of the photo,
   opposite the close button; the About page background behind the viewer.
   portfolio.js sets --cdx-lb-w, --cdx-lb-ratio, --cdx-lb-top and
   --cdx-lb-arrow-y per photo.                                            */
.cdx-lb {
	--cdx-lb-top: 44px;                              /* MEASURED / VERIFIED */
	--cdx-lb-w: min(1234px, 85.694vw);               /* replaced per photo by portfolio.js */
	--cdx-lb-ratio: 1.59962;
	--cdx-lb-arrow-y: calc(var(--cdx-lb-top) + 397.4px);
	--cdx-lb-arrow-box: 48px;
	--cdx-lb-arrow-icon: 32px;                       /* MEASURED: supplied 32px icons at 100% */
	--cdx-lb-arrow-center: 45.2px;                   /* MEASURED: icon centre from the screen edge */
	--cdx-lb-arrow-opacity: 0.3;                     /* MEASURED: icon drawn at 30% */
	--cdx-lb-arrow-hover-opacity: 0.49;              /* MEASURED: hover variant */
	--cdx-lb-arrow-hover-shift: 7.2px;               /* MEASURED: hover moves the arrow outwards */
	--cdx-lb-close-top: 19.2px;                      /* MEASURED */
	--cdx-lb-close-right: 17.2px;                    /* MEASURED */
	--cdx-lb-close-icon: 21px;                       /* MEASURED: supplied icon at 100% */
	--cdx-lb-close-opacity: 0.58;                    /* MEASURED */
	--cdx-lb-swap: 0s;                               /* photos swap while the stage is faded out */
	--cdx-lb-fade-out: 0.18s;                        /* client request: subtle fade between photos (JS FADE_OUT_MS) */
	--cdx-lb-fade-in: 0.28s;

	/* Client request: the same background as the Portfolio pages
	   (--cdx-pf-page-bg = black, set on body.cdx-portfolio-view), under the header. */
	position: fixed;
	top: calc(var(--cdx-header-h) + var(--wp-admin--admin-bar--height, 0px));
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 95; /* under the header (100) and the mobile menu (99) */
	background: var(--cdx-pf-page-bg, #000);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s var(--cdx-ease-out), visibility 0s linear 0.3s; /* Figma Dissolve 0.3s ease-out */
}

.cdx-lb.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.3s var(--cdx-ease-out), visibility 0s;
}

.cdx-lb__scroll {
	position: absolute;
	inset: 0;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.cdx-lb__content {
	display: flex;
	flex-direction: column;
	min-height: 100%;
	padding-top: var(--cdx-lb-top);
}

/* Footer always at the bottom of the screen (or after the photo when it is tall). */
.cdx-lb__content > .cdx-lb__footer { margin-top: auto; }
.cdx-lb__controls { display: none; }               /* shown per breakpoint below */
.cdx-lb__stage { flex: none; }

.cdx-lb__stage {
	width: var(--cdx-lb-w);
	margin: 0 auto;
	transition: opacity var(--cdx-lb-fade-in) var(--cdx-ease-out);
}

/* Changing photo (and entering/leaving Fit to screen): fade out, swap while
   hidden, fade in. */
.cdx-lb.is-swapping .cdx-lb__stage {
	opacity: 0;
	transition-duration: var(--cdx-lb-fade-out);
}

.cdx-lb__frame {
	position: relative;
	width: 100%;
	aspect-ratio: var(--cdx-lb-ratio);                /* the photo's own proportions — no crop, no stretch */
	margin: 0;
}

.cdx-lb__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: contain;
	opacity: 0;
	transition: opacity var(--cdx-lb-swap) var(--cdx-ease-out);
}

.cdx-lb__img.is-current { opacity: 1; }

/* MEASURED: DM Sans ExtraLight 26px, uppercase, cap top 26.9px under the photo. */
.cdx-lb__caption {
	margin: 25.9px 0 0;                              /* client request: 6px lower (was 19.9px); mobile below */
	color: rgba(232, 228, 223, 0.75);                /* MEASURED (±5%) */
	font-size: 19px;                                 /* client request (was 23px); mobile 18px below */
	font-weight: 200;
	line-height: 34px;                               /* unchanged, so spacing and layout stay the same */
	text-transform: uppercase;
	min-height: 34px;
	overflow-wrap: anywhere;
}

/* Desktop/tablet popup controls — client reference (normal view): title at
   the bottom-left, then previous · next · expand · close in one row at the
   bottom-right, level with the title; nothing over the photo. portfolio.js
   moves the four buttons into .cdx-lb__controls and sets the row position
   (--cdx-lb-bar-y / --cdx-lb-bar-right = the photo's right edge) and the
   title's right padding (--cdx-lb-ctrl-w) so the two never meet.
   Expanded view: the same row at the bottom, right-aligned to the photo.
   Subtle grey: the supplied light icons at 50% (brighter on hover/focus). */
@media (min-width: 768px) {
	.cdx-lb__caption { padding-right: var(--cdx-lb-ctrl-w, 0px); }
	.cdx-lb__controls {
		position: absolute;
		top: var(--cdx-lb-bar-y, 0px);
		right: calc(var(--cdx-lb-bar-right, 0px) - 12px); /* icon edge, not the hit box, on the photo edge */
		z-index: 3;
		display: flex;
		align-items: center;
		gap: 4px;
	}
	/* Expanded view (client request): same right-hand alignment as the
	   normal view — the row ends on the photo's right edge — at the bottom. */
	.cdx-lb.is-fit .cdx-lb__controls {
		top: auto;
		bottom: 24px;
		left: auto;
		justify-content: flex-end;
		pointer-events: none;                        /* only the buttons take clicks */
	}
	.cdx-lb.is-fit .cdx-lb__controls .cdx-lb__btn { pointer-events: auto; }
	.cdx-lb__controls .cdx-lb__btn {
		position: relative;
		top: auto;
		right: auto;
		left: auto;
		z-index: auto;
		width: 40px;
		height: 40px;
	}
	.cdx-lb__controls .cdx-lb__btn .cdx-lb__icon {
		opacity: 0.5;
		transform: none;
		transition: opacity var(--cdx-hover-t) var(--cdx-ease-out);
	}
	/* Client request: every icon drawn at the size of the close X (16px box;
	   its drawing fills 20/21 of it = 15.24px). Arrows fill their whole
	   image, the expand drawing reaches its box edge, the restore drawing
	   19/21 of it — so each box is set to give the same 15.24px drawing. */
	.cdx-lb__controls .cdx-lb__btn--prev .cdx-lb__icon,
	.cdx-lb__controls .cdx-lb__btn--next .cdx-lb__icon,
	.cdx-lb__controls .cdx-lb__btn--fit .cdx-lb__icon--expand { width: calc(16px * 20 / 21); height: calc(16px * 20 / 21); }
	.cdx-lb__controls .cdx-lb__btn--fit .cdx-lb__icon--collapse { width: calc(16px * 20 / 19); height: calc(16px * 20 / 19); }
	.cdx-lb__controls .cdx-lb__btn--close .cdx-lb__icon { width: 16px; height: 16px; }
	.cdx-lb__controls .cdx-lb__btn:hover .cdx-lb__icon,
	.cdx-lb__controls .cdx-lb__btn:focus-visible .cdx-lb__icon { opacity: 0.85; transform: none; }
}

.cdx-lb__btn {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: transparent;
	border: 0;
	cursor: pointer;
}

.cdx-lb__btn:focus-visible { outline: 2px solid var(--cdx-color-text); outline-offset: 2px; }
.cdx-lb__icon { display: block; max-width: none; pointer-events: none; }

.cdx-lb__btn--prev,
.cdx-lb__btn--next {
	top: calc(var(--cdx-lb-arrow-y) - var(--cdx-lb-arrow-box) / 2);
	z-index: 2;
	width: var(--cdx-lb-arrow-box);
	height: var(--cdx-lb-arrow-box);
}

.cdx-lb__btn--prev { left: calc(var(--cdx-lb-arrow-center) - var(--cdx-lb-arrow-box) / 2); }
.cdx-lb__btn--next { right: calc(var(--cdx-lb-arrow-center) - var(--cdx-lb-arrow-box) / 2); }

.cdx-lb__btn--prev .cdx-lb__icon,
.cdx-lb__btn--next .cdx-lb__icon {
	width: var(--cdx-lb-arrow-icon);
	height: var(--cdx-lb-arrow-icon);
	opacity: var(--cdx-lb-arrow-opacity);
	transition: opacity var(--cdx-hover-t) var(--cdx-ease-out), transform var(--cdx-hover-t) var(--cdx-ease-out); /* VERIFIED 0.3s ease-out */
}

/* MEASURED hover variant: brighter and 7.2px further out. */
@media (hover: hover) {
	.cdx-lb__btn--prev:hover .cdx-lb__icon { opacity: var(--cdx-lb-arrow-hover-opacity); transform: translateX(calc(-1 * var(--cdx-lb-arrow-hover-shift))); }
	.cdx-lb__btn--next:hover .cdx-lb__icon { opacity: var(--cdx-lb-arrow-hover-opacity); transform: translateX(var(--cdx-lb-arrow-hover-shift)); }
}
.cdx-lb__btn--prev:focus-visible .cdx-lb__icon,
.cdx-lb__btn--next:focus-visible .cdx-lb__icon { opacity: var(--cdx-lb-arrow-hover-opacity); }

/* Close: 44px hit area centred on the icon's measured position. MEASURED: no hover change in Figma. */
.cdx-lb__btn--close {
	top: calc(var(--cdx-lb-close-top) + var(--cdx-lb-close-icon) / 2 - 22px);
	right: calc(var(--cdx-lb-close-right) + var(--cdx-lb-close-icon) / 2 - 22px);
	z-index: 1;
	width: 44px;
	height: 44px;
}

.cdx-lb__btn--close .cdx-lb__icon {
	width: var(--cdx-lb-close-icon);
	height: var(--cdx-lb-close-icon);
	opacity: var(--cdx-lb-close-opacity);
}

/* Fit to screen: the close button mirrored into the top-left corner — same
   height, same distance from the edge, same size and strength. */
.cdx-lb__btn--fit {
	top: calc(var(--cdx-lb-close-top) + var(--cdx-lb-close-icon) / 2 - 22px);
	left: calc(var(--cdx-lb-close-right) + var(--cdx-lb-close-icon) / 2 - 22px);
	z-index: 1;
	width: 44px;
	height: 44px;
	color: #f3f3f3;                                  /* the supplied icons' colour */
}

.cdx-lb__btn--fit .cdx-lb__icon {
	width: var(--cdx-lb-close-icon);
	height: var(--cdx-lb-close-icon);
	opacity: var(--cdx-lb-close-opacity);
	overflow: visible;
}

.cdx-lb__btn--fit .cdx-lb__icon--collapse,
.cdx-lb__btn--fit[aria-pressed="true"] .cdx-lb__icon--expand { display: none; }
.cdx-lb__btn--fit[aria-pressed="true"] .cdx-lb__icon--collapse { display: block; }

/* Fit to screen mode: the viewer covers the header too; title and copyright
   are hidden; the photo gets the whole screen (sized by portfolio.js). */
.cdx-lb.is-fit {
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 101;
}
.cdx-lb.is-fit .cdx-lb__caption,
.cdx-lb.is-fit .cdx-lb__footer { display: none; }
.cdx-lb.is-fit .cdx-lb__scroll { overflow: hidden; }

/* Client request: no copyright or Instagram icon in the popup (desktop and
   mobile). On desktop/tablet the space they took stays reserved (less the
   6px the title moved down), so photo sizes and positions don't change.
   portfolio.js counts this padding when sizing the photo. */
body .cdx-lb .cdx-lb__footer { display: none; }
@media (min-width: 768px) {
	/* Size reserve only (read by portfolio.js; scroll-padding has no effect
	   on layout here): photos keep the size they had with the footer.
	   Client request: photo + title are then centred together, vertically,
	   between the header and the bottom of the screen (portfolio.js). */
	.cdx-lb__content { scroll-padding-bottom: calc(var(--cdx-lb-footer-top, 29.2px) + var(--cdx-footer-row-h, 22px) + var(--cdx-lb-footer-bottom, 41.9px) - 6px); }
}
.cdx-lb.is-fit .cdx-lb__content { scroll-padding-bottom: 0; }

/* Very short screens (phone held sideways): tighter spacing so the photo
   stays a useful size. Set by portfolio.js. */
.cdx-lb.is-compact { --cdx-lb-footer-top: 8px; --cdx-lb-footer-bottom: 10px; }
.cdx-lb.is-compact .cdx-lb__caption { margin-top: 8px; }

.cdx-lb.is-single .cdx-lb__btn--prev,
.cdx-lb.is-single .cdx-lb__btn--next { display: none; }

/* The site footer, repeated at the bottom of the viewer (Figma frame).
   MEASURED: copyright 88.5px under the photo, 41.3px above the frame end. */
body .cdx-lb .cdx-lb__footer { padding-top: var(--cdx-lb-footer-top, 29.2px); padding-bottom: var(--cdx-lb-footer-bottom, 41.9px); }

body.cdx-lb-open { overflow: hidden; }

/* BP: tablet (768–1023) — ASSUMPTION: two columns, fluid gaps. ------------- */
@media (max-width: 1023px) {
	.cdx-portfolio {
		--cdx-pf-card-gap: 40px;
		--cdx-pf-card-overhang: 0px;
		--cdx-gallery-cols: 2;
		--cdx-gallery-gap: 24px;
		--cdx-gallery-col3-offset: 0px;
	}

	.cdx-pf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* BP: mobile (< 768) — VERIFIED Figma mobile geometry (390 reference). ----- */
@media (max-width: 767px) {
	.cdx-portfolio {
		--cdx-pf-pad-top: 38px;                      /* VERIFIED: eyebrow at y 118 under the 80px header */
		--cdx-pf-eyebrow-pad: 0px;
		--cdx-pf-eyebrow-h: 22px;                    /* VERIFIED */
		--cdx-pf-title-pad: 8px;                     /* VERIFIED: heading at y 148 */
		--cdx-pf-title-lh: 64px;                     /* VERIFIED heading box height */
		--cdx-pf-grid-top: 38px;                     /* VERIFIED: cards at y 250 */
		--cdx-pf-gallery-top: 14px;                  /* VERIFIED: gallery at y 226 */

		/* Cards are the desktop card scaled to 340/400 = 0.85 in Figma. */
		--cdx-pf-card-gap: 50.15px;                  /* VERIFIED */
		--cdx-pf-label-gap: 16.75px;                 /* DERIVED: 19.71 × 0.85 */
		--cdx-pf-label-h: 21.54px;                   /* DERIVED: 25.34 × 0.85 */
		--cdx-pf-label-size: 13.5px;                 /* MEASURED: pixel match to the Figma mobile prototype */
		--cdx-pf-label-ls: 2.8px;                    /* MEASURED */
		--cdx-pf-label-color: rgba(232, 228, 223, 0.6);   /* MEASURED (mobile labels are dimmer than desktop) */
		--cdx-pf-eyebrow-color: rgba(232, 228, 223, 0.76); /* MEASURED (mobile eyebrow is brighter than desktop) */
		--cdx-pf-eyebrow-ls: 2.8px;                  /* MEASURED */
		--cdx-pf-arrow: 11.05px;                     /* DERIVED: 13 × 0.85 */
		--cdx-pf-arrow-inset: 9.78px;                /* DERIVED: 11.5 × 0.85 */

		--cdx-gallery-cols: 2;                       /* VERIFIED */
		--cdx-gallery-gap: 8px;                      /* VERIFIED */
	}

	.cdx-pf-head__slash { display: none; }           /* VERIFIED: mobile eyebrow reads "Portfolio" */

	/* DERIVED: mobile footer (Frame 15) sits 80px below the last card and
	   33px below the gallery; the footer adds 40px itself. */
	.cdx-portfolio--overview { padding-bottom: 40px; }
	.cdx-portfolio--category { padding-bottom: 0; }

	/* MEASURED (Figma mobile prototype, pixel match on both pages):
	   DM Sans Light 39px, −1.2px, #E8E4DF at 74%. */
	.cdx-pf-head__title,
	.cdx-portfolio--overview .cdx-pf-head__title,
	.cdx-portfolio--category .cdx-pf-head__title {
		margin-left: -3.6px;                         /* MEASURED: heading text sits 3.6px left of the 25px margin */
		color: rgba(232, 228, 223, 0.74);
		font-size: 39px;
		letter-spacing: -1.2px;
	}

	.cdx-pf-grid { grid-template-columns: minmax(0, 1fr); }

	/* VERIFIED: gallery columns are 176px at x 15 and 199 — 15px side margins,
	   10px wider than the 25px page gutter on each side. */
	.cdx-portfolio--category .cdx-gallery { margin-inline: calc(15px - var(--cdx-gutter)); }

	.cdx-lb {
		--cdx-lb-top: 52px;                          /* VERIFIED: photo at y 132 */
		--cdx-lb-w: calc(100vw - 50px);              /* VERIFIED: 340px at 390, x 25 (set per photo by JS) */
		--cdx-lb-ratio: 1.16371;
		--cdx-lb-arrow-box: 22px;                    /* VERIFIED hit box, 3px from the edge */
		--cdx-lb-arrow-icon: 16px;                   /* MEASURED */
		--cdx-lb-arrow-center: 14px;                 /* VERIFIED */
		--cdx-lb-arrow-opacity: 0.56;                /* MEASURED */
		--cdx-lb-close-top: 10px;                    /* ASSUMPTION: Figma mobile has no close icon; kept so the viewer can be closed */
		--cdx-lb-close-right: 10px;
		--cdx-lb-close-icon: 16px;
	}

	/* MEASURED: DM Sans ExtraLight 21px, cap top 27.8px under the photo;
	   client request: title moved 6px lower (was 21.8px). */
	.cdx-lb__caption { margin-top: 27.8px; font-size: 18px; line-height: 28px; min-height: 28px; } /* client request: 18px (was 21px) */
	/* Client request — mobile popup layout: no side arrows; the photo uses
	   the full screen width by default (portfolio.js) and there is no expand
	   button on mobile (hidden at every mobile size, takes no space); title
	   centred under the photo; previous / close / next in one centred row
	   below, equal 44px touch targets evenly spaced. portfolio.js moves the
	   three buttons into .cdx-lb__controls on mobile.
	   Client request: the row stays put — fixed 24px above the bottom of
	   the screen (plus the iPhone home-indicator area when present), the
	   same for every photo and in Fit to screen; portfolio.js sizes and
	   centres the photo + title in the space above it, so they never overlap. */
	.cdx-lb__caption { text-align: center; }
	.cdx-lb__btn--fit { display: none; }
	.cdx-lb__controls {
		position: absolute;
		right: 0;
		bottom: calc(24px + env(safe-area-inset-bottom, 0px));
		left: 0;
		z-index: 3;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 28px;
		pointer-events: none;                        /* only the buttons take taps */
	}
	.cdx-lb__controls .cdx-lb__btn { pointer-events: auto; }
	.cdx-lb__controls .cdx-lb__btn {
		position: relative;
		top: auto;
		right: auto;
		left: auto;
		z-index: auto;
		width: 44px;
		height: 44px;
	}
}

/* Reduced motion: no zoom on hover, no fades (main.css also shortens all
   transitions site-wide). */
@media (prefers-reduced-motion: reduce) {
	.cdx-pf-card__link:hover .cdx-pf-card__img,
	.cdx-pf-card__link:focus-visible .cdx-pf-card__img,
	.cdx-gallery__item:hover .cdx-gallery__img,
	.cdx-gallery__item:focus-visible .cdx-gallery__img { transform: none; }
	.cdx-pf-card__link:hover .cdx-pf-card__arrow { transform: none; }
	@view-transition { navigation: none; }
}