/* ==========================================================================
   MKS Projects — horizontal strip
   Layout and motion modelled on Archicon's Horizontal Portfolio Showcase:
   24 × 42 px paddings, labels in the font for small text (--mks-font-ui, from the theme; project titles in --mks-font-family), clip-path reveal, 1024 px breakpoint.
   Below 1024 px (or without JavaScript on touch) the same steps stack vertically.
   ========================================================================== */

body.qodef-mks-strip-page #qodef-page-inner {
	padding: 0;
}

.qodef-mks-portfolio {
	--mks-gap: 42px;
	--mks-pad-x: 42px;
	--mks-pad-y: 24px;
	/* --mks-offset-bottom: anything the theme keeps fixed under the strip (a footer). */
	--mks-strip-height: calc(100vh - var(--mks-offset-top, 0px) - var(--mks-offset-bottom, 0px));
	--mks-step-height: calc(var(--mks-strip-height) - 2 * var(--mks-pad-y));
	--mks-label-color: #5f5f5f;
	--mks-line-color: #d4d4d4;
	position: relative;
}

/* The steps of the Elementor content take the strip height. */
.qodef-mks-portfolio .qodef-mks-project-content {
	--mks-step-height: inherit;
}

/* Flatten the wrappers: every step becomes a direct item of the track.
   Not in the editor, where Elementor needs its boxes to select and drop. */
.qodef-mks-portfolio .qodef-m-project,
.qodef-mks-portfolio .qodef-mks-project-content:not(.elementor-edit-mode),
.qodef-mks-portfolio .qodef-mks-project-content:not(.elementor-edit-mode) .e-con,
.qodef-mks-portfolio .qodef-mks-project-content:not(.elementor-edit-mode) .e-con-inner,
.qodef-mks-portfolio .qodef-mks-project-content:not(.elementor-edit-mode) .elementor-widget {
	display: contents;
}

/* Category filter (Archicon list filter markup, styled by the theme)
   ========================================================================== */

.qodef-mks-portfolio > .qodef-m-filter {
	box-sizing: border-box;
	font-family: var(--mks-font-ui, var(--mks-font-family, inherit));
	margin: 0;
	padding: var(--mks-pad-y) var(--mks-pad-x) 0;
}

.qodef-mks-portfolio > .qodef-m-filter .qodef-m-filter-item {
	color: inherit;
	text-decoration: none;
}

.qodef-mks-portfolio .qodef-m-track {
	transition: opacity .3s ease;
}

.qodef-mks-portfolio.qodef--loading .qodef-m-track {
	opacity: .3;
	pointer-events: none;
}

.qodef-mks-portfolio.qodef--no-progress .qodef-m-progress {
	display: none !important;
}

.qodef-mks-portfolio .qodef-m-empty {
	color: var(--mks-label-color);
	padding: 0 var(--mks-pad-x);
}

/* Vertical layout (mobile, tablet, editor)
   ========================================================================== */

.qodef-mks-portfolio .qodef-m-track {
	display: flex;
	flex-direction: column;
	gap: 40px;
	padding: 5%;
}

.qodef-mks-portfolio .qodef-m-progress {
	display: none;
}

/* Data panel (Archicon showcase intro)
   ========================================================================== */

.qodef-m-item--data {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	justify-content: flex-end;
	box-sizing: border-box;
	width: clamp(320px, 26vw, 460px);
}

/* Container of the title: a long single word is sized to its width (below). */
.qodef-m-item--data {
	container-type: inline-size;
}

/* --mks-title-word: letters of the longest word (Strip_Renderer::title_style), about half an em each.
   32–42 px, the "phrase" step of the site scale (6/11/2026; was 48–87): the photos lead. */
.qodef-m-item--data .qodef-e-title {
	font-size: min(clamp(32px, 2.9vw, 42px), 190cqi / var(--mks-title-word, 1));
	font-weight: 300;
	line-height: 1.1em;
	margin: 0;
	overflow-wrap: break-word;
}

/* Project data as a small corner of detail, like the title block of a drawing (6/11/2026):
   label and value on one line, 12/13 px (the bottom of the site scale), tight rows. Each
   item stays a box of its own: strip.css animates them one by one. */
.qodef-m-item--data .qodef-e-data {
	display: grid;
	gap: 7px;
	margin: 24px 0 0;
	max-width: 380px;
}

.qodef-m-item--data .qodef-e-data-item {
	align-items: baseline;
	display: grid;
	gap: 16px;
	grid-template-columns: 96px minmax(0, 1fr);
}

/* Explicit values: Archicon styles dt/dd for its own portfolio info. */
.qodef-m-item--data .qodef-e-data-item dt {
	color: var(--mks-label-color);
	font-family: var(--mks-font-ui, var(--mks-font-family, inherit));
	font-size: 12px;
	font-weight: 400;
	letter-spacing: .04em;
	line-height: 1.4;
	text-transform: uppercase;
}

.qodef-m-item--data .qodef-e-data-item dd {
	color: inherit;
	font-family: var(--mks-font-ui, var(--mks-font-family, inherit));
	font-size: 13px;
	line-height: 1.4;
	margin: 0;
	text-transform: none;
}

.qodef-m-item--data .qodef-e-data-item a:hover {
	color: var(--qode-main-color);
}

/* Back to projects: at the top of the data step, whose content sits at the bottom. 12 px like
   the data labels (6/11/2026, was 15): a quiet way back, not a second menu. */
.qodef-m-item--data .qodef-e-back {
	align-items: center;
	align-self: flex-start;
	color: #000;
	display: inline-flex;
	font-family: var(--mks-font-ui, var(--mks-font-family, inherit));
	font-size: 12px;
	gap: 10px;
	letter-spacing: .04em;
	line-height: 1;
	margin-bottom: auto;
	padding: 8px 0;
	text-decoration: none;
	text-transform: uppercase;
}

.qodef-m-item--data .qodef-e-back:hover {
	color: var(--qode-main-color, #000);
}

.qodef-m-item--data .qodef-e-back-arrow {
	fill: none;
	flex: 0 0 auto;
	height: 10px;
	width: 26px;
	stroke: currentColor;
	transition: transform .4s cubic-bezier(.33, .02, 0, .93);
}

.qodef-m-item--data .qodef-e-back:hover .qodef-e-back-arrow {
	transform: translateX(-4px);
}

/* Next (precht.at, with the Archicon arrow)
   ========================================================================== */

.qodef-m-item--next {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	justify-content: flex-end;
	gap: 18px;
	box-sizing: border-box;
	color: inherit;
	text-decoration: none;
}

.qodef-m-item--next .qodef-e-label {
	font-size: clamp(32px, 2.9vw, 42px);
	font-weight: 300;
	line-height: 1em;
	text-transform: uppercase;
}

.qodef-m-item--next .qodef-e-title {
	align-items: flex-start;
	display: flex;
	font-family: var(--mks-font-family, inherit);
	font-size: 15px;
	gap: 16px;
	justify-content: space-between;
	text-transform: uppercase;
}

.qodef-m-item--next .qodef-e-arrow {
	fill: none;
	flex: 0 0 auto;
	stroke: currentColor;
	transition: transform .4s cubic-bezier(.33, .02, 0, .93);
}

.qodef-m-item--next .qodef-e-media {
	display: block;
	overflow: hidden;
}

.qodef-m-item--next .qodef-e-image {
	display: block;
	height: 100%;
	object-fit: cover;
	transform: scale(1.1);
	transition: transform 1s cubic-bezier(.33, .02, 0, .93);
	width: 100%;
}

.qodef-m-item--next:hover .qodef-e-arrow {
	transform: translate(3px, -3px);
}

.qodef-m-item--next:hover .qodef-e-image {
	transform: scale(1.1) translateX(4%);
}

.qodef-m-item--next:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 6px;
}

/* Horizontal layout
   ========================================================================== */

@media only screen and (min-width: 1025px) {

	.qodef-mks-portfolio:not(.qodef--editor) .qodef-m-items-holder {
		height: var(--mks-strip-height);
		overflow-x: auto;
		overflow-y: hidden;
		overscroll-behavior-x: contain;
	}

	.qodef-mks-portfolio.qodef--horizontal .qodef-m-items-holder {
		overflow: hidden;
	}

	/* Mouse drag (strip.js): open hand on the strip, closed while dragging; nothing selected
	   or opened under the pointer meanwhile. */
	@media (pointer: fine) {

		.qodef-mks-portfolio.qodef--js.qodef--horizontal .qodef-m-items-holder {
			cursor: grab;
		}
	}

	.qodef-mks-portfolio.qodef--dragging .qodef-m-items-holder {
		cursor: grabbing;
		user-select: none;
	}

	.qodef-mks-portfolio.qodef--dragging .qodef-m-items-holder a,
	.qodef-mks-portfolio.qodef--dragging .qodef-m-items-holder img {
		pointer-events: none;
	}

	.qodef-mks-portfolio .qodef-m-items-holder:focus-visible {
		outline: 2px solid currentColor;
		outline-offset: -2px;
	}

	.qodef-mks-portfolio .scroll-content {
		height: 100%;
	}

	.qodef-mks-portfolio .scrollbar-track {
		display: none !important;
	}

	.qodef-mks-portfolio:not(.qodef--editor) .qodef-m-track {
		box-sizing: border-box;
		flex-direction: row;
		flex-wrap: nowrap;
		gap: var(--mks-gap);
		height: 100%;
		padding: var(--mks-pad-y) var(--mks-pad-x);
		width: max-content;
	}

	/* Bottom edge aligned with the photos, which keep space for their caption. */
	.qodef-mks-portfolio:not(.qodef--editor) .qodef-m-item--data,
	.qodef-mks-portfolio:not(.qodef--editor) .qodef-m-item--next {
		height: var(--mks-step-height);
		padding-bottom: var(--mks-caption-space);
	}

	.qodef-mks-portfolio:not(.qodef--editor) .qodef-m-item--text,
	.qodef-mks-portfolio:not(.qodef--editor) .qodef-m-item--quote {
		padding-bottom: var(--mks-caption-space);
	}

	.qodef-m-item--next .qodef-e-media {
		height: calc((var(--mks-step-height) - var(--mks-caption-space)) * .6);
		width: calc((var(--mks-step-height) - var(--mks-caption-space)) * .6 * var(--mks-aspect, .75));
	}

	.qodef-mks-portfolio.qodef--horizontal .qodef-m-progress {
		background-color: var(--mks-line-color);
		bottom: calc(var(--mks-pad-y) / 2);
		display: block;
		height: 1px;
		left: var(--mks-pad-x);
		pointer-events: none;
		position: absolute;
		right: var(--mks-pad-x);
	}

	.qodef-mks-portfolio .qodef-m-progress span {
		background-color: currentColor;
		display: block;
		height: 100%;
		transform: scaleX(var(--mks-progress, 0));
		transform-origin: left center;
	}

	/* "Scroll →" at the end of the progress line, cutting it, until the strip first moves (strip.js). */
	.qodef-mks-portfolio.qodef--js.qodef--horizontal .qodef-m-hint {
		background-color: var(--mks-hint-background, #fff);
		bottom: calc(var(--mks-pad-y) / 2);
		display: flex;
		padding-left: 20px;
		position: absolute;
		right: var(--mks-pad-x);
		transform: translateY(50%);
	}
}

/* "Scroll →": shared with the first home row (rows.css places it there).
   Hidden unless a layout shows it, and once the visitor has scrolled (strip.js, rows.js). */
.qodef-mks-portfolio .qodef-m-hint {
	align-items: center;
	color: #000;
	display: none;
	font-family: var(--mks-font-ui, var(--mks-font-family, inherit));
	font-size: 15px;
	gap: 14px;
	line-height: 1;
	pointer-events: none;
	text-transform: uppercase;
	transition: opacity .2s ease, visibility 0s .2s;
	white-space: nowrap;
}

.qodef-mks-portfolio.qodef--hint-off .qodef-m-hint {
	opacity: 0;
	visibility: hidden;
}

.qodef-mks-portfolio .qodef-m-hint .qodef-e-hint-arrow {
	fill: none;
	flex: 0 0 auto;
	stroke: currentColor;
}

/* Separator lines between steps (Archicon showcase), transparent unless a colour is set.
   Pseudo-elements, because the flattened wrappers leave no usable siblings. */
@media only screen and (min-width: 1025px) {

	.qodef-mks-portfolio:not(.qodef--editor) .qodef-m-item {
		position: relative;
	}

	.qodef-mks-portfolio:not(.qodef--editor) .qodef-m-item::before {
		background-color: var(--mks-separator-color, transparent);
		bottom: var(--mks-caption-space);
		content: "";
		left: calc(var(--mks-gap) / -2);
		pointer-events: none;
		position: absolute;
		top: 0;
		width: 1px;
	}

	.qodef-mks-portfolio .qodef-m-track > .qodef-m-project:first-child > .qodef-m-item--data::before {
		display: none;
	}
}

@media only screen and (max-width: 1024px) {

	.qodef-mks-portfolio > .qodef-m-filter {
		padding: 5% 5% 0;
	}

	.qodef-m-item--data,
	.qodef-m-item--next {
		width: 100%;
	}

	/* The panel is as tall as its content here: margin-bottom: auto gives no space. */
	.qodef-m-item--data .qodef-e-back {
		margin-bottom: 36px;
	}

	.qodef-m-item--next .qodef-e-media {
		aspect-ratio: var(--mks-aspect, .75);
		max-height: 80vh;
	}
}

/* Entrance (strip.js, observe): the same as the home rows. The data panel element by element
   ("Back to projects", title, each data item), then the steps on screen one after the other;
   later steps when they come on screen. Each fades in rising 24px on a long ease-out.
   Only with JavaScript and without reduced motion: otherwise everything is simply there.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

	.qodef-mks-portfolio.qodef--js:not(.qodef-mks-rows) .qodef-m-item:not(.qodef-m-item--data),
	.qodef-mks-portfolio.qodef--js:not(.qodef-mks-rows) .qodef-m-item--data :is(.qodef-e-back, .qodef-e-title, .qodef-e-data-item) {
		opacity: 0;
		transform: translateY(24px);
		transition: opacity .9s cubic-bezier(.165, .84, .44, 1), transform .9s cubic-bezier(.165, .84, .44, 1);
		transition-delay: var(--mks-reveal-delay, 0s);
	}

	/* Safety net: if strip.js never starts (qodef--ready), the steps show anyway. */
	.qodef-mks-portfolio.qodef--js:not(.qodef--ready):not(.qodef-mks-rows) .qodef-m-item:not(.qodef-m-item--data),
	.qodef-mks-portfolio.qodef--js:not(.qodef--ready):not(.qodef-mks-rows) .qodef-m-item--data :is(.qodef-e-back, .qodef-e-title, .qodef-e-data-item) {
		animation: mks-reveal-anyway .6s ease 3s forwards;
	}

	.qodef-mks-portfolio.qodef--js:not(.qodef-mks-rows) .qodef-m-item.qodef--appear:not(.qodef-m-item--data),
	.qodef-mks-portfolio.qodef--js:not(.qodef-mks-rows) .qodef-m-item--data.qodef--appear :is(.qodef-e-back, .qodef-e-title, .qodef-e-data-item) {
		opacity: 1;
		transform: none;
	}

	/* "Scroll →" enters once the first steps have appeared, then the arrow points the way
	   three times (the wrapper fades it out, so the two motions never fight). */
	.qodef-mks-portfolio .qodef-m-hint > * {
		animation: mks-hint-in .5s cubic-bezier(.165, .84, .44, 1) .9s both;
	}

	.qodef-mks-portfolio .qodef-m-hint .qodef-e-hint-arrow {
		animation: mks-hint-in .5s cubic-bezier(.165, .84, .44, 1) .9s both, mks-hint-nudge 1.4s cubic-bezier(.645, .045, .355, 1) 1.6s 3;
	}
}

@keyframes mks-hint-in {
	from {
		opacity: 0;
		transform: translateX(-8px);
	}
}

@keyframes mks-hint-nudge {
	50% {
		transform: translateX(6px);
	}
}

@keyframes mks-reveal-anyway {
	to {
		opacity: 1;
		transform: none;
	}
}

/* Reset before an entrance plays again (strip.js, rows.js: back from the browser cache). */
.qodef-mks-portfolio.qodef--instant,
.qodef-mks-portfolio.qodef--instant * {
	transition: none !important;
}