/*
 * Works carousel 495:2174.s05 "Mūsų atlikti darbai" (W2-U3), on every product page that has photos
 * for it, and on the product pages' extra photo rows. Values read from frame 495:2174 (1440):
 *
 *   band     528:1505 white (C01), x 50 to the window's right edge, 955..1538 (583 tall); the
 *            contact strip above ends 80 px before it, consult-trust starts 80 px after it (1618)
 *   title    495:2279 131,1013 434 x 65, Geist 500 50/65 #CD9F3F (C05), 58 below the band top
 *   arrows   495:2290 (the 374:3242 pair, exported as drawn: testimonials-prev / -next.svg),
 *            #424242, render boxes 38.76 x 42.35 at x 1199.44 / 1266.14 (27.94 apart), y 1021.85
 *            (8.85 under the title box); the pair ends 3.1 px inside the 1308 content line
 *   photos   495:2274-2277 375 x 272, radius 15, at x 131 + n x 411 (36 apart), y 1130 (52 under the
 *            title); the fourth runs off the window edge
 *   dots     495:2280 nine 24 x 3 bars, radius 50, 12 apart, centred (564..876), 75 under the
 *            photos (y 1477), 58 above the band bottom; the first #424242 (C02), the rest #CCCCCC
 *
 * The photos are a core/gallery (the client adds, removes and orders them; the lock lets them),
 * stepped by the shared carousel.js (the gallery is the track, .mn-carousel) and opened full size by
 * lightbox.js (.mn-lightbox). The row follows the homepage rows exactly - it is the assortment row's
 * geometry (375 cards, 36 apart): R6b from 1024 (N whole photos and a peek), R7b above 1440 (the
 * balanced full-width band, with the heading and arrows on the row's own edges), swipe cards below
 * 782. assortment.css explains both rules; the numbers here are the same.
 *
 * The dots are drawn by CSS alone (below 782 three quarters of the drawn size, so nine fit at 320) (no word or script of their own, aria-hidden by nature): one bar
 * per photo, at most the nine drawn, and the dark bar steps along them as the row scrolls - a
 * scroll-driven animation on the track's scroll timeline. Where a browser has no scroll timelines
 * (Firefox today) the dots are left out rather than shown frozen on the first one; the arrows,
 * swipe and keys work the same everywhere. While every photo is in view (carousel.js marks the root
 * is-fit) there is nothing to step, so the arrows and dots are hidden.
 */

/* ---- the band ---- */

.mn-wc.dc-section {
	--mn-wc-line: max(var(--mn-gutter), (100% - var(--mn-content)) / 2);
	box-sizing: border-box;
	margin: 0 0 80px;
	padding: 58px 0;
	/* white from 82 px before the content line (50 at 1440) to the window's right edge */
	background: linear-gradient(to right, transparent max(0px, var(--mn-wc-line) - 82px), var(--wp--preset--color--c-01) 0);
	font-family: var(--wp--preset--font-family--geist);
}

.mn-wc .mn-wc__root {
	position: relative;
}

.mn-wc .mn-wc__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-wc .mn-wc__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--geist);
	font-weight: 500;
	font-size: var(--wp--preset--font-size--s-16);
	line-height: 65px;
	letter-spacing: 0;
	color: var(--wp--preset--color--c-05);
	overflow-wrap: anywhere;
}

.mn-wc .mn-wc__controls {
	display: flex;
	flex: 0 0 auto;
	gap: 27.7px;
	margin: 8.5px 3px 0 auto;
}

.mn-wc .mn-wc__arrow {
	margin: 0;
	line-height: 0;
}

.mn-wc .mn-wc__arrow img {
	display: block;
	width: 39px;
	height: 43px;
}

/* hidden while nothing scrolls, and until carousel.js has wired the row (an arrow does nothing
 * before that). Not in the block editor: no script runs there and the client must reach them. */
.mn-wc .mn-wc__root:not(.block-editor-block-list__block):not(:has([data-mn-carousel-ready])) .mn-wc__controls {
	visibility: hidden;
}

/* a row that fits (one photo, or all in view) takes its arrows out of the layout altogether, not just out of sight: the
 * title still sets the head's height (65 / 46), so nothing moves (R10 item 5). Not in the block editor, as above. */
.mn-wc .mn-wc__root.is-fit:not(.block-editor-block-list__block) .mn-wc__controls {
	display: none;
}

/* ---- the row: the gallery is the track. Core sizes gallery photos with up to two ids in a selector
 * (the two-photo rule: :not(#individual-image) twice), so three :not(#id) outweigh every one of them. ---- */

.mn-wc .mn-wc__track.wp-block-gallery.has-nested-images {
	--mn-wc-start: max(var(--mn-gutter), (100% - var(--mn-content)) / 2);
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 36px;
	margin: 52px 0 0;
	padding: 0 var(--mn-wc-start);
	scroll-padding-inline: var(--mn-wc-start);
}

.mn-wc .mn-wc__track.wp-block-gallery.has-nested-images figure.wp-block-image:not(#mn-wc-1):not(#mn-wc-2):not(#mn-wc-3) {
	flex: 0 0 auto;
	width: 375px;
	height: 272px;
	margin: 0;
	border-radius: 15px;
	overflow: hidden;
}

.mn-wc .mn-wc__track.wp-block-gallery.has-nested-images figure.wp-block-image:not(#mn-wc-1):not(#mn-wc-2):not(#mn-wc-3) a,
.mn-wc .mn-wc__track.wp-block-gallery.has-nested-images figure.wp-block-image:not(#mn-wc-1):not(#mn-wc-2):not(#mn-wc-3) img {
	display: block;
	width: 100%;
	height: 100% !important;
	max-width: none;
}

.mn-wc .mn-wc__track.wp-block-gallery.has-nested-images figure.wp-block-image:not(#mn-wc-1):not(#mn-wc-2):not(#mn-wc-3) img {
	object-fit: cover;
	border-radius: 15px;
}

/* ---- the dots (scroll-driven; see the note above) ---- */

@supports (animation-timeline: scroll()) {
	.mn-wc .mn-wc__root {
		--mn-dots: 9;
		--mn-dot-step: 36px;
		--mn-dot-w: 24px;
		padding-bottom: 78px;
		timeline-scope: --mn-wc;
	}

	.mn-wc .mn-wc__track.wp-block-gallery.has-nested-images {
		scroll-timeline: --mn-wc x;
	}

	.mn-wc .mn-wc__root::before,
	.mn-wc .mn-wc__root::after {
		content: "";
		position: absolute;
		bottom: 0;
		left: calc(50% - (var(--mn-dots) * var(--mn-dot-step) - var(--mn-dot-step) + var(--mn-dot-w)) / 2);
		height: 3px;
		pointer-events: none;
	}

	.mn-wc .mn-wc__root::before {
		width: calc(var(--mn-dots) * var(--mn-dot-step) - var(--mn-dot-step) + var(--mn-dot-w));
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='3' viewBox='0 0 36 3' preserveAspectRatio='none'%3E%3Crect width='24' height='3' rx='1.5' fill='%23cccccc'/%3E%3C/svg%3E") left top / var(--mn-dot-step) 3px repeat-x;
	}

	.mn-wc .mn-wc__root::after {
		width: var(--mn-dot-w);
		border-radius: 50px;
		background-color: var(--wp--preset--color--c-02);
		animation-name: mn-wc-dot;
		animation-duration: auto;
		animation-fill-mode: both;
		animation-timing-function: steps(var(--mn-dots), jump-none);
		animation-timeline: --mn-wc;
	}

	/* one bar per photo up to the nine drawn */
	.mn-wc .mn-wc__root:has(.mn-wc__track > :nth-child(2):last-child) { --mn-dots: 2; }
	.mn-wc .mn-wc__root:has(.mn-wc__track > :nth-child(3):last-child) { --mn-dots: 3; }
	.mn-wc .mn-wc__root:has(.mn-wc__track > :nth-child(4):last-child) { --mn-dots: 4; }
	.mn-wc .mn-wc__root:has(.mn-wc__track > :nth-child(5):last-child) { --mn-dots: 5; }
	.mn-wc .mn-wc__root:has(.mn-wc__track > :nth-child(6):last-child) { --mn-dots: 6; }
	.mn-wc .mn-wc__root:has(.mn-wc__track > :nth-child(7):last-child) { --mn-dots: 7; }
	.mn-wc .mn-wc__root:has(.mn-wc__track > :nth-child(8):last-child) { --mn-dots: 8; }

	.mn-wc .mn-wc__root.is-fit,
	.mn-wc .mn-wc__root:has(.mn-wc__track > :only-child) {
		padding-bottom: 0;
	}

	.mn-wc .mn-wc__root.is-fit::before,
	.mn-wc .mn-wc__root.is-fit::after,
	.mn-wc .mn-wc__root:has(.mn-wc__track > :only-child)::before,
	.mn-wc .mn-wc__root:has(.mn-wc__track > :only-child)::after {
		content: none;
	}
}

@keyframes mn-wc-dot {
	to {
		transform: translateX(calc((var(--mn-dots) - 1) * var(--mn-dot-step)));
	}
}

/* ---- 1024 and up: N whole photos and a peek, cut at the window edge (R6b, as assortment.css) ---- */

@media (min-width: 1024px) {
	.mn-wc .mn-wc__track.wp-block-gallery.has-nested-images {
		--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-wc .mn-wc__track.wp-block-gallery.has-nested-images::after {
		content: "";
		flex: 0 0 calc(100% - var(--mn-row-n) * (var(--mn-row-card) + var(--mn-row-gap)));
	}

	.mn-wc .mn-wc__track.wp-block-gallery.has-nested-images figure.wp-block-image:not(#mn-wc-1):not(#mn-wc-2):not(#mn-wc-3) {
		width: var(--mn-row-card);
		height: auto;
		aspect-ratio: 375 / 272;
	}
}

/* ---- above 1440: the balanced full-width band (R7b, the rule in assortment.css). Drawn 375, max
 * 506.25; N 3 to 1686, 4 from 1687, 5 from 2163. The white band is the whole window. ---- */

@media (min-width: 1440.02px) {
	.mn-wc.dc-section {
		background: var(--wp--preset--color--c-01);
	}

	.mn-wc .mn-wc__track.wp-block-gallery.has-nested-images {
		--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-wc .mn-wc__track.wp-block-gallery.has-nested-images::after {
		flex: 0 0 var(--mn-band-room);
		margin: 0 auto 0 calc(-1 * var(--mn-row-gap));
	}

	.mn-wc .mn-wc__track.wp-block-gallery.has-nested-images figure.wp-block-image:not(#mn-wc-1):not(#mn-wc-2):not(#mn-wc-3) {
		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-wc .mn-wc__track.wp-block-gallery.has-nested-images figure.wp-block-image:not(#mn-wc-1):not(#mn-wc-2):not(#mn-wc-3):first-child {
		margin-left: auto;
	}

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

@media (min-width: 1687px) {
	.mn-wc .mn-wc__track.wp-block-gallery.has-nested-images {
		--mn-row-n: 4;
	}
}

@media (min-width: 2163px) {
	.mn-wc .mn-wc__track.wp-block-gallery.has-nested-images {
		--mn-row-n: 5;
	}
}

/* ---- below 782: swipe cards with the next one peeking in; the arrows go, gaps halve ---- */

@media (max-width: 781.98px) {
	.mn-wc.dc-section {
		margin-bottom: 40px;
		padding-block: 40px;
	}

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

	.mn-wc .mn-wc__controls {
		display: none;
	}

	.mn-wc .mn-wc__track.wp-block-gallery.has-nested-images {
		gap: 16px;
		margin-top: 24px;
	}

	.mn-wc .mn-wc__track.wp-block-gallery.has-nested-images figure.wp-block-image:not(#mn-wc-1):not(#mn-wc-2):not(#mn-wc-3) {
		width: min(78vw, 300px);
		height: auto;
		aspect-ratio: 375 / 272;
	}
}

@supports (animation-timeline: scroll()) {
	@media (max-width: 781.98px) {
		.mn-wc .mn-wc__root {
			--mn-dot-step: 27px;
			--mn-dot-w: 18px;
			padding-bottom: 35px;
		}
	}
}