/**
 * Portfolio Details component.
 *
 * Layout contract
 * ---------------
 * .zanod-pd is exactly one viewport: 100vw × 100dvh (100vh fallback), minus
 * the WordPress admin bar when it is present. It is a two-cell grid: the
 * carousel and the information rail. Both cells are min-width/min-height 0
 * and overflow hidden, so nothing inside can grow the component. Only
 * .zanod-pd__scroll (inside the information rail) may scroll.
 *
 * Presentation is driven by custom properties on .zanod-pd; the Elementor
 * widget writes those variables from its controls.
 */

.zanod-pd {
	/* Layout */
	--zpd-left: 66.66%;              /* desktop carousel width */
	--zpd-stack-carousel: 45%;       /* carousel height when rails are stacked */
	--zpd-pad: clamp(24px, 3.3vw, 72px);
	--zpd-admin-bar: var(--wp-admin--admin-bar-height, 0px);

	/* Images */
	--zpd-fit: cover;
	--zpd-pos: center center;
	--zpd-carousel-bg: #1c1c1c;

	/* Information rail */
	--zpd-info-bg: #ffffff;
	--zpd-info-color: #111111;
	--zpd-divider: #e4e4e4;
	--zpd-divider-w: 1px;
	--zpd-logo-w: clamp(90px, 7vw, 150px);

	/* Carousel controls */
	--zpd-arrow-color: #ffffff;
	--zpd-arrow-size: 28px;
	--zpd-bullet: rgba(255, 255, 255, 0.5);
	--zpd-bullet-active: #ffffff;
	--zpd-bullet-size: 8px;
	--zpd-bullet-gap: 8px;
	--zpd-controls-offset: 22px;

	position: relative;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: minmax(0, var(--zpd-left)) minmax(0, 1fr);
	grid-template-rows: minmax(0, 1fr);
	width: 100vw;
	max-width: 100vw;
	height: calc(100vh - var(--zpd-admin-bar));
	margin: 0 0 0 calc(50% - 50vw); /* break out of any centred parent */
	padding: 0;
	overflow: hidden;
	background: var(--zpd-info-bg);
	color: var(--zpd-info-color);
	isolation: isolate;
}

@supports (height: 100dvh) {
	.zanod-pd {
		height: calc(100dvh - var(--zpd-admin-bar));
	}
}

.zanod-pd *,
.zanod-pd *::before,
.zanod-pd *::after {
	box-sizing: border-box;
}

/* The plugin's single-project document: pin the component to the viewport
   so nothing the theme or Elementor wraps around it can add height. */
html.zanod-portfolio-single-html {
	height: 100%;
	overflow: hidden;
}

body.zanod-portfolio-single {
	margin: 0;
	padding: 0;
	height: 100%;
	overflow: hidden;
	overscroll-behavior: none;
}

body.zanod-portfolio-single .zanod-pd {
	position: fixed;
	top: var(--zpd-admin-bar);
	left: 0;
	margin: 0;
	z-index: 100;
}

/* ---------------------------------------------------------------------- */
/* Views: one project page holds the stage selection and every stage       */
/* ---------------------------------------------------------------------- */

.zanod-pd-project {
	position: relative;
}

/* .zanod-pd sets display: grid, which would beat the hidden attribute. */
.zanod-pd-project > .zanod-pd[hidden] {
	display: none !important;
}

/* Switching views: the new view fades in over the previous one, which is
   taken out of the flow (it already is on the project page, where every
   view is fixed to the viewport) and removed once the fade has finished. */
.zanod-pd-project > .zanod-pd.is-leaving {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	pointer-events: none;
}

body.zanod-portfolio-single .zanod-pd-project > .zanod-pd.is-leaving {
	position: fixed;
	top: var(--zpd-admin-bar);
	z-index: 99;
}

.zanod-pd-project > .zanod-pd.is-entering {
	z-index: 101;
	animation: zanod-pd-view-in 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes zanod-pd-view-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* Elementor's widget wrapper must not add spacing around the component. */
.elementor-widget-zanod-portfolio-details,
.elementor-widget-zanod-portfolio-details > .elementor-widget-container {
	margin: 0;
	padding: 0;
}

/* ---------------------------------------------------------------------- */
/* Carousel rail                                                           */
/* ---------------------------------------------------------------------- */

.zanod-pd__carousel {
	position: relative;
	min-width: 0;
	min-height: 0;
	overflow: hidden;
	background: var(--zpd-carousel-bg);
}

/* Minimal Swiper structure. Deliberately self-contained so the component
   does not depend on which Swiper stylesheet (if any) the site loads. */
.zanod-pd__swiper {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	list-style: none;
	touch-action: pan-y;
}

.zanod-pd__swiper .swiper-wrapper {
	position: relative;
	z-index: 1;
	display: flex;
	width: 100%;
	height: 100%;
	box-sizing: content-box;
	transition-property: transform;
}

.zanod-pd__slide {
	position: relative;
	flex-shrink: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

/* Higher specificity than Elementor's `.elementor img { height: auto }`. */
.zanod-pd .zanod-pd__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: var(--zpd-fit);
	object-position: var(--zpd-pos);
	user-select: none;
	-webkit-user-drag: none;
}

/* Arrows */

.zanod-pd__arrow {
	position: absolute;
	top: 50%;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--zpd-arrow-color);
	cursor: pointer;
	opacity: 0.8;
	transform: translateY(-50%);
	transition: opacity 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
}

.zanod-pd__arrow--prev { left: 10px; }
.zanod-pd__arrow--next { right: 10px; }

.zanod-pd__arrow svg {
	width: var(--zpd-arrow-size);
	height: var(--zpd-arrow-size);
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.45));
}

.zanod-pd__arrow:hover,
.zanod-pd__arrow:focus-visible {
	opacity: 1;
	background: transparent;
}

.zanod-pd__arrow:focus-visible {
	outline: 1px solid currentColor;
	outline-offset: -6px;
}

.zanod-pd__arrow[disabled],
.zanod-pd__arrow.swiper-button-disabled {
	opacity: 0.3;
	cursor: default;
}

.zanod-pd--arrows-bottom .zanod-pd__arrow {
	top: auto;
	bottom: calc(var(--zpd-controls-offset) - 12px);
	transform: none;
}

.zanod-pd--arrows-bottom .zanod-pd__arrow--prev {
	left: auto;
	right: 58px;
}

.zanod-pd--arrows-bottom .zanod-pd__arrow--next {
	right: 10px;
}

/* Pagination: small squares */

.zanod-pd__pagination {
	position: absolute;
	right: 0;
	bottom: var(--zpd-controls-offset);
	left: 0;
	z-index: 3;
	display: flex;
	justify-content: center;
	gap: var(--zpd-bullet-gap);
	pointer-events: none;
}

.zanod-pd__pagination:empty {
	display: none;
}

.zanod-pd__bullet {
	display: block;
	width: var(--zpd-bullet-size);
	height: var(--zpd-bullet-size);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: var(--zpd-bullet);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
	cursor: pointer;
	pointer-events: auto;
	transition: background-color 0.25s ease;
	-webkit-appearance: none;
	appearance: none;
}

.zanod-pd__bullet.is-active {
	background: var(--zpd-bullet-active);
}

.zanod-pd__bullet:focus-visible {
	outline: 1px solid var(--zpd-bullet-active);
	outline-offset: 2px;
}

/* Back to the stage selection (top-left corner of the images) */

.zanod-pd__back {
	position: absolute;
	top: calc(clamp(20px, 2.6vw, 48px) - 10px);
	left: calc(var(--zpd-pad) - 10px);
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	color: var(--zpd-arrow-color);
	text-decoration: none;
	opacity: 0.8;
	transition: opacity 0.2s ease;
}

.zanod-pd__back svg {
	width: var(--zpd-arrow-size);
	height: var(--zpd-arrow-size);
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.45));
	transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.zanod-pd__back:hover,
.zanod-pd__back:focus-visible {
	color: var(--zpd-arrow-color);
	opacity: 1;
}

.zanod-pd__back:hover svg {
	transform: translateX(-3px);
}

.zanod-pd__back:focus-visible {
	outline: 1px solid currentColor;
	outline-offset: -6px;
}

/* With the logo over the images too, the logo moves aside for the arrow. */
.zanod-pd--logo-top-left .zanod-pd__logo-wrap--overlay {
	left: calc(var(--zpd-pad) + 48px);
}

/* Logo over the images (top-left variant) */

.zanod-pd__logo-wrap--overlay {
	position: absolute;
	top: clamp(20px, 2.6vw, 48px);
	left: var(--zpd-pad);
	z-index: 4;
}

.zanod-pd__logo-wrap--overlay .zanod-pd__logo-img {
	filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.35));
}

.zanod-pd__logo-wrap--overlay .zanod-pd__logo--text {
	color: #fff;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

/* ---------------------------------------------------------------------- */
/* Information rail                                                        */
/* ---------------------------------------------------------------------- */

.zanod-pd__info {
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 0;
	overflow: hidden;
	background: var(--zpd-info-bg);
	color: var(--zpd-info-color);
}

/* The only scrolling region in the component. */
.zanod-pd__scroll {
	flex: 1 1 auto;
	min-height: 0;
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	scrollbar-width: thin;
}

/* Fills the scroll viewport so the meta footer can sit at the bottom when
   the description is short, and simply follows the content when it is long. */
.zanod-pd__inner {
	display: flex;
	flex-direction: column;
	min-height: 100%;
}

.zanod-pd__content {
	flex: 0 0 auto;
	padding: var(--zpd-pad) var(--zpd-pad) calc(var(--zpd-pad) * 0.5);
}

.zanod-pd__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	margin: 0 0 clamp(20px, 2.2vw, 44px);
}

.zanod-pd__title {
	margin: 0;
	padding: 0;
	font-size: clamp(18px, 1.2vw, 26px);
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: inherit;
	overflow-wrap: anywhere;
}

.zanod-pd__logo-wrap {
	flex: 0 0 auto;
}

.zanod-pd__logo {
	display: block;
	width: var(--zpd-logo-w);
	color: inherit;
	text-decoration: none;
	line-height: 1;
}

.zanod-pd .zanod-pd__logo-img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}

.zanod-pd__logo--text {
	width: auto;
	max-width: var(--zpd-logo-w);
	font-size: clamp(16px, 1.2vw, 24px);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Description (rich text from the project) */

.zanod-pd__description {
	font-size: clamp(15px, 0.92vw, 18px);
	line-height: 1.6;
	text-align: justify;
	overflow-wrap: break-word;
}

.zanod-pd__description > :first-child { margin-top: 0; }
.zanod-pd__description > :last-child { margin-bottom: 0; }

.zanod-pd__description p {
	margin: 0 0 1.1em;
}

.zanod-pd__description h2,
.zanod-pd__description h3,
.zanod-pd__description h4 {
	margin: 1.6em 0 0.6em;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.zanod-pd__description h2 { font-size: 1.2em; }
.zanod-pd__description h3 { font-size: 1.05em; }
.zanod-pd__description h4 { font-size: 1em; }

.zanod-pd__description ul,
.zanod-pd__description ol {
	margin: 0 0 1.1em;
	padding-left: 1.4em;
}

.zanod-pd__description blockquote {
	margin: 1.2em 0;
	padding-left: 1em;
	border-left: 2px solid var(--zpd-divider);
}

.zanod-pd__description a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* Images inserted into the description */

.zanod-pd .zanod-pd__description img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 1.4em 0;
}

.zanod-pd__description figure,
.zanod-pd__description .wp-caption {
	max-width: 100%;
	margin: 1.4em 0;
}

.zanod-pd .zanod-pd__description figure img,
.zanod-pd .zanod-pd__description .wp-caption img {
	margin: 0;
}

.zanod-pd__description figcaption,
.zanod-pd__description .wp-caption-text {
	margin-top: 0.5em;
	font-size: 0.85em;
	opacity: 0.7;
	text-align: left;
}

.zanod-pd__description .aligncenter {
	margin-left: auto;
	margin-right: auto;
}

.zanod-pd__description .alignleft {
	float: left;
	max-width: 50%;
	margin: 0.3em 1.2em 0.8em 0;
}

.zanod-pd__description .alignright {
	float: right;
	max-width: 50%;
	margin: 0.3em 0 0.8em 1.2em;
}

.zanod-pd__description::after {
	content: "";
	display: table;
	clear: both;
}

/* Location / Completion */

.zanod-pd__meta {
	flex: 0 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
	gap: 16px;
	margin-top: auto;
	padding: calc(var(--zpd-pad) * 0.6) var(--zpd-pad);
	border-top: var(--zpd-divider-w) solid var(--zpd-divider);
	text-align: center;
}

.zanod-pd__meta-item {
	min-width: 0;
}

.zanod-pd__meta-label,
.zanod-pd__meta-value {
	display: block;
	font-size: clamp(15px, 0.92vw, 18px);
	line-height: 1.5;
	overflow-wrap: anywhere;
}

.zanod-pd__meta-label {
	margin-bottom: 0;
}

/* ---------------------------------------------------------------------- */
/* Stacked layout (carousel on top, information below)                     */
/* ---------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.zanod-pd--stack-tablet {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: var(--zpd-stack-carousel) minmax(0, 1fr);
	}
}

@media (max-width: 767px) {
	.zanod-pd--stack-mobile {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: var(--zpd-stack-carousel) minmax(0, 1fr);
	}
}

/* Shared small-screen tuning (applies to whichever breakpoint stacks). */
@media (max-width: 1024px) {
	.zanod-pd--stack-tablet {
		--zpd-pad: clamp(20px, 5vw, 40px);
		--zpd-logo-w: clamp(72px, 14vw, 120px);
		--zpd-controls-offset: 16px;
	}

	.zanod-pd--stack-tablet .zanod-pd__arrow,
	.zanod-pd--stack-tablet .zanod-pd__back {
		width: 40px;
		height: 40px;
	}

	.zanod-pd--stack-tablet .zanod-pd__back {
		top: 8px;
		left: calc(var(--zpd-pad) - 12px);
	}

	.zanod-pd--stack-tablet.zanod-pd--logo-top-left .zanod-pd__logo-wrap--overlay {
		left: calc(var(--zpd-pad) + 36px);
	}

	.zanod-pd--stack-tablet .zanod-pd__arrow svg,
	.zanod-pd--stack-tablet .zanod-pd__back svg {
		width: min(var(--zpd-arrow-size), 22px);
		height: min(var(--zpd-arrow-size), 22px);
	}

	.zanod-pd--stack-tablet .zanod-pd__title {
		font-size: clamp(17px, 4.2vw, 22px);
	}

	.zanod-pd--stack-tablet .zanod-pd__header {
		margin-bottom: clamp(14px, 3vw, 24px);
	}

	.zanod-pd--stack-tablet .zanod-pd__description,
	.zanod-pd--stack-tablet .zanod-pd__meta-label,
	.zanod-pd--stack-tablet .zanod-pd__meta-value {
		font-size: 15px;
	}

	.zanod-pd--stack-tablet .zanod-pd__meta {
		padding: clamp(14px, 3vw, 24px) var(--zpd-pad);
	}
}

@media (max-width: 767px) {
	.zanod-pd--stack-mobile {
		--zpd-pad: clamp(20px, 5vw, 40px);
		--zpd-logo-w: clamp(72px, 14vw, 120px);
		--zpd-controls-offset: 16px;
	}

	.zanod-pd--stack-mobile .zanod-pd__arrow,
	.zanod-pd--stack-mobile .zanod-pd__back {
		width: 40px;
		height: 40px;
	}

	.zanod-pd--stack-mobile .zanod-pd__back {
		top: 8px;
		left: calc(var(--zpd-pad) - 12px);
	}

	.zanod-pd--stack-mobile.zanod-pd--logo-top-left .zanod-pd__logo-wrap--overlay {
		left: calc(var(--zpd-pad) + 36px);
	}

	.zanod-pd--stack-mobile .zanod-pd__arrow svg,
	.zanod-pd--stack-mobile .zanod-pd__back svg {
		width: min(var(--zpd-arrow-size), 22px);
		height: min(var(--zpd-arrow-size), 22px);
	}

	.zanod-pd--stack-mobile .zanod-pd__title {
		font-size: clamp(17px, 4.2vw, 22px);
	}

	.zanod-pd--stack-mobile .zanod-pd__header {
		margin-bottom: clamp(14px, 3vw, 24px);
	}

	.zanod-pd--stack-mobile .zanod-pd__description,
	.zanod-pd--stack-mobile .zanod-pd__meta-label,
	.zanod-pd--stack-mobile .zanod-pd__meta-value {
		font-size: 15px;
	}

	.zanod-pd--stack-mobile .zanod-pd__meta {
		padding: clamp(14px, 3vw, 24px) var(--zpd-pad);
	}
}

/* ---------------------------------------------------------------------- */
/* Stage switcher (top of the information rail)                            */
/* ---------------------------------------------------------------------- */

/* Outside the scrolling region, so it stays in reach however far the
   description is scrolled — on stacked layouts too. Equal columns: labels
   can wrap but never push the rail sideways. */
.zanod-pd__stages {
	flex: 0 0 auto;
	display: grid;
	grid-template-columns: repeat(var(--zpd-stage-count, 3), minmax(0, 1fr));
	border-bottom: var(--zpd-divider-w) solid var(--zpd-divider);
}

.zanod-pd__stage {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	min-height: var(--zpd-stage-h, 56px);
	padding: 10px 8px;
	color: inherit;
	font-size: var(--zpd-stage-size, 12px);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0.1em;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	overflow-wrap: anywhere;
	opacity: 0.45;
	transition: opacity 0.3s ease;
}

.zanod-pd__stage + .zanod-pd__stage {
	border-left: var(--zpd-divider-w) solid var(--zpd-divider);
}

.zanod-pd__stage::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: calc(var(--zpd-divider-w) * -1);
	left: 0;
	height: 2px;
	background: var(--zpd-stage-active, currentColor);
	transform: scaleX(0);
	transition: transform 0.35s ease;
}

a.zanod-pd__stage:hover,
a.zanod-pd__stage:focus-visible,
.zanod-pd__stage.is-active {
	color: inherit;
	opacity: 1;
}

.zanod-pd__stage.is-active::after {
	transform: scaleX(1);
}

.zanod-pd__stage:focus-visible {
	outline: 1px solid currentColor;
	outline-offset: -4px;
}

.zanod-pd__stage.is-empty {
	opacity: 0.2;
	cursor: default;
}

/* The project title leads back to the stage selection. */
.zanod-pd__title-link,
.zanod-pd__title-link:hover,
.zanod-pd__title-link:focus {
	color: inherit;
	text-decoration: none;
}

.zanod-pd__empty {
	margin: 0;
	font-size: clamp(15px, 0.92vw, 18px);
	line-height: 1.6;
	opacity: 0.55;
}

/* ---------------------------------------------------------------------- */
/* 2D drawings — "Vizatimet" (information rail, never in the carousel)     */
/* ---------------------------------------------------------------------- */

/* Directly under the stage text. Location / Completion keeps its own
   margin-top: auto, so it still sits at the bottom of a short rail. */
.zanod-pd__drawings {
	--zpd-drawing-gap: clamp(12px, 1.1vw, 20px);
	--zpd-drawing-min: 170px;

	flex: 0 0 auto;
	padding: calc(var(--zpd-pad) * 0.3) var(--zpd-pad) calc(var(--zpd-pad) * 0.7);
}

.zanod-pd__drawings-heading {
	margin: 0 0 clamp(10px, 0.9vw, 16px);
	padding: 0;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: inherit;
	opacity: 0.6;
}

/* Two columns when each can be at least --zpd-drawing-min wide, otherwise
   one. The track minimum is the larger of that width and half the row, so
   a wide rail never gets a third column; min(100%, …) means a rail
   narrower than the minimum still fits one column without overflowing. */
.zanod-pd__drawings-grid {
	display: grid;
	grid-template-columns: repeat(
		auto-fill,
		minmax(min(100%, max(var(--zpd-drawing-min), calc((100% - var(--zpd-drawing-gap)) / 2))), 1fr)
	);
	gap: var(--zpd-drawing-gap);
	align-items: start;
}

.zanod-pd__drawing {
	min-width: 0;
	margin: 0;
	padding: 0;
}

.zanod-pd__drawing-frame {
	display: block;
	overflow: hidden;
	background: var(--zpd-drawing-bg, transparent);
}

.zanod-pd__drawing-link {
	cursor: zoom-in;
}

.zanod-pd__drawing-link:focus-visible {
	outline: 1px solid currentColor;
	outline-offset: 2px;
}

/* Original proportions (no tile ratio chosen). */
.zanod-pd .zanod-pd__drawing-img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	margin: 0;
}

/* Uniform tiles: the drawing is fitted inside, never cropped or stretched. */
.zanod-pd__drawings--framed .zanod-pd__drawing-frame {
	aspect-ratio: var(--zpd-drawing-ratio, 4 / 3);
}

.zanod-pd .zanod-pd__drawings--framed .zanod-pd__drawing-img {
	height: 100%;
	object-fit: contain;
	object-position: center;
}

.zanod-pd__drawing-caption {
	margin-top: 0.5em;
	font-size: 13px;
	line-height: 1.4;
	text-align: center;
	opacity: 0.65;
	overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------- */
/* Stage selection (overview)                                              */
/* ---------------------------------------------------------------------- */

.zanod-pd--overview {
	--zpd-choice-gap: clamp(12px, 1.4vw, 28px);
	--zpd-choice-grey: 0.9;
	--zpd-choice-dur: 0.6s;
	--zpd-choice-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--zpd-choice-border-w: 2px;
	--zpd-choice-border-inset: 10px;

	display: flex;
	flex-direction: column;
}

.zanod-pd__bar {
	flex: 0 0 auto;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	padding: var(--zpd-pad) var(--zpd-pad) clamp(20px, 2.2vw, 44px);
}

.zanod-pd__choices {
	flex: 1 1 auto;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-template-rows: minmax(0, 1fr);
	gap: var(--zpd-choice-gap);
	min-height: 0;
	padding: 0 var(--zpd-pad) var(--zpd-pad);
}

.zanod-pd__choice {
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 0;
	color: inherit;
	text-decoration: none;
}

a.zanod-pd__choice:hover,
a.zanod-pd__choice:focus {
	color: inherit;
}

.zanod-pd__choice-media {
	position: relative;
	display: block;
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
	background: #f2f2f2;
}

.zanod-pd .zanod-pd__choice-img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: var(--zpd-pos);
	transition: filter var(--zpd-choice-dur) var(--zpd-choice-ease);
}

/* Inner border in the project's own colour, as in the project grid. */
.zanod-pd__choice-media::after {
	content: "";
	position: absolute;
	inset: var(--zpd-choice-border-inset);
	border: var(--zpd-choice-border-w) solid var(--zanod-project-border-color, currentColor);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--zpd-choice-dur) var(--zpd-choice-ease);
}

/* Greyscale at rest only where hover can bring the colour back. */
@media (hover: hover) and (pointer: fine) {
	.zanod-pd__choice .zanod-pd__choice-img {
		filter: grayscale(var(--zpd-choice-grey));
	}

	a.zanod-pd__choice:hover .zanod-pd__choice-img {
		filter: grayscale(0);
	}

	a.zanod-pd__choice:hover .zanod-pd__choice-media::after {
		opacity: 1;
	}
}

a.zanod-pd__choice:focus-visible {
	outline: none;
}

a.zanod-pd__choice:focus-visible .zanod-pd__choice-img {
	filter: grayscale(0);
}

a.zanod-pd__choice:focus-visible .zanod-pd__choice-media::after {
	opacity: 1;
}

.zanod-pd__choice-caption {
	flex: 0 0 auto;
	display: flex;
	align-items: baseline;
	gap: 12px;
	padding-top: clamp(12px, 1.1vw, 20px);
}

.zanod-pd__choice-num {
	font-size: 12px;
	letter-spacing: 0.08em;
	opacity: 0.5;
}

.zanod-pd__choice-label {
	font-size: clamp(15px, 1.05vw, 22px);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}

.zanod-pd__choice.is-empty {
	cursor: default;
}

.zanod-pd__choice.is-empty .zanod-pd__choice-caption {
	opacity: 0.4;
}

.zanod-pd__choice-note {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px;
	font-size: 12px;
	letter-spacing: 0.1em;
	text-align: center;
	text-transform: uppercase;
	opacity: 0.5;
}

.zanod-pd--overview .zanod-pd__meta {
	margin-top: 0;
}

/* Stacked: the three stages become full-width bands that share the height
   (scrolling only if the viewport is too short for all three). */
@media (max-width: 1024px) {
	.zanod-pd--overview.zanod-pd--stack-tablet .zanod-pd__choices {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: none;
		grid-auto-rows: minmax(120px, 1fr);
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
	}

	.zanod-pd--overview.zanod-pd--stack-tablet .zanod-pd__choice-caption {
		padding-top: 10px;
	}
}

@media (max-width: 767px) {
	.zanod-pd--overview.zanod-pd--stack-mobile .zanod-pd__choices {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: none;
		grid-auto-rows: minmax(120px, 1fr);
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
	}

	.zanod-pd--overview.zanod-pd--stack-mobile .zanod-pd__choice-caption {
		padding-top: 10px;
	}
}

@media (max-width: 1024px) {
	.zanod-pd--stack-tablet .zanod-pd__stage {
		min-height: 48px;
		letter-spacing: 0.06em;
	}

	.zanod-pd--stack-tablet .zanod-pd__bar {
		padding-bottom: clamp(14px, 3vw, 24px);
	}
}

@media (max-width: 767px) {
	.zanod-pd--stack-mobile .zanod-pd__stage {
		min-height: 48px;
		letter-spacing: 0.06em;
	}

	.zanod-pd--stack-mobile .zanod-pd__bar {
		padding-bottom: clamp(14px, 3vw, 24px);
	}
}

/* Reduced motion: no autoplay is handled in JS; keep transitions gentle. */
@media (prefers-reduced-motion: reduce) {
	.zanod-pd-project > .zanod-pd.is-entering {
		animation: none;
	}

	.zanod-pd__back svg,
	.zanod-pd__arrow,
	.zanod-pd__bullet,
	.zanod-pd__stage,
	.zanod-pd__stage::after,
	.zanod-pd .zanod-pd__choice-img,
	.zanod-pd__choice-media::after {
		transition: none;
	}
}