/* ==========================================================================
   MKS Projects — home rows
   One project per row: data on the left, a summary rail scrolling sideways, View Project.
   The page scrolls vertically and natively (docs/consulenza-ux-home.md).
   Typography and colours as Archicon (labels in the font for small text --mks-font-ui, #5f5f5f, portfolio arrow).
   ========================================================================== */

/* Lengths that animate (rail edge fade). */
@property --mks-fade-start {
	syntax: "<length>";
	inherits: false;
	initial-value: 0px;
}

@property --mks-fade-end {
	syntax: "<length>";
	inherits: false;
	initial-value: 0px;
}

.qodef-mks-rows {
	--mks-row-height: 36vh;
	/* The set height, lowered by rows.js on short screens so the next row shows above the fold. */
	--mks-row-size: min(var(--mks-row-height), var(--mks-row-fit, var(--mks-row-height)));
	--mks-row-header: 300px;
	--mks-row-spacing: 56px;
	--mks-row-nav: 44px;
	--mks-gap: 24px;
	--mks-rail-card: 85vw;
}

/* Categories: small upper case like the row data (13 px), smaller than the header menu so the
   two don't read as a second header (client feedback, 6/11/2026); black underline on hover and
   on the current one, centred from 1025 px; below, Archicon's left-aligned column. */
.qodef-mks-rows > .qodef-m-filter {
	font-family: var(--mks-font-ui, var(--mks-font-family, inherit));
	margin-bottom: 48px;
}

/* On the list, so the "/" between the items has the same size. */
.qodef-mks-rows > .qodef-m-filter .qodef-m-filter-items {
	font-size: 13px;
	letter-spacing: .06em;
	line-height: 1;
	text-transform: uppercase;
}

.qodef-mks-rows > .qodef-m-filter .qodef-m-filter-item {
	font-size: inherit;
	line-height: inherit;
}

.qodef-mks-rows > .qodef-m-filter .qodef-m-filter-item-name {
	background-image: linear-gradient(to top, currentColor 1px, transparent 1px);
}

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

	.qodef-mks-rows > .qodef-m-filter .qodef-m-filter-items {
		justify-content: center;
	}
}

.qodef-mks-rows .qodef-m-rows {
	display: flex;
	flex-direction: column;
	gap: var(--mks-row-spacing);
	padding-bottom: var(--mks-row-spacing);
}

.qodef-mks-rows .qodef-m-rows-end {
	height: 1px;
}

/* Row
   ========================================================================== */

/* Desktop grid: header on the left; on the right the row controls above the rail
   (NN/g, carousels on desktop: group the arrows above the carousel), so they never sit
   next to the controls of a gallery step, which are below its images. */
.qodef-mks-rows .qodef-m-row {
	--mks-step-height: var(--mks-row-size);
	column-gap: var(--mks-pad-x);
	display: grid;
	grid-template-columns: var(--mks-row-header) minmax(0, 1fr);
	grid-template-rows: var(--mks-row-nav) auto auto;
	padding-left: var(--mks-pad-x);
}

/* Header: title and data at the top, View Project at the bottom. */
.qodef-mks-rows .qodef-m-row-header {
	display: flex;
	flex-direction: column;
	grid-column: 1;
	grid-row: 1 / span 2;
	height: calc(var(--mks-row-nav) + var(--mks-row-size));
	justify-content: space-between;
	min-width: 0;
}

/* As on the project page (strip.css): a long single word is sized to the column. */
.qodef-mks-rows .qodef-m-row-header .qodef-e-heading {
	container-type: inline-size;
}

.qodef-mks-rows .qodef-m-row-header .qodef-e-title {
	font-size: min(clamp(28px, 2.6vw, 44px), 190cqi / var(--mks-title-word, 1));
	font-weight: 300;
	line-height: 1.1em;
	margin: 0;
	overflow-wrap: break-word;
}

.qodef-mks-rows .qodef-m-row-header .qodef-e-title a {
	color: inherit;
	text-decoration: none;
}

.qodef-mks-rows .qodef-m-row-header .qodef-e-title a:hover {
	color: var(--qode-main-color, inherit);
}

.qodef-mks-rows .qodef-m-row-header .qodef-e-meta,
.qodef-mks-rows .qodef-m-row-header .qodef-e-category {
	color: var(--mks-label-color, #5f5f5f);
	font-family: var(--mks-font-ui, var(--mks-font-family, inherit));
	font-size: 13px;
	line-height: 1.4em;
	margin: 14px 0 0;
	text-transform: uppercase;
}

.qodef-mks-rows .qodef-m-row-header .qodef-e-category {
	margin-top: 4px;
}

/* View Project: link in the header and card at the end of the rail. */
.qodef-mks-rows .qodef-e-view,
.qodef-mks-rows .qodef-m-item--view {
	color: inherit;
	text-decoration: none;
}

.qodef-mks-rows .qodef-e-view {
	align-items: center;
	align-self: flex-start;
	display: inline-flex;
	font-family: var(--mks-font-ui, var(--mks-font-family, inherit));
	font-size: 15px;
	gap: 14px;
	text-transform: uppercase;
}

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

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

.qodef-mks-rows .qodef-e-view:hover,
.qodef-mks-rows .qodef-m-item--view:hover {
	color: var(--qode-main-color, inherit);
}

/* On desktop the title and the card at the end of the rail lead to the project: no second
   link under the data (client feedback, 6/11/2026). Below 1025 px it stays beside the title. */
@media only screen and (min-width: 1025px) {

	.qodef-mks-rows .qodef-e-view {
		display: none;
	}
}

/* Rail: native horizontal scroll, snap, no visible scrollbar (arrows instead)
   ========================================================================== */

.qodef-mks-rows .qodef-m-rail {
	grid-column: 2;
	grid-row: 2;
	min-width: 0;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
}

.qodef-mks-rows .qodef-m-rail::-webkit-scrollbar {
	display: none;
}

.qodef-mks-rows .qodef-m-rail:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

/* The track carries .qodef-mks-project-content (for the project CSS): keep it a flex row,
   not the display: contents that strip.css gives to that class. */
.qodef-mks-rows .qodef-m-rail .qodef-m-rail-track.qodef-mks-project-content {
	display: flex;
}

.qodef-mks-rows .qodef-m-rail-track {
	box-sizing: border-box;
	gap: var(--mks-gap);
	height: var(--mks-row-size);
	padding-right: var(--mks-pad-x);
	width: max-content;
}

.qodef-mks-rows .qodef-m-rail-track .qodef-m-item {
	flex: 0 0 auto;
	scroll-snap-align: start;
}

/* Desktop: the rail fades out at the screen edge, so a row always reads as continuing,
   wherever the cut falls between two steps (NN/g, illusion of completeness).
   The start fades too once the row has moved; no fade at the end of the row.
   Eased opacity ("scrim" curve), not a linear ramp, which shows a hard band. */
@media only screen and (min-width: 1025px) {

	.qodef-mks-rows.qodef--js .qodef-m-rail {
		--mks-fade-end: clamp(160px, 16vw, 300px);
		-webkit-mask-image: var(--mks-fade-mask);
		mask-image: var(--mks-fade-mask);
		--mks-fade-mask: linear-gradient(to right,
			rgba(0, 0, 0, 0) calc(var(--mks-fade-start) * 0),
			rgba(0, 0, 0, 0.013) calc(var(--mks-fade-start) * 0.081),
			rgba(0, 0, 0, 0.049) calc(var(--mks-fade-start) * 0.155),
			rgba(0, 0, 0, 0.104) calc(var(--mks-fade-start) * 0.225),
			rgba(0, 0, 0, 0.175) calc(var(--mks-fade-start) * 0.29),
			rgba(0, 0, 0, 0.259) calc(var(--mks-fade-start) * 0.353),
			rgba(0, 0, 0, 0.352) calc(var(--mks-fade-start) * 0.412),
			rgba(0, 0, 0, 0.45) calc(var(--mks-fade-start) * 0.471),
			rgba(0, 0, 0, 0.55) calc(var(--mks-fade-start) * 0.529),
			rgba(0, 0, 0, 0.648) calc(var(--mks-fade-start) * 0.588),
			rgba(0, 0, 0, 0.741) calc(var(--mks-fade-start) * 0.647),
			rgba(0, 0, 0, 0.825) calc(var(--mks-fade-start) * 0.71),
			rgba(0, 0, 0, 0.896) calc(var(--mks-fade-start) * 0.775),
			rgba(0, 0, 0, 0.951) calc(var(--mks-fade-start) * 0.845),
			rgba(0, 0, 0, 0.987) calc(var(--mks-fade-start) * 0.919),
			rgba(0, 0, 0, 1) calc(var(--mks-fade-start) * 1),
			rgba(0, 0, 0, 1) calc(100% - var(--mks-fade-end) * 1),
			rgba(0, 0, 0, 0.987) calc(100% - var(--mks-fade-end) * 0.919),
			rgba(0, 0, 0, 0.951) calc(100% - var(--mks-fade-end) * 0.845),
			rgba(0, 0, 0, 0.896) calc(100% - var(--mks-fade-end) * 0.775),
			rgba(0, 0, 0, 0.825) calc(100% - var(--mks-fade-end) * 0.71),
			rgba(0, 0, 0, 0.741) calc(100% - var(--mks-fade-end) * 0.647),
			rgba(0, 0, 0, 0.648) calc(100% - var(--mks-fade-end) * 0.588),
			rgba(0, 0, 0, 0.55) calc(100% - var(--mks-fade-end) * 0.529),
			rgba(0, 0, 0, 0.45) calc(100% - var(--mks-fade-end) * 0.471),
			rgba(0, 0, 0, 0.352) calc(100% - var(--mks-fade-end) * 0.412),
			rgba(0, 0, 0, 0.259) calc(100% - var(--mks-fade-end) * 0.353),
			rgba(0, 0, 0, 0.175) calc(100% - var(--mks-fade-end) * 0.29),
			rgba(0, 0, 0, 0.104) calc(100% - var(--mks-fade-end) * 0.225),
			rgba(0, 0, 0, 0.049) calc(100% - var(--mks-fade-end) * 0.155),
			rgba(0, 0, 0, 0.013) calc(100% - var(--mks-fade-end) * 0.081),
			rgba(0, 0, 0, 0) calc(100% - var(--mks-fade-end) * 0)
		);
		transition: --mks-fade-start .6s cubic-bezier(.645, .045, .355, 1), --mks-fade-end .6s cubic-bezier(.645, .045, .355, 1);
	}

	.qodef-mks-rows .qodef-m-row:not(.qodef--at-start) .qodef-m-rail {
		--mks-fade-start: clamp(64px, 6vw, 120px);
	}

	.qodef-mks-rows .qodef-m-row.qodef--at-end .qodef-m-rail {
		--mks-fade-end: 0px;
	}
}

/* Teaser (rows.js): the rail moves by itself once, without snapping back mid-way. */
.qodef-mks-rows .qodef-m-rail.qodef--teasing {
	scroll-snap-type: none;
}

/* Mouse drag (rows.js): no snapping and no text selection while dragging. */
@media (pointer: fine) {
	.qodef-mks-rows.qodef--js .qodef-m-rail {
		cursor: grab;
	}
}

.qodef-mks-rows .qodef-m-rail.qodef--dragging {
	cursor: grabbing;
	scroll-snap-type: none;
	user-select: none;
}

.qodef-mks-rows .qodef-m-rail.qodef--dragging a,
.qodef-mks-rows .qodef-m-rail.qodef--dragging img {
	pointer-events: none;
}

.qodef-mks-rows .qodef-m-item--view {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 18px;
	height: calc(var(--mks-row-size) - var(--mks-caption-space));
	justify-content: flex-end;
	padding-left: 12px;
	width: 260px;
}

.qodef-mks-rows .qodef-m-item--view .qodef-e-label {
	font-family: var(--mks-font-ui, var(--mks-font-family, inherit));
	font-size: var(--mks-text-lg, 24px);
	font-weight: 300;
	line-height: 1em;
	text-transform: uppercase;
}

/* Progress line: how far the row has scrolled, as on the project page
   ========================================================================== */

.qodef-mks-rows .qodef-m-row-progress {
	background-color: var(--mks-line-color);
	grid-column: 2;
	grid-row: 3;
	height: 1px;
	margin: 16px var(--mks-pad-x) 0 0;
}

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

/* Nothing to scroll, or no JavaScript to follow it: no line. */
.qodef-mks-rows:not(.qodef--js) .qodef-m-row-progress,
.qodef-mks-rows .qodef-m-row.qodef--static .qodef-m-row-progress {
	visibility: hidden;
}

/* Entrance of a row (rows.js, sequence): the description column element by element, then
   the images one after the other; each element 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-rows.qodef--js .qodef-m-row-header :is(.qodef-e-title, .qodef-e-meta, .qodef-e-category, .qodef-e-view),
	.qodef-mks-rows.qodef--js .qodef-m-rail-track .qodef-m-item,
	.qodef-mks-rows.qodef--js .qodef-m-row-nav {
		opacity: 0;
		transform: translateY(24px);
		transition: opacity .9s cubic-bezier(.165, .84, .44, 1), transform .9s cubic-bezier(.165, .84, .44, 1);
		transition-delay: calc(var(--mks-reveal-delay, 0s) + var(--mks-row-delay, 0s));
	}

	.qodef-mks-rows.qodef--js .qodef-m-row-progress {
		opacity: 0;
		transition: opacity .9s ease;
		transition-delay: calc(var(--mks-reveal-delay, 0s) + var(--mks-row-delay, 0s));
	}

	/* Safety net: if rows.js never starts (qodef--ready), the rows show anyway (keyframes in strip.css). */
	.qodef-mks-rows.qodef--js:not(.qodef--ready) .qodef-m-row-header :is(.qodef-e-title, .qodef-e-meta, .qodef-e-category, .qodef-e-view),
	.qodef-mks-rows.qodef--js:not(.qodef--ready) .qodef-m-rail-track .qodef-m-item,
	.qodef-mks-rows.qodef--js:not(.qodef--ready) .qodef-m-row-nav,
	.qodef-mks-rows.qodef--js:not(.qodef--ready) .qodef-m-row-progress {
		animation: mks-reveal-anyway .6s ease 3s forwards;
	}

	.qodef-mks-rows.qodef--js .qodef-m-row.qodef--in .qodef-m-row-header :is(.qodef-e-title, .qodef-e-meta, .qodef-e-category, .qodef-e-view),
	.qodef-mks-rows.qodef--js .qodef-m-row.qodef--in .qodef-m-rail-track .qodef-m-item,
	.qodef-mks-rows.qodef--js .qodef-m-row.qodef--in .qodef-m-row-nav,
	.qodef-mks-rows.qodef--js .qodef-m-row.qodef--in .qodef-m-row-progress {
		opacity: 1;
		transform: none;
	}
}

/* Arrows (always visible: NN/g, hover-only arrows go unnoticed)
   ========================================================================== */

.qodef-mks-rows .qodef-m-row-nav {
	align-items: center;
	color: var(--mks-caption-color, #5f5f5f);
	display: flex;
	font-size: 13px;
	gap: 4px;
	grid-column: 2;
	grid-row: 1;
	height: var(--mks-row-nav);
	justify-content: flex-end;
	padding-right: var(--mks-pad-x);
}

.qodef-mks-rows .qodef-m-row-nav button {
	align-items: center;
	background: none;
	border: 0;
	border-radius: 0;
	color: #000;
	cursor: pointer;
	display: inline-flex;
	justify-content: center;
	margin: 0;
	min-height: 0;
	padding: 8px;
}

.qodef-mks-rows .qodef-m-row-nav button:hover {
	color: var(--qode-main-color, #000);
}

.qodef-mks-rows .qodef-m-row-nav button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.qodef-mks-rows .qodef-m-row-nav button[disabled] {
	cursor: default;
	opacity: .25;
}

/* "Scroll ↓→" at the bottom of the screen, while the page is at the top and the first row
   at its start (rows.js; base style and appear motion in strip.css). Frosted label,
   readable over the photos. */
.qodef-mks-rows.qodef--js > .qodef-m-hint {
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	background-color: rgba(255, 255, 255, .82);
	bottom: 24px;
	display: flex;
	left: 50%;
	padding: 10px 18px;
	position: fixed;
	transform: translateX(-50%);
	transition: opacity .3s ease, transform .3s cubic-bezier(.165, .84, .44, 1), visibility 0s .3s;
	z-index: 20;
}

.qodef-mks-rows.qodef--js.qodef--hint-off > .qodef-m-hint {
	transform: translate(-50%, 8px);
}

.qodef-mks-rows.qodef--js:not(.qodef--hint-off) > .qodef-m-hint {
	transition-delay: 0s;
}

/* Both axes: down for the page, right for the row, each pointing its way in turn. */
@media (prefers-reduced-motion: no-preference) {

	.qodef-mks-rows .qodef-m-hint--both .qodef-e-hint-arrow {
		animation: mks-hint-in .5s cubic-bezier(.165, .84, .44, 1) .9s both;
	}

	.qodef-mks-rows .qodef-m-hint--both .qodef-e-hint-y {
		animation: mks-hint-axis-y 2.8s cubic-bezier(.645, .045, .355, 1) 1.6s 3;
	}

	.qodef-mks-rows .qodef-m-hint--both .qodef-e-hint-x {
		animation: mks-hint-axis-x 2.8s cubic-bezier(.645, .045, .355, 1) 1.6s 3;
	}
}

@keyframes mks-hint-axis-y {
	0%, 50%, 100% {
		transform: none;
	}

	25% {
		transform: translateY(5px);
	}
}

@keyframes mks-hint-axis-x {
	0%, 50%, 100% {
		transform: none;
	}

	75% {
		transform: translateX(5px);
	}
}

/* Without JavaScript the arrows would be inert. */
.qodef-mks-rows:not(.qodef--js) .qodef-m-row-nav {
	visibility: hidden;
}

/* Mobile and tablet: header above the rail, cards at 85% width with the next one peeking
   ========================================================================== */

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

	.qodef-mks-rows {
		--mks-row-spacing: 64px;
		--mks-gap: 12px;
	}

	.qodef-mks-rows .qodef-m-row {
		--mks-step-height: auto;
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto;
		padding-left: 0;
	}

	.qodef-mks-rows .qodef-m-row > * {
		grid-column: 1;
		grid-row: auto;
	}

	.qodef-mks-rows .qodef-m-row-header {
		align-items: flex-end;
		flex-direction: row;
		gap: 16px;
		grid-row: auto;
		height: auto;
		margin-bottom: 16px;
		padding: 0 5%;
	}

	/* Side by side with View Project: the heading takes the free width (as a size
	   container it has none of its own and would squeeze the title word by word). */
	.qodef-mks-rows .qodef-m-row-header .qodef-e-heading {
		flex: 1 1 auto;
		min-width: 0;
	}

	.qodef-mks-rows .qodef-m-row-header .qodef-e-title {
		font-size: min(26px, 190cqi / var(--mks-title-word, 1));
	}

	.qodef-mks-rows .qodef-m-row-header .qodef-e-category {
		display: none;
	}

	.qodef-mks-rows .qodef-e-view {
		align-self: flex-end;
		flex: 0 0 auto;
		font-size: 13px;
		gap: 10px;
	}

	.qodef-mks-rows .qodef-e-view .qodef-e-arrow {
		height: 18px;
		width: 18px;
	}

	.qodef-mks-rows .qodef-m-rail {
		scroll-padding-left: 5%;
		scroll-snap-type: x mandatory;
	}

	.qodef-mks-rows .qodef-m-rail-track {
		align-items: flex-start;
		height: auto;
		padding: 0 5%;
	}

	.qodef-mks-rows .qodef-m-rail-track .qodef-m-item {
		flex: 0 0 var(--mks-rail-card);
		width: var(--mks-rail-card);
	}

	/* One proportion for every card: the row is as tall as its tallest step, so a portrait
	   photo further on would leave a gap under the first one. Photos fill it (cropped),
	   drawings stay whole (items.css); a photo pair splits it in two. */
	.qodef-mks-rows {
		--mks-rail-aspect: 1;
	}

	.qodef-mks-rows .qodef-m-rail-track .qodef-e-media,
	.qodef-mks-rows .qodef-m-rail-track .qodef-e-slides {
		aspect-ratio: var(--mks-rail-aspect);
		max-height: 65vh;
		width: 100%;
	}

	.qodef-mks-rows .qodef-m-rail-track .qodef-m-item--photo-pair .qodef-e-media {
		aspect-ratio: calc(var(--mks-rail-aspect) * 2);
	}

	.qodef-mks-rows .qodef-m-rail-track .qodef-m-item--text,
	.qodef-mks-rows .qodef-m-rail-track .qodef-m-item--quote {
		justify-content: flex-start;
		padding: 0;
	}

	/* At most 3 steps on mobile: the rest is on the project page. */
	.qodef-mks-rows .qodef-m-rail-track > .elementor-element:nth-of-type(n+4) {
		display: none;
	}

	.qodef-mks-rows .qodef-m-rail-track .qodef-m-item--view {
		flex-basis: 50vw;
		height: auto;
		min-height: 200px;
		width: 50vw;
	}

	.qodef-mks-rows .qodef-m-row-nav {
		justify-content: flex-start;
		padding: 0 5%;
	}

	.qodef-mks-rows .qodef-m-row-progress {
		margin: 16px 5% 4px;
	}

	.qodef-mks-rows.qodef--js > .qodef-m-hint {
		bottom: 16px;
	}
}