/*
 * Platus tvorų asortimentas 374:3241 (homepage). Values read from frame 326:1057 (nodes.json).
 *
 *   band    363:2758 white, 1440 x 925 at y 2706 (the next section starts at 3631, flush)
 *   title   342:2644 132,2830 591 x 65, Geist 400 50/65 #CD9F3F
 *   arrows  342:2647 / 342:2646, #424242, render 33.89 x 34.44 at x 1217.91 / 1275.54, y 2845.89
 *   cards   375 x 424, radius 15, at x 132 + n x 411 (36 apart), y 2947; the group is 1740 wide,
 *           so the fourth card bleeds off the right edge
 *   name    14 under the photo (y 3385), Geist 500 48/68 #CD9F3F
 *   type    55 under the name's top (y 3440, the two 68 px lines overlap 13), Geist 500 24/68 #424242
 *   The type line ends at 3508; the band ends at 3631 (123).
 * The track starts at the content edge and runs to the right edge of the window; the shared
 * carousel steps it one card per arrow. The name's link stretches over the whole card.
 *
 * From 1024 up the cards scale with the window (R6b, the reference pass: Fritz Hansen): from the
 * content line to the window edge fit N whole cards, their gaps and a peek of the next card of
 * 5.5 % of the window (never under 48 px, never over 35 % of a card). N is 3, as the 1440 frame
 * shows (card 373.6 at 1440, drawn 375); 2 below 1120, where a 3-up card is narrower than (or,
 * at 1102-1119, within 6 px of) the longest name ("Šukos 80x20", 304.5 px at the drawn 48 px),
 * which then breaks onto two lines and pushes that card's type line down.
 * The rule lives in the 1024 block below; under 1024 the cards keep their R4/V1 sizes.
 * Above 1440 every sideways row of the homepage is a balanced full-width band instead (R7b): the
 * block after the 1024 ones explains it for all five rows.
 */

.mn-assort.dc-section {
	padding: 124px 0 123px;
	background-color: var(--wp--preset--color--c-01);
}

.mn-assort .mn-assort__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 24px;
	width: min(var(--mn-content), 100% - 2 * var(--mn-gutter));
	margin-inline: auto;
}

.mn-assort .mn-assort__title {
	margin: 0;
	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-assort .mn-assort__controls {
	display: flex;
	flex: 0 0 auto;
	gap: 23.74px;
	margin-top: 15.89px;
}

.mn-assort .mn-assort__arrow {
	width: 34px;
	height: 35px;
	margin: 0;
}

.mn-assort .mn-assort__arrow img {
	display: block;
	width: 34px;
	height: 35px;
}

/* The content line is the side padding on BOTH ends (V1): the first card starts under the title,
 * every arrow step lands a card on that line, and at the far end the last card stops on the
 * content's right line instead of the window edge (before, at 1920 the last step moved the row
 * 60 px and left the first card 60 px left of the title). From 1024 up the right end is the R6b
 * spacer instead (the 1024 block below). */
.mn-assort .mn-assort__track {
	--mn-assort-start: max(var(--mn-gutter), (100% - var(--mn-content)) / 2);
	gap: 36px;
	margin-top: 52px;
	padding-inline: var(--mn-assort-start);
	scroll-padding-inline: var(--mn-assort-start);
}

.mn-assort .mn-assort__card {
	position: relative;
	width: 375px;
}

.mn-assort .mn-assort__photo {
	width: 100%;
	height: 424px;
	margin: 0;
	border-radius: 15px;
	overflow: hidden;
}

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

.mn-assort .mn-assort__name {
	margin: 14px 0 0;
	font-weight: 500;
	font-size: var(--wp--preset--font-size--s-15);
	line-height: 68px;
	letter-spacing: 0;
	color: var(--wp--preset--color--c-05);
}

.mn-assort .mn-assort__name a {
	color: inherit;
}

/* the stretched link, on the page only: in the editor it covered the card, so a click on the photo
 * selected the name instead of the photo (the editor marks blocks with block-editor-block-list__block) */
.mn-assort .mn-assort__name:not(.block-editor-block-list__block) a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.mn-assort .mn-assort__type {
	margin: -13px 0 0;
	font-weight: 500;
	font-size: var(--wp--preset--font-size--s-09);
	line-height: 68px;
	color: var(--wp--preset--color--c-02);
}

/* ---- 1024 and up: N whole cards and a peek, cut at the window edge (R6b) ----
 * The track's content box runs from the content line to the window edge (no right padding), so
 * 100 % below is that width (A). The window is A + the line, and the line is max(gutter, A - content)
 * (the line is max(gutter, (window - content) / 2)). card = max((A - N gap - peek) / N,
 * (A - N gap) / (N + 0.35)): the second term takes over where 5.5 % of the window would be more than
 * 35 % of a card. After the last card a spacer the size of the peek ends the row, so the far end is a
 * whole number of steps away: every arrow step lands a card on the line, and at the end the last
 * card stands whole with the arrows' next disabled (carousel.js) and nothing peeking after it. */
@media (min-width: 1024px) {
	.mn-assort .mn-assort__track {
		--mn-row-n: 3;
		--mn-row-gap: 36px;
		--mn-row-peek: max(48px, 0.055 * (100% + max(var(--mn-gutter), 100% - var(--mn-content))));
		--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);
		padding-right: 0;
	}

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

	.mn-assort .mn-assort__card {
		width: var(--mn-row-card);
	}

	.mn-assort .mn-assort__photo {
		height: auto;
		aspect-ratio: 375 / 424;
	}
}

@media (min-width: 1024px) and (max-width: 1119.98px) {
	.mn-assort .mn-assort__track {
		--mn-row-n: 2;
	}
}

/* ---- above 1440: a balanced full-width band (R7b, the operator's option D) ----
 * Every sideways row of the homepage (this one, projects, testimonials, the hero strip, the reels)
 * becomes a band across the whole window with the same margin on both sides, so the left gap of a
 * row that starts on the heading line is gone and nothing runs off the right edge. This block holds
 * the rule; the other files point here.
 *
 *   margin  48 px on both sides, one value for every row. It is at least every row's card gap (28,
 *           32, 36, 48.7, reels 16-21), so no card stands closer to the window edge than to its
 *           neighbour - the outer margin never reads as a squeezed gap - and it is the hero's gap
 *           (48.7), the widest, rounded.
 *   N       whole cards fill the band exactly: card = (band - (N - 1) gap) / N. N is the whole number
 *           nearest to cards of a target width of 1.15 x the drawn card, raised by one wherever a
 *           card would pass 1.35 x drawn, so the cards stay between about the drawn size and 1.35 x
 *           (2560 does not get huge photos). The N bands below are that rule worked out per row.
 *   few     a row with fewer items than that N fills the band only up to 1.35 x drawn; past that the
 *           cards stop growing and the row centres (auto margins), with equal margins. Done with
 *           flex-grow + max-width, so it holds for any number of items the client keeps.
 *   scroll  the track's scroll box IS the band (plus 6 px room for a focus ring, under the gap), so
 *           a card stepped past either margin is cut there, never in the margin; a spacer as wide as
 *           that room ends the row, so the far end is a whole number of steps away and the last card
 *           stops on the right margin exactly as the first starts on the left one.
 *   arrows  carousel.js marks the root is-fit while the row has nothing to scroll; the arrows are
 *           then hidden (visibility, so nothing moves).
 *   heading the heading and its arrows stand on the row's own edges, not on the 1176 content line:
 *           the title starts where the first card starts and the arrows end where the last card
 *           ends (carousel.js publishes the resting edges as --mn-row-start / --mn-row-end; the
 *           fallback before it runs is the band margin). Judged by fresh reviewers: on the content
 *           line, 8 of the 9 reviewers of these three rows pointed at the heading and arrows lining up
 *           with nothing.
 * Assortment: drawn 375, max 506.25; N 3 to 1686, 4 from 1687 (4 items: from 2229 the four stop at
 * 506.25 and centre), 5 from 2163 for a fifth item. */
@media (min-width: 1440.02px) {
	.mn-assort .mn-assort__track {
		--mn-band: 48px;
		--mn-band-room: 6px;
		--mn-row-n: 3;
		--mn-row-max: 506.25px;
		margin-inline: calc(var(--mn-band) - var(--mn-band-room));
		padding-inline: var(--mn-band-room) 0;
		scroll-padding-inline: var(--mn-band-room);
	}

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

	.mn-assort .mn-assort__card {
		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-assort .mn-assort__track > :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-assort .mn-assort__root.is-fit .mn-assort__controls,
	.mn-assort .mn-assort__root:not(.block-editor-block-list__block):not(:has([data-mn-carousel-ready])) .mn-assort__controls {
		visibility: hidden;
	}

	.mn-assort .mn-assort__head {
		width: auto;
		margin-inline: var(--mn-row-start, 48px) var(--mn-row-end, 48px);
	}
}

@media (min-width: 1687px) {
	.mn-assort .mn-assort__track {
		--mn-row-n: 4;
	}
}

@media (min-width: 2163px) {
	.mn-assort .mn-assort__track {
		--mn-row-n: 5;
	}
}

/* ---- below 782: swipe cards with the next one peeking in; the arrows go, as on the other carousels ---- */

@media (max-width: 781.98px) {
	.mn-assort.dc-section {
		padding-block: 64px;
	}

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

	.mn-assort .mn-assort__controls {
		display: none;
	}

	.mn-assort .mn-assort__track {
		gap: 16px;
		margin-top: 32px;
	}

	.mn-assort .mn-assort__card {
		width: min(78vw, 300px);
	}

	.mn-assort .mn-assort__photo {
		height: auto;
		aspect-ratio: 375 / 424;
	}

	.mn-assort .mn-assort__name {
		margin-top: 12px;
		font-size: var(--wp--preset--font-size--s-12);
		line-height: 36px;
	}

	.mn-assort .mn-assort__type {
		margin-top: 2px;
		font-size: var(--wp--preset--font-size--s-04);
		line-height: 28px;
	}
}