/*
 * Sprendimai 376:3255 (homepage). Values read from frame 326:1057 (nodes.json); y is the frame's.
 *
 *   title  342:2625 132,2128, Geist 400 50/65 #CD9F3F (the box is 52.14 high; the line is 65)
 *   row    y 2221.86, 340.14 high; the drawn open card (Tvoros) is 665 x 340.14, radius 20, photo
 *          under #000 at 12 %; the narrow cards (98 / 167 / 193 wide, radius 14.625, photo under #000
 *          at 20 %) carry no title in the file
 *   label  371:3011 "Tvoros" at +45 / +222.14 in the open card, Geist 500 64/66.3 #FFF;
 *          arrow 376:3252 (render 40.92 x 45.44, white) 219.85 right of the label's start, 17.84 down
 *   The section ends at 2562; the assortment starts at 2706, so this section keeps 144 below it.
 *
 * R13 (the operator, 2026-10-18: "make the photos scrollable like the others as well"): the row is a
 * sideways row of the homepage like the others - the shared carousel (carousel.js) with its arrows,
 * swipe, trackpad, mouse drag and endless loop, N whole cards and a peek, and from 1440 up a balanced
 * band (assortment.css explains the rule for all of them). Every card is the DRAWN OPEN CARD: its
 * 665 : 340.14 proportion, radius 20, the photo cropped as drawn, the label as drawn (Geist 500 64/66.3
 * white, arrow 41 x 46), the lighter 12 % scrim. What the file draws only as a state of ONE card is
 * dropped: the wide/narrow emphasis (hover or focus opened a card to 665 and narrowed the others, the
 * drawn Tvoros the default). In a row that scrolls it cannot work - a card that widens under a dragging
 * pointer moves the cards beside it while they are held, and it changes the width of the set the loop
 * moves by - so what is left of the emphasis is a hover that does not touch the layout: the card's
 * photo comes up a little and the scrim lifts. Every name shows at once (before, three of four
 * showed only on a hover that a touch screen never has). Whole card = the link: the name's link
 * stretches over it.
 */

.mn-sol.dc-section {
	padding-bottom: 144px;
}

.mn-sol .mn-sol__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-sol .mn-sol__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);
}

/* the arrows are the assortment's: the same two icons at the same place under the title's line */
.mn-sol .mn-sol__controls {
	display: flex;
	flex: 0 0 auto;
	gap: 23.74px;
	margin-top: 15.89px;
}

.mn-sol .mn-sol__nav {
	width: 34px;
	height: 35px;
	margin: 0;
}

.mn-sol .mn-sol__nav img {
	display: block;
	width: 34px;
	height: 35px;
}

/* The track starts at the content line and runs to the window's right edge; the line is the side
 * padding on both ends, so every arrow step lands a card on it. */
.mn-sol .mn-sol__row {
	--mn-sol-start: max(var(--mn-gutter), (100% - var(--mn-content)) / 2);
	gap: 18px;
	margin-top: 28.86px;
	padding-inline: var(--mn-sol-start);
	scroll-padding-inline: var(--mn-sol-start);
}

.mn-sol .mn-sol__card {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	width: min(78vw, 320px);
	height: 340.14px;
	border-radius: 20px;
	overflow: hidden;
}

.mn-sol .mn-sol__photo {
	position: absolute;
	inset: 0;
	z-index: -1;
	margin: 0;
	border-radius: inherit;
	overflow: hidden;
}

.mn-sol .mn-sol__photo img {
	display: block;
	width: 100%;
	max-width: none;
	height: 100% !important;
	object-fit: cover;
	border-radius: inherit;
	transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.mn-sol .mn-sol__photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgb(0 0 0 / 0.2);
	transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* the drawn open card's label, at the foot of every card */
.mn-sol .mn-sol__label {
	display: flex;
	align-items: flex-start;
	gap: 21.42px; /* the arrow's drawn render box starts 219.85 after the label's start */
	margin: auto 40px 32px 45px;
	white-space: normal;
}

.mn-sol .mn-sol__name {
	min-width: 0;
	margin: 0;
	font-weight: 500;
	font-size: var(--wp--preset--font-size--s-13);
	line-height: 46px;
	letter-spacing: 0;
	color: var(--wp--preset--color--c-01);
}

.mn-sol .mn-sol__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 label instead of the photo (the editor marks blocks with block-editor-block-list__block) */
.mn-sol .mn-sol__name:not(.block-editor-block-list__block) a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.mn-sol .mn-sol__arrow {
	flex: 0 0 auto;
	width: 26px;
	height: 29px;
	margin: 9px 0 0;
}

.mn-sol .mn-sol__arrow img {
	display: block;
	width: 26px;
	height: 29px;
}

/* hover and keyboard focus (:focus-visible, not :focus-within: a mouse click leaves focus on the
 * link): the photo comes up, the scrim lifts to the drawn open card's 12 %. No layout moves. */
@media (hover: hover) {
	.mn-sol .mn-sol__card:hover .mn-sol__photo img {
		transform: scale(1.04);
	}

	.mn-sol .mn-sol__card:hover .mn-sol__photo::after {
		background-color: rgb(0 0 0 / 0.12);
	}
}

.mn-sol .mn-sol__card:has(:focus-visible) .mn-sol__photo::after {
	background-color: rgb(0 0 0 / 0.12);
}

@media (prefers-reduced-motion: reduce) {
	.mn-sol .mn-sol__photo img,
	.mn-sol .mn-sol__photo::after {
		transition: none;
	}

	.mn-sol .mn-sol__card:hover .mn-sol__photo img {
		transform: none;
	}
}

/* ---- 782 and up: bigger cards, the arrows ---- */

@media (min-width: 782px) {
	.mn-sol .mn-sol__card {
		width: min(62vw, 480px);
	}

	.mn-sol .mn-sol__name {
		font-size: var(--wp--preset--font-size--s-15);
		line-height: 56px;
	}

	.mn-sol .mn-sol__arrow,
	.mn-sol .mn-sol__arrow img {
		width: 31px;
		height: 35px;
	}

	.mn-sol .mn-sol__arrow {
		margin-top: 12px;
	}
}

/* ---- 1024 and up: N whole cards and a peek, cut at the window edge (R6b, as the assortment) ----
 * The track's content box runs from the content line to the window edge (no right padding), so
 * 100 % below is that width (A). card = max((A - N gap - peek) / N, (A - N gap) / (N + 0.35)); the peek
 * is 5.5 % of the window, never under 48 px. N is 2: a card is then 0.99 to 1.35 x the drawn open card
 * (665) from 1440 to 1909. After the last card a spacer the size of the peek ends the row. The card keeps
 * the drawn proportion, never under 260 high. */
@media (min-width: 1024px) {
	.mn-sol .mn-sol__row {
		--mn-row-n: 2;
		--mn-row-gap: 18px;
		--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-sol .mn-sol__row::after {
		content: "";
		flex: 0 0 calc(100% - var(--mn-row-n) * (var(--mn-row-card) + var(--mn-row-gap)));
	}

	.mn-sol .mn-sol__card {
		width: var(--mn-row-card);
		height: auto;
		min-height: 260px;
		aspect-ratio: 665 / 340.14;
	}
}

/* the label is the drawn 64 px where the card holds it ("Kiemo vartai" and its arrow need about 530 px) */
@media (min-width: 1366px) {
	.mn-sol .mn-sol__name {
		font-size: var(--wp--preset--font-size--s-17);
		line-height: 66.3px;
	}

	.mn-sol .mn-sol__label {
		margin: auto 0 28px 45px;
		white-space: nowrap;
	}

	.mn-sol .mn-sol__arrow,
	.mn-sol .mn-sol__arrow img {
		width: 41px;
		height: 46px;
	}

	.mn-sol .mn-sol__arrow {
		margin-top: 11.84px;
	}
}

/* ---- above 1440: a balanced full-width band (R7b, the operator's option D; assortment.css holds the rule) ----
 * 48 px each side, N whole cards fill the band exactly, the scroll box is the band, the heading and
 * arrows stand on the row's own edges. Drawn card 665, max 1.35 x = 897.75: N 2 to 1909, 3 from 1910
 * (four items: from 2820 the four stop at 897.75 and centre). */
@media (min-width: 1440.02px) {
	.mn-sol .mn-sol__row {
		--mn-band: 48px;
		--mn-band-room: 6px;
		--mn-row-n: 2;
		--mn-row-max: 897.75px;
		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-sol .mn-sol__row::after {
		flex: 0 0 var(--mn-band-room);
		margin: 0 auto 0 calc(-1 * var(--mn-row-gap));
	}

	.mn-sol .mn-sol__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-sol .mn-sol__row > :first-child {
		margin-left: auto;
	}

	/* hidden while nothing scrolls, and until carousel.js has wired the row (not in the block editor) */
	.mn-sol .mn-sol__inner.is-fit .mn-sol__controls,
	.mn-sol .mn-sol__inner:not(.block-editor-block-list__block):not(:has([data-mn-carousel-ready])) .mn-sol__controls {
		visibility: hidden;
	}

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

@media (min-width: 1910px) {
	.mn-sol .mn-sol__row {
		--mn-row-n: 3;
	}
}

/* ---- below 782: the section's own spacing and title; the arrows go, as on the other carousels ---- */

@media (max-width: 781.98px) {
	.mn-sol.dc-section {
		padding-bottom: 72px;
	}

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

	.mn-sol .mn-sol__controls {
		display: none;
	}

	.mn-sol .mn-sol__row {
		gap: 16px;
		margin-top: 24px;
	}
}