/*
 * Projects carousel - homepage 326:1057.s13 "Platus tvorų asortimentas" (the second section with
 * this heading, as drawn). The cards are a core/query loop over atlikti-darbai (newest 9): the
 * featured image and the title; the title's link covers the whole card (one tab stop per card). Values read from the nodes, frame 1440:
 *   band 371:2989: white, 1440 x 1031 at y 7922; 98 px of page background (#F2F2F2) below it to
 *     the testimonials (the gap belongs to the section above, so it is this section's margin)
 *   title 371:3006: Geist 400 50/65 #CD9F3F (C05), 124 px down, at the container's left (132)
 *   arrows 371:3007: two 39 x 42 vectors (#424242, exported as drawn), render boxes x 1203.4 and
 *     1270.1, 14.86 px under the title's top; the pair ends at the container's right edge
 *   cards 374:3147 / 374:3150: photo 556 x 424, radius 15, at y 8163 (52 under the title);
 *     32 px apart; the third card runs past the viewport's right edge, so the track bleeds right
 *   card title 374:3148: Geist 400 38/51 #CD9F3F, 14 px under the photo, in the drawn 110 px box
 *     (the drawn text ends in a line break), so the button does not move with a one-line title
 *   button 374:3159 "green 32": 303 x 53 at y 8776, radius 47.14, diamond gradient #CAA13F to
 *     #C59834 (fitted as a 111deg linear gradient, within 3.3 levels of the computed field), stroke
 *     1.47 inside white 20 % fading to 0; label Geist 600 20.62/29.46 white. Same construction as
 *     U1's consult pill (copied, R3); 124 px of white under it.
 * Below 1024 px the titles step down; below 782 px the arrows give way to swipe cards with the
 * next card peeking in (intake reference pass).
 * From 1024 up the cards scale with the window (R6b, the reference pass: Fritz Hansen; the rule is
 * explained in assortment.css): 2 whole cards and a peek of the third of 5.5 % of the window, as
 * the 1440 frame shows (card 582.4 x 444.1 at 1440, drawn 556 x 424: the drawn third card showed
 * 132 px, the rule's peek is 79.2).
 */

.mn-projects {
	overflow-x: clip;
	box-sizing: border-box;
	margin-bottom: 98px;
	padding-block: 124px;
	background-color: var(--wp--preset--color--c-01);
}

.mn-projects__inner {
	width: min(var(--mn-content, 1176px), 100% - 2 * var(--mn-gutter, 20px));
	margin-inline: auto;
}

/* ---- heading row ---- */

.mn-projects__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
}

.mn-projects .mn-projects__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--geist);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--s-16);
	line-height: 65px;
	letter-spacing: 0;
	color: var(--wp--preset--color--c-05);
}

.mn-projects__arrows {
	display: flex;
	flex: 0 0 auto;
	gap: 27.7px;
	margin-top: 14.86px;
	/* the drawn pair ends at 1309.1 (the 39 px export of a 38.8 px render box), 1.1 past the container */
	margin-right: -1.12px;
}

.mn-projects .mn-projects__arrow {
	margin: 0;
	line-height: 0;
}

.mn-projects .mn-projects__arrow img {
	display: block;
	width: 39px;
	height: 42px;
}

/* ---- the track (carousel.js) ---- */

.mn-projects__query {
	margin-top: 52px;
}

/*
 * The track spans the window: the negative margins take it to both window edges, and the padding
 * puts the content line back (the two cancel exactly, also when a classic scrollbar makes 100vw
 * wider than the page, so the first card always starts under the title). Scroll padding makes every
 * step land a card on that line and the last card stop on the content's right line; cards stepped
 * past the line bleed off the window edge (V1: they used to be cut off at the content line, unlike
 * the assortment row). Percentages: margin and padding resolve against the container, the scroll
 * padding against the track itself.
 */
.mn-projects .mn-projects__track {
	gap: 32px;
	margin: 0 calc(50% - 50vw);
	/* core caps .wp-block-post-template at 100 %, which would stop the bleed */
	max-width: none;
	padding: 0 calc(50vw - 50%);
	scroll-padding-inline: max(var(--mn-gutter, 20px), (100% - var(--mn-content, 1176px)) / 2);
	list-style: none;
}

.mn-projects .mn-projects__track > li {
	position: relative;
	width: 556px;
	margin: 0;
}

.mn-projects .mn-projects__photo {
	margin: 0;
	aspect-ratio: 556 / 424;
	overflow: hidden;
	border-radius: 15px;
}

.mn-projects .mn-projects__photo img {
	display: block;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	border-radius: 15px;
}

.mn-projects .mn-projects__card-title {
	min-height: 110px;
	margin: 14px 0 0;
	font-family: var(--wp--preset--font-family--geist);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--s-14);
	line-height: 51px;
	letter-spacing: 0;
	color: var(--wp--preset--color--c-05);
}

.mn-projects .mn-projects__card-title a {
	color: inherit;
	text-decoration: none;
}

/* one link per card: the title's link covers the photo too (photo and title both lead to the project) */
.mn-projects .mn-projects__card-title:not(.block-editor-block-list__block) a::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* ---- 1024 and up: N whole cards and a peek, cut at the window edge (R6b; assortment.css explains
 * the formula). The section is a size container so the track reaches exactly the window's edges
 * (cqw is the section, which a classic scrollbar does not widen; vw would put the right end and
 * part of the peek under the scrollbar). The vw lines stay as the fallback. ---- */
@media (min-width: 1024px) {
	.mn-projects {
		container-type: inline-size;
	}

	.mn-projects .mn-projects__track {
		--mn-row-n: 2;
		--mn-row-gap: 32px;
		--mn-row-peek: max(48px, 0.055 * (100% + max(var(--mn-gutter, 20px), 100% - var(--mn-content, 1176px))));
		--mn-row-card: max((100% - var(--mn-row-n) * var(--mn-row-gap) - var(--mn-row-peek)) / var(--mn-row-n), (100% - var(--mn-row-n) * var(--mn-row-gap)) / (var(--mn-row-n) + 0.35));
		gap: var(--mn-row-gap);
		margin-inline: calc(50% - 50cqw);
		padding: 0 0 0 calc(50cqw - 50%);
	}

	.mn-projects .mn-projects__track::after {
		content: "";
		flex: 0 0 calc(100% - var(--mn-row-n) * (var(--mn-row-card) + var(--mn-row-gap)));
	}

	.mn-projects .mn-projects__track > li {
		width: var(--mn-row-card);
	}
}

/* ---- above 1440: a balanced full-width band (R7b; assortment.css explains the rule). The track
 * reaches the section's edges through the size container, minus the band margin. Drawn 556, max
 * 750.6; N 2 to 1629, 3 from 1629.2 (3 items: all in view, arrows hidden; from 2412 they stop at
 * 750.6 and centre), 4 from 2411.8 for a fourth project. ---- */
@media (min-width: 1440.02px) {
	.mn-projects .mn-projects__track {
		--mn-band: 48px;
		--mn-band-room: 6px;
		--mn-row-max: 750.6px;
		margin-inline: calc(50% - 50cqw + var(--mn-band) - var(--mn-band-room));
		padding: 0 0 0 var(--mn-band-room);
		scroll-padding-inline: var(--mn-band-room);
	}

	.mn-projects .mn-projects__track::after {
		flex: 0 0 var(--mn-band-room);
		margin: 0 auto 0 calc(-1 * var(--mn-row-gap));
	}

	.mn-projects .mn-projects__track > li {
		flex: 1 0 calc((100% - var(--mn-band-room) - (var(--mn-row-n) - 1) * var(--mn-row-gap)) / var(--mn-row-n));
		width: auto;
		max-width: var(--mn-row-max);
	}

	.mn-projects .mn-projects__track > li:first-child {
		margin-left: auto;
	}

	/* hidden while nothing scrolls, and until carousel.js has wired the row (before that, and
	 * without the script, an arrow does nothing; showing it first would flash it where it fits).
	 * Not in the block editor (no script runs there; the client must still reach the arrows). */
	.mn-projects .mn-projects__inner.is-fit .mn-projects__arrows,
	.mn-projects .mn-projects__inner:not(.block-editor-block-list__block):not(:has([data-mn-carousel-ready])) .mn-projects__arrows {
		visibility: hidden;
	}

	/* the heading and arrows on the row's edges (the root is the 1176 inner, so they are negative) */
	.mn-projects .mn-projects__head {
		margin-inline: var(--mn-row-start, calc(48px - (100cqw - 100%) / 2)) var(--mn-row-end, calc(48px - (100cqw - 100%) / 2));
	}
}

@media (min-width: 1629.2px) {
	.mn-projects .mn-projects__track {
		--mn-row-n: 3;
	}
}

@media (min-width: 2411.8px) {
	.mn-projects .mn-projects__track {
		--mn-row-n: 4;
	}
}

/* ---- the button (U1's consult pill, copied) ---- */

.mn-projects .mn-projects__actions {
	justify-content: center;
	gap: 0;
	/* drawn 65 px under the 110 px title box (613 under the photo's top) */
	margin: 65px 0 0;
}

.mn-projects .mn-projects__more {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 303px;
	max-width: 100%;
	height: 53px;
	margin: 0;
	padding: 11.78px 26.51px;
	border-radius: 47.14px;
	background-color: var(--wp--preset--color--c-12);
	/* the diamond field sampled along its main axis (111deg in pixel space): max 3.3 levels off */
	background-image: linear-gradient(111deg, #cba040 0%, #caa140 10%, #caa13f 20%, #cba041 50%, #c99d3c 60%, #c59834 70%, #c69a36 80%, #c79b39 90%, #c89d3b 100%);
}

.mn-projects .mn-projects__more .wp-block-button__link {
	display: block;
	flex: 0 0 auto;
	width: auto;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--wp--preset--color--c-01);
	font-family: var(--wp--preset--font-family--geist);
	font-weight: 600;
	font-size: 20.62px;
	line-height: 29.46px;
	letter-spacing: 0;
	text-decoration: none;
	white-space: nowrap;
}

.mn-projects .mn-projects__more .wp-block-button__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 47.14px;
}

/* the drawn 1.47 px inside stroke: white 20 % at the top, fading to nothing at the bottom */
.mn-projects .mn-projects__more::before {
	content: "";
	position: absolute;
	inset: 0;
	padding: 1.47px;
	border-radius: inherit;
	background: linear-gradient(to bottom, rgb(255 255 255 / 0.2), rgb(255 255 255 / 0));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite: exclude;
	pointer-events: none;
}

/* ---- narrower screens (design silent) ---- */

@media (max-width: 1023.98px) {
	.mn-projects {
		margin-bottom: 56px;
		padding-block: 64px;
	}

	.mn-projects .mn-projects__title {
		font-size: var(--wp--preset--font-size--s-13);
		line-height: 46px;
	}

	.mn-projects__arrows {
		margin-top: 2px;
	}

	.mn-projects__query {
		margin-top: 32px;
	}

	.mn-projects .mn-projects__track > li {
		width: min(556px, 100vw - 80px);
	}

	.mn-projects .mn-projects__card-title {
		min-height: 75.2px;
		margin-top: 12px;
		font-size: var(--wp--preset--font-size--s-12);
		line-height: 37.6px;
	}

	.mn-projects .mn-projects__actions {
		margin-top: 32px;
	}
}

@media (max-width: 781.98px) {
	.mn-projects__arrows {
		display: none;
	}

	.mn-projects .mn-projects__track {
		gap: 16px;
	}
}

/* the label needs 235 px at the drawn 20.62 px; below 360 px the inner width is 280 */
@media (max-width: 359.98px) {
	.mn-projects .mn-projects__more .wp-block-button__link {
		font-size: var(--wp--preset--font-size--s-04);
	}
}

/* R18: no projects to show means nothing to step through and nothing more to see: the arrows and the
 * "more projects" button go (not in the block editor, where the client must still reach them), and the
 * list's own "no results" line stands under the heading. */
.mn-projects .mn-projects__inner:not(.block-editor-block-list__block):not(:has(.mn-projects__track > *)) :is(.mn-projects__arrows, .mn-projects__actions) {
	display: none;
}