/*
 * Hero 326:1057.s02 (homepage). Every value is read from frame 326:1057 (nodes.json); y values
 * are the frame's.
 *
 *   photo     326:1058 1440 x 827 at 0,0, under #000 at 50 % (core/cover, dim 50, colour c11)
 *   title     326:1203 box 132,229 803 x 134, Geist 500 98.67/133.76 #FFF
 *   lead      326:1204 box 132,367.14 712 x 44, Geist 400 21.93/43.86 #FFF (preset s07 = 22)
 *   badges    326:1061 / 326:1060 81 x 81 at x 1128.28 / 1227.06, y 252 (17.78 apart, right edge 1308)
 *   strip     329:2400 starts at x -26, y 465: 7 cards 171.405 x 256.133, radius 66.22, pitch 220.099
 *             (gap 48.694). Gradient 0.6 x (#000 0 % at 64.64 % -> #000 100 % at 95.82 % of the height).
 *             Caption at 194.78 from the card top, 39 high, centred: a 25.32 x 1.17 white rule, 12.66,
 *             then the name, Geist 400 15.58/38.96 #FFF (the 16 px master scaled 0.9739).
 *             Motion: the strip stands still; the arrows step it one card (carousel.js), touch swipes it.
 *             The file draws a 10 s LINEAR smart-animate (one period per 10 s), and it was built that
 *             way first; the operator found the motion wrong (2026-10-13), and the reference pass (V1,
 *             .dc/reference/strip-compare.png: 4 of 6 comparable strips stand still, none drifts) set
 *             it still. Standing still, the first card starts on the content line like every other
 *             row that bleeds off the right edge, instead of the drawn x -26 of a moving strip.
 *             Below 1024 the card is sized from the window so the next one always peeks in (R5,
 *             the 1023.98 block). From 1024 up it scales with the window too (R6b, the reference
 *             pass: Fritz Hansen; the formula is explained in assortment.css): N whole cards and a
 *             peek of the next, cut at the window edge. N is 6 from 1350, as the 1440 frame shows
 *             (6 whole cards from the line; card 160 x 239.1 at 1440, drawn 171.405 x 256.133),
 *             5 from 1120 and 4 below (the N that keeps the card nearest the drawn size; 6 would
 *             make it 109-147 px wide at 1024-1349).
 *   arrows    387:3258 / 387:3257, render 29 x 29.45 at x 1214.43 / 1278.56, y 756.88, white
 *   photo end 827; the intro starts at 936, so this section keeps 109 below the photo.
 *
 * The header (U1) is laid over this section; its content ends at y 161, the title starts at 229.
 * Below 1176 the header is the 84 px mobile bar, so the copy starts lower than the bar instead.
 */

.mn-hero.dc-section {
	padding-bottom: 109px;
}

.mn-hero .mn-hero__cover {
	display: block;
	min-height: 827px;
	padding: 229px 0 40.12px;
	overflow: hidden;
}

.mn-hero .mn-hero__cover > .wp-block-cover__inner-container {
	width: 100%;
	max-width: none;
	color: var(--wp--preset--color--c-01);
}

/* core's constrained layout would cap and centre every child at the content width: the strip is
 * full width, and the head and arrows centre themselves below */
.mn-hero .mn-hero__cover > .wp-block-cover__inner-container > * {
	max-width: none;
	margin-block: 0;
}

/* ---- title, lead, badges ---- */

.mn-hero .mn-hero__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-hero .mn-hero__copy {
	flex: 0 1 auto;
	min-width: 0;
}

.mn-hero .mn-hero__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--geist);
	font-weight: 500;
	font-size: clamp(44px, 6.852vw, var(--wp--preset--font-size--s-20));
	line-height: 1.35559;
	letter-spacing: 0;
	color: var(--wp--preset--color--c-01);
}

.mn-hero .mn-hero__lead {
	margin: 4.38px 0 0;
	font-weight: 400;
	font-size: var(--wp--preset--font-size--s-07);
	line-height: 43.86px;
	color: var(--wp--preset--color--c-01);
}

.mn-hero .mn-hero__badges {
	display: flex;
	flex: 0 0 auto;
	gap: 17.78px;
	margin-top: 23px;
}

.mn-hero .mn-hero__badge {
	width: 81px;
	height: 81px;
	margin: 0;
}

.mn-hero .mn-hero__badge img {
	display: block;
	width: 100%;
	height: 100% !important;
}

/* ---- the strip ---- */

.mn-hero .mn-hero__cover .mn-hero__strip {
	margin-top: 54px;
	margin-inline: 0;
}

/* The track scrolls, so it clips whatever paints outside it - including the focus ring of a card's
 * link at the top and bottom. 6 px of room inside, given back as a negative margin: the cards do not
 * move (measured: card top 465 at 1440 before and after).
 * The track is the full window width; its side padding is the content line (132 at 1440, 20 below
 * 1216), so the first card starts under the title, a stepped card lands on that line (scroll
 * padding), and at the far end the last card stops on the content's right line. Cards scrolled past
 * the left line bleed off the window edge, as on the other carousels. */
.mn-hero .mn-hero__track {
	--mn-hero-line: max(var(--mn-gutter), (100% - var(--mn-content)) / 2);
	--mn-hero-gap: 48.694px;
	gap: var(--mn-hero-gap);
	width: 100%;
	margin: -6px 0;
	padding: 6px var(--mn-hero-line);
	scroll-padding-inline: var(--mn-hero-line);
}

.mn-hero .mn-hero__card {
	position: relative;
	flex: 0 0 171.405px;
	width: 171.405px;
	height: 256.133px;
	margin: 0;
}

.mn-hero .mn-hero__card a {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 66.22px;
	overflow: hidden;
}

.mn-hero .mn-hero__card img {
	display: block;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	border-radius: 66.22px;
}

.mn-hero .mn-hero__card a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(180deg, rgb(0 0 0 / 0) 64.639%, rgb(0 0 0 / 0.6) 95.817%);
	pointer-events: none;
}

.mn-hero .mn-hero__card .wp-element-caption {
	position: absolute;
	top: 194.78px;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 12.66px;
	height: 39px;
	margin: 0;
	font-weight: 400;
	font-size: 15.58px;
	line-height: 38.96px;
	color: var(--wp--preset--color--c-01);
	white-space: nowrap;
}

/* On the page a click on the caption must reach the card's link under it. In the editor the caption
 * is the client's text and must take the click itself (the editor marks every block with
 * block-editor-block-list__block; the page never does). */
.mn-hero .mn-hero__card:not(.block-editor-block-list__block) .wp-element-caption {
	pointer-events: none;
}

.mn-hero .mn-hero__card .wp-element-caption::before {
	content: "";
	flex: 0 0 25.32px;
	height: 1.17px;
	background-color: var(--wp--preset--color--c-01);
}

/* ---- 1024 and up: N whole cards and a peek, cut at the window edge (R6b) ----
 * The track's right padding goes: its content box runs from the line to the window edge, and a
 * spacer the size of the peek ends the row, so each step lands a card on the line and the wrap
 * comes after a whole number of steps. The card keeps the drawn proportions, corner (66.22 =
 * 38.634 % of the width, 25.854 % of the height) and caption centre (83.659 % down), as R5 does
 * below 1024. */
@media (min-width: 1024px) {
	.mn-hero .mn-hero__track {
		--mn-row-n: 6;
		--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-hero-gap) - var(--mn-row-peek)) / var(--mn-row-n), (100% - var(--mn-row-n) * var(--mn-hero-gap)) / (var(--mn-row-n) + 0.35));
		padding-right: 0;
	}

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

	.mn-hero .mn-hero__card {
		flex-basis: var(--mn-row-card);
		width: var(--mn-row-card);
		height: auto;
		aspect-ratio: 171.405 / 256.133;
	}

	.mn-hero .mn-hero__card a,
	.mn-hero .mn-hero__card img {
		border-radius: 38.634% / 25.854%;
	}

	.mn-hero .mn-hero__card .wp-element-caption {
		top: calc(83.659% - 19.5px);
	}
}

@media (min-width: 1024px) and (max-width: 1349.98px) {
	.mn-hero .mn-hero__track {
		--mn-row-n: 5;
	}
}

@media (min-width: 1024px) and (max-width: 1119.98px) {
	.mn-hero .mn-hero__track {
		--mn-row-n: 4;
	}
}

/* ---- above 1440: the strip inside the hero's own column (R7b, the operator's ruling) ----
 * The other homepage rows become full-width bands above 1440 (assortment.css explains the rule).
 * The strip does not: it sits on the hero photo directly under the column's text block (nav, logo,
 * title, lead), and as a band it hung past that column on both sides (all three reviewers pointed
 * at it). So its band is the column itself, from the content line to the content line (1176 wide
 * at every width above 1440), with the same rule inside it: whole cards fill it exactly, N nearest
 * a target of 1.15 x the drawn card. That is 5 cards of 196.25 (1.145 x the drawn 171.405; 6 would
 * be 155.4, under the drawn size), at every width above 1440. The arrows stay on the column's right
 * edge, which is now the strip's own edge too. The 6 px above and below stay (focus rings). ---- */
@media (min-width: 1440.02px) {
	.mn-hero .mn-hero__track {
		--mn-band: max(var(--mn-gutter), (100% - var(--mn-content)) / 2);
		--mn-band-room: 6px;
		--mn-row-n: 5;
		--mn-row-max: 231.4px;
		width: auto;
		margin: -6px calc(var(--mn-band) - var(--mn-band-room));
		padding: 6px 0 6px var(--mn-band-room);
		scroll-padding-inline: var(--mn-band-room);
	}

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

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

	.mn-hero .mn-hero__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-hero .mn-hero__strip.is-fit .mn-hero__controls,
	.mn-hero .mn-hero__strip:not(.block-editor-block-list__block):not(:has([data-mn-carousel-ready])) .mn-hero__controls {
		visibility: hidden;
	}
}

/* ---- arrows ---- */

/* the group is the drawn 387:3256 box: the two arrows only, on the container's right edge */
.mn-hero .mn-hero__cover .mn-hero__controls {
	display: flex;
	gap: 35.12px;
	width: fit-content;
	margin: 35.75px max(var(--mn-gutter), (100% - var(--mn-content)) / 2) 0 auto;
}

.mn-hero .mn-hero__arrow {
	width: 30px;
	height: 30px;
	margin: 0;
}

.mn-hero .mn-hero__arrow img {
	display: block;
	width: 30px;
	height: 30px;
}

/* ---- below the desktop header (1176): the 84 px bar is laid over the photo ---- */

@media (max-width: 1175.98px) {
	.mn-hero .mn-hero__cover {
		min-height: 0;
		padding-top: 164px;
	}
}

@media (max-width: 1023.98px) {
	.mn-hero .mn-hero__head {
		flex-direction: column;
		gap: 0;
	}

	/*
	 * The next card peeks in at every width (R5, G2 defect 3; the intake's mobile rule "swipe cards
	 * with the next card peeking in"). At the drawn 171.405 px a card's edge falls wherever the
	 * window ends: at 390 and 768 the last card fitted whole with nothing after it, at 375 the next
	 * one showed 98 %. So below the desktop strip the card is sized from the window instead: from
	 * the content line to the window's right edge (the track's content box + one line) fit N whole
	 * cards, their N gaps and a share F of the next card, never wider than CAP (then the share
	 * grows, to 58 % at most). Measured at every width 320-1023 (.dc/r5/hero-sweep-after.json), in
	 * px of the next card:
	 *   320-359    N 1, F 0.6    card 177.5-201.9   peek 107-121
	 *   360-529    N 2, F 0.3    card 133.9-185     peek 40-107  (CAP 185 from 478)
	 *   530-709    N 3, F 0.3    card 140-185       peek 42-86   (CAP 185 from 679)
	 *   710-781    N 4, F 0.3    card 145.6-162.1   peek 44-49
	 *   782-879    N 3, F 0.45   card 178.5-206.6   peek 80-93   (the drawn 48.694 gap)
	 *   880-1023   N 4, F 0.35   card 152.9-185.8   peek 54-65
	 * At least 71 px of the peeking card stays hidden at every width. The card keeps the drawn proportions (171.405 x 256.133), corner (66.22 = 38.634 % of the
	 * width, 25.854 % of the height) and caption centre (83.659 % down); the first card stays on
	 * the content line. 1024 and up is the drawn strip, untouched.
	 */
	.mn-hero .mn-hero__track {
		--mn-hero-n: 4;
		--mn-hero-f: 0.35;
		--mn-hero-cap: 1000px;
	}

	.mn-hero .mn-hero__card {
		flex-basis: min((100% + var(--mn-gutter) - var(--mn-hero-n) * var(--mn-hero-gap)) / (var(--mn-hero-n) + var(--mn-hero-f)), var(--mn-hero-cap));
		width: min((100% + var(--mn-gutter) - var(--mn-hero-n) * var(--mn-hero-gap)) / (var(--mn-hero-n) + var(--mn-hero-f)), var(--mn-hero-cap));
		height: auto;
		aspect-ratio: 171.405 / 256.133;
	}

	.mn-hero .mn-hero__card a,
	.mn-hero .mn-hero__card img {
		border-radius: 38.634% / 25.854%;
	}

	.mn-hero .mn-hero__card .wp-element-caption {
		top: calc(83.659% - 19.5px);
	}
}

@media (max-width: 879.98px) {
	.mn-hero .mn-hero__track {
		--mn-hero-n: 3;
		--mn-hero-f: 0.45;
	}
}

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

	.mn-hero .mn-hero__cover {
		padding: 124px 0 32px;
	}

	.mn-hero .mn-hero__lead {
		margin-top: 12px;
		font-size: var(--wp--preset--font-size--s-04);
		line-height: 28px;
	}

	.mn-hero .mn-hero__badges {
		gap: 14px;
		margin-top: 24px;
	}

	.mn-hero .mn-hero__badge {
		width: 64px;
		height: 64px;
	}

	.mn-hero .mn-hero__cover .mn-hero__strip {
		margin-top: 40px;
	}

	.mn-hero .mn-hero__track {
		--mn-hero-gap: 16px;
		--mn-hero-n: 4;
		--mn-hero-f: 0.3;
	}

	/* swipe on touch; the arrows are hidden like the other carousels on the page */
	.mn-hero .mn-hero__cover .mn-hero__controls {
		display: none;
	}
}

/* the peek bands below 782 (see the 1023.98 block) */
@media (max-width: 709.98px) {
	.mn-hero .mn-hero__track {
		--mn-hero-n: 3;
		--mn-hero-cap: 185px;
	}
}

@media (max-width: 529.98px) {
	.mn-hero .mn-hero__track {
		--mn-hero-n: 2;
	}
}

@media (max-width: 359.98px) {
	.mn-hero .mn-hero__track {
		--mn-hero-n: 1;
		--mn-hero-f: 0.6;
		--mn-hero-cap: 1000px;
	}
}