/*
 * Testimonials - homepage 374:3246 "Mumis pasitiki". Values read from the nodes, frame 1440
 * (section box y 9051..9589; 98 px of page background below it to the consult block, which is
 * this section's bottom padding):
 *   label 374:3184 "Klientų atsiliepimai": Geist 500 18/23.4 #04448C (C03), centred, at the top
 *   title 374:3185 "Mumis pasitiki": Geist 400 50/65 #CD9F3F (C05), centred, 36 px down
 *   arrows 374:3242: two 39 x 43 vectors (#424242, exported as drawn), render boxes x 1203.4 and
 *     1270.1, 47.85 px down; the pair ends at the container's right edge
 *   cards 374:3221 ...: 380 x 395, white, radius 15, 28 px apart, from y 9194 (42 px under the
 *     title); the fourth runs past the viewport's right edge, so the track bleeds right
 *   inside a card: stars (374:3212, the crisp export, used on every card) 40 px down and 32 in;
 *     quote Geist 400 16/30 #424242 at 86 px; name Geist 600 14/18.2 #04448C at 308 px (the same
 *     place on every card, so it is pinned to the bottom); role Geist 400 10/10 at 345 px, 40 px
 *     above the card's bottom. The role is drawn #425466 (C13) on the first two cards and #424242
 *     (C02) on the other two; each card keeps its drawn colour (--slate = C13).
 * Below 1024 px the title steps 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): 3 whole cards and a peek of the fourth of 5.5 % of the window, as
 * the 1440 frame shows (card 381.6 at 1440, drawn 380); 2 below 1120 (as the other rows), where a
 * 3-up card would be 288-318 px wide and 2-up is nearer the drawn 380.
 */

.mn-testimonials {
	overflow-x: clip;
	/* padding, not margin: as the page's last block, core's flow layout zeroes its bottom margin */
	padding-bottom: 98px;
}

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

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

.mn-testimonials__head {
	position: relative;
	text-align: center;
}

.mn-testimonials .mn-testimonials__label {
	margin: 0;
	font-family: var(--wp--preset--font-family--geist);
	font-weight: 500;
	font-size: var(--wp--preset--font-size--s-04);
	line-height: 23.4px;
	letter-spacing: 0;
	color: var(--wp--preset--color--c-03);
}

.mn-testimonials .mn-testimonials__title {
	margin: 12.6px 0 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-testimonials .mn-testimonials__arrows {
	position: absolute;
	top: 47.85px;
	/* the drawn pair ends at 1309.1, 1.1 past the container */
	right: -1.12px;
	display: flex;
	gap: 27.7px;
}

.mn-testimonials .mn-testimonials__arrow {
	margin: 0;
	line-height: 0;
}

.mn-testimonials .mn-testimonials__arrow img {
	display: block;
	width: 39px;
	height: 43px;
}

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

/* The track spans the window with the content line as padding (the projects carousel explains the
 * margin / padding pair): first card under the content line, steps land on it, the last card stops
 * on the right line, and cards stepped past the line bleed off the window edge (V1). */
.mn-testimonials .mn-testimonials__track {
	gap: 28px;
	margin: 42px calc(50% - 50vw) 0;
	padding-inline: calc(50vw - 50%);
	scroll-padding-inline: max(var(--mn-gutter, 20px), (100% - var(--mn-content, 1176px)) / 2);
}

.mn-testimonials .mn-testimonials__card {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	width: 380px;
	min-height: 395px;
	margin: 0;
	padding: 40px 32px;
	border-radius: 15px;
	background-color: var(--wp--preset--color--c-01);
}

.mn-testimonials .mn-testimonials__stars {
	margin: 0;
	line-height: 0;
}

.mn-testimonials .mn-testimonials__stars img {
	display: block;
	width: 101px;
	height: 16px;
}

.mn-testimonials .mn-testimonials__quote {
	/* the drawn quote box is 168.09 tall; the name stays pinned to the card's bottom either way */
	min-height: 168.09px;
	/* the drawn quote boxes are 316-324 wide; at 324 (8 px into the right padding) all four
	   quotes break exactly where the design breaks them */
	margin: 30px -8px 24px 0;
	font-family: var(--wp--preset--font-family--geist);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--s-03);
	line-height: 30px;
	letter-spacing: 0;
	color: var(--wp--preset--color--c-02);
}

.mn-testimonials .mn-testimonials__name {
	/* the drawn name box is 30 tall (one 18.2 px line) and the role sits 7 px under it */
	min-height: 30px;
	margin: auto 0 0;
	font-family: var(--wp--preset--font-family--geist);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--s-02);
	line-height: 18.2px;
	letter-spacing: 0;
	color: var(--wp--preset--color--c-03);
}

.mn-testimonials .mn-testimonials__role {
	margin: 7px 0 0;
	font-family: var(--wp--preset--font-family--geist);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--s-01);
	line-height: 10px;
	letter-spacing: 0;
	color: var(--wp--preset--color--c-02);
}

.mn-testimonials .mn-testimonials__role--slate {
	color: var(--wp--preset--color--c-13);
}

/* ---- 1024 and up: N whole cards and a peek, cut at the window edge (R6b; assortment.css explains
 * the formula, projects.css the size container) ---- */
@media (min-width: 1024px) {
	.mn-testimonials {
		container-type: inline-size;
	}

	.mn-testimonials .mn-testimonials__track {
		--mn-row-n: 3;
		--mn-row-gap: 28px;
		--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-inline: calc(50cqw - 50%) 0;
	}

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

	.mn-testimonials .mn-testimonials__card {
		width: var(--mn-row-card);
	}
}

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

/* ---- above 1440: a balanced full-width band (R7b; assortment.css explains the rule, projects.css
 * the size container). Drawn 380, max 513; N 3 to 1690, 4 from 1691, 5 from 2160.5 (5 items: all
 * in view, arrows hidden), 6 from 2625.5 for a sixth. The quote, name and role keep their drawn
 * padding inside the card. ---- */
@media (min-width: 1440.02px) {
	.mn-testimonials .mn-testimonials__track {
		--mn-band: 48px;
		--mn-band-room: 6px;
		--mn-row-max: 513px;
		margin-inline: calc(50% - 50cqw + var(--mn-band) - var(--mn-band-room));
		padding-inline: var(--mn-band-room) 0;
		scroll-padding-inline: var(--mn-band-room);
	}

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

	.mn-testimonials .mn-testimonials__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-testimonials .mn-testimonials__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-testimonials .mn-testimonials__inner.is-fit .mn-testimonials__arrows,
	.mn-testimonials .mn-testimonials__inner:not(.block-editor-block-list__block):not(:has([data-mn-carousel-ready])) .mn-testimonials__arrows {
		visibility: hidden;
	}

	/* the arrows end where the row ends (the drawn 1.12 px overhang kept); the centred heading is
	 * already centred on the band, whose margins are equal */
	.mn-testimonials .mn-testimonials__arrows {
		right: calc(var(--mn-row-end, calc(48px - (100cqw - 100%) / 2)) - 1.12px);
	}
}

@media (min-width: 1691px) {
	.mn-testimonials .mn-testimonials__track {
		--mn-row-n: 4;
	}
}

@media (min-width: 2160.5px) {
	.mn-testimonials .mn-testimonials__track {
		--mn-row-n: 5;
	}
}

@media (min-width: 2625.5px) {
	.mn-testimonials .mn-testimonials__track {
		--mn-row-n: 6;
	}
}

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

@media (max-width: 1023.98px) {
	.mn-testimonials {
		padding-bottom: 56px;
	}

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

	.mn-testimonials .mn-testimonials__arrows {
		top: 37.5px;
	}

	.mn-testimonials .mn-testimonials__track {
		margin-top: 32px;
	}

	.mn-testimonials .mn-testimonials__card {
		width: min(380px, 100vw - 80px);
		min-height: 0;
	}

	.mn-testimonials .mn-testimonials__quote {
		min-height: 0;
		margin-right: 0;
	}
}

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

	.mn-testimonials .mn-testimonials__track {
		gap: 16px;
	}

	.mn-testimonials .mn-testimonials__card {
		padding: 32px 24px;
	}
}