/*
 * Lighting - homepage 371:2904 "Apšvietimas, kuris kuria nuotaiką" (instance of component 2:471;
 * the night state is the variant 2:476). Values read from the nodes, frame 1440:
 *   section 1440 x 686; photo FILL (cover) 2:456 day / 2:477 night
 *   overlay 2:508: linear top to bottom, #1A1A1A 100 % to #737373 0 %, fill opacity 0.8. Replaced
 *     by a measured black scrim (R7a, below), since the texts now sit on the photo itself.
 *   title 2:461: 979 wide centred, 69 px down, "Standerd" 600 118.65/113.71 white (one-off font:
 *     Geist 600 at the drawn size, see the report)
 *   toggle 2:470: 131.90 x 51.55 at y 327, radius 150.35 (a pill); day #D5D5D5, knob 38.66 white
 *     at 8.6 / 6.4, label "Diena" Inter 500 21.23/28.02 #2F110F at 54.6 / 12.1. Night 2:487:
 *     #034592, knob at 86.42, label "Naktis" white at 15.16. Inter is a one-off: Geist 500.
 *     Prototype: click changes to the variant with SMART_ANIMATE, ease-in-out, 300 ms.
 *   cards 254 x 211, from the container's left edge (132 at 1440): +15 / y 341, centred / y 446,
 *     right edge -48 / y 359; text Geist 400 20/26 white, 212 wide, 28 px in, 26 px down.
 *   glass ("Glass effect", component 51:73) on each card: 11 fluted strips with a background blur.
 *     NOT BUILT (R7a, operator ruling 2026-10-15, a disclosed departure from the frame): the three
 *     blurred, fluted squares made the section read as four images. The texts keep the drawn card
 *     boxes (position, size, padding) and sit directly on the one photo; nothing draws a rectangle.
 *     R6b's glass, tint and strips are in git history (adffaf3, e9fb1af) if a design asks again.
 * Below 1024 px the overlaid pieces are unstacked into reading order: title, toggle, the three
 * texts in one column (intake reference pass).
 */

.mn-lighting {
	--mn-lighting-night: #034592; /* 2:484, not in the palette */
	--mn-lighting-ease: 300ms cubic-bezier(0.42, 0, 0.58, 1);
	position: relative;
	isolation: isolate;
	overflow: hidden;
	height: 686px;
	color: var(--wp--preset--color--c-01);
}

/* ---- photo, both states, under everything ----
 * Position rules carry two classes: the block editor sets position: relative on every block with
 * (0,2,0), and a one-class rule would lose to it there. */

.mn-lighting .mn-lighting__media {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.mn-lighting .mn-lighting__photo {
	position: absolute;
	inset: 0;
	margin: 0;
	transition: opacity var(--mn-lighting-ease);
}

.mn-lighting .mn-lighting__photo img {
	display: block;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	object-position: 50% 50%;
}

.mn-lighting .mn-lighting__photo--night {
	opacity: 0;
}

.mn-lighting.is-night .mn-lighting__photo--night {
	opacity: 1;
}

/*
 * The scrim (R7a): one soft black gradient over the whole photo, both states, the only thing that
 * keeps the white letters readable now that the cards have no glass. It replaces the drawn overlay
 * (#1A1A1A 80 % at the top falling to #737373 0 % at the bottom; V1 held it darker mid-way): that
 * was darkest at the top and clear where the texts sit, the opposite of what they need, and its
 * grey stops haze the photo where black only dims it. The values are the least that hold, in 1 %
 * steps, measured as V1 did (lightest pixel behind every glyph box, text shadow not credited,
 * both photos, widths 390-2560, .dc/r7a): the title band 42 % (3:1 for the 118 px title; 41 %
 * leaves 2.96:1 at 1024), the text band 54 % (4.5:1; 53 % leaves 4.42:1 at 1440, night). The
 * texts' lightest pixels are near-white in both photos (the gaps between the fence slats by day,
 * the lamps by night), so both states need the same scrim. The ramp between the bands is 55 px.
 */
.mn-lighting .mn-lighting__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		rgb(0 0 0 / 0.42) 0%,
		rgb(0 0 0 / 0.42) 45%,
		rgb(0 0 0 / 0.54) 53%,
		rgb(0 0 0 / 0.54) 100%
	);
	pointer-events: none;
}

/* ---- content ---- */

.mn-lighting__inner {
	position: relative;
	box-sizing: border-box;
	width: min(var(--mn-content, 1176px), 100% - 2 * var(--mn-gutter, 20px));
	height: 100%;
	margin-inline: auto;
	padding-top: 69px;
}

/*
 * Drawn as a 979 px box breaking after "kuris". In Geist 600 at the drawn 118.65 px that first
 * line measures 1045.8 px, so the box is the container (any width from 1046 to 1361 keeps the
 * drawn break). Below 1216 px the container narrows, so the size steps down with it (line one is
 * 8.814 em wide) instead of falling to three lines over the cards.
 */
.mn-lighting .mn-lighting__title {
	margin: 0 auto;
	font-family: var(--wp--preset--font-family--geist);
	font-weight: 600;
	font-size: min(var(--wp--preset--font-size--s-21), 11.2vw - 6px);
	line-height: 0.95833;
	letter-spacing: 0;
	text-align: center;
	color: var(--wp--preset--color--c-01);
}

/* ---- the day / night toggle ---- */

.mn-lighting__switch {
	position: relative;
	width: 131.9px;
	height: 51.55px;
	/* the drawn title box is 228 tall and the toggle starts 30 px under it (y 327) */
	margin: 30.58px auto 0;
	border-radius: 150.35px;
	background-color: var(--wp--preset--color--c-15);
	transition: background-color var(--mn-lighting-ease);
}

/* the knob */
.mn-lighting__switch::before {
	content: "";
	position: absolute;
	top: 6.4px;
	left: 8.6px;
	z-index: 1;
	width: 38.66px;
	height: 38.66px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--c-01);
	transition: left var(--mn-lighting-ease);
	pointer-events: none;
}

.mn-lighting .mn-lighting__day-label,
.mn-lighting .mn-lighting__toggle .wp-block-button__link {
	font-family: var(--wp--preset--font-family--geist);
	font-weight: 500;
	font-size: 21.23px;
	line-height: 28.02px;
	letter-spacing: 0;
	white-space: nowrap;
}

/*
 * Each word is centred, both ways, in the part of the pill the knob leaves free: the knob sits 8.6
 * in from its end, so the word's room runs from the knob's inner edge to 8.6 from the other end
 * (day: 47.26 .. 123.3, night: 8.6 .. 86.42). Drawn, "Diena" starts at 54.6 and "Naktis" at 15.16;
 * both are now exactly centred in that room whatever the word, and "Naktis" no longer sits 5.7 px
 * low (a button centres its content in the leftover height under its padding).
 */
.mn-lighting .mn-lighting__day-label {
	position: absolute;
	inset: 0 8.6px 0 47.26px;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	color: var(--wp--preset--color--c-14);
	transition: opacity var(--mn-lighting-ease);
	pointer-events: none;
}

/* the real button covers the whole pill; its own word is the night label */
.mn-lighting .mn-lighting__actions {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: block;
	margin: 0;
	gap: 0;
}

.mn-lighting .mn-lighting__toggle {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
}

.mn-lighting .mn-lighting__toggle .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	margin: 0;
	/* the night word's room: 8.6 .. 86.42 (the knob's left edge at night) */
	padding: 0 calc(100% - 86.42px) 0 8.6px;
	border: 0;
	border-radius: 150.35px;
	background: transparent;
	color: transparent;
	text-align: center;
	cursor: pointer;
	transition: color var(--mn-lighting-ease);
}

.mn-lighting.is-night .mn-lighting__switch {
	background-color: var(--mn-lighting-night);
}

.mn-lighting.is-night .mn-lighting__switch::before {
	left: 86.42px;
}

.mn-lighting.is-night .mn-lighting__day-label {
	opacity: 0;
}

.mn-lighting.is-night .mn-lighting__toggle .wp-block-button__link {
	color: var(--wp--preset--color--c-01);
}

/* ---- the three texts, on the photo (the drawn card boxes, drawing nothing) ---- */

.mn-lighting .mn-lighting__cards {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.mn-lighting .mn-lighting__card {
	position: absolute;
	box-sizing: border-box;
	width: 254px;
	/* the drawn card box; it draws nothing now and only sizes the editor's selection / hit area */
	min-height: 211px;
	padding: 26px 14px 26px 28px;
	pointer-events: auto;
}

.mn-lighting .mn-lighting__card--left {
	top: 341px;
	left: 15px;
}

.mn-lighting .mn-lighting__card--middle {
	top: 446px;
	left: calc(50% - 127px);
}

.mn-lighting .mn-lighting__card--right {
	top: 359px;
	right: 48px;
}

.mn-lighting .mn-lighting__card-text {
	max-width: 212px;
	margin: 0;
	font-family: var(--wp--preset--font-family--geist);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--s-05);
	line-height: 26px;
	letter-spacing: 0;
	color: var(--wp--preset--color--c-01);
	/* R7a: a soft shadow on the letters only, for the busy fence slats behind them; the scrim alone
	   already holds 4.5:1 (the measurement does not credit this) */
	text-shadow: 0 1px 2px rgb(0 0 0 / 0.5);
}

/* Without the script the toggle would be a dead control: it shows once lighting.js has wired it. */
.mn-lighting:not([data-mn-lighting-ready]) .mn-lighting__switch {
	visibility: hidden;
}

/* Forced colours override the transparent night word: show only the button's own word there. */
@media (forced-colors: active) {
	.mn-lighting .mn-lighting__day-label {
		display: none;
	}

	.mn-lighting .mn-lighting__toggle .wp-block-button__link {
		color: ButtonText;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mn-lighting .mn-lighting__photo,
	.mn-lighting__switch,
	.mn-lighting__switch::before,
	.mn-lighting .mn-lighting__day-label,
	.mn-lighting .mn-lighting__toggle .wp-block-button__link {
		transition: none;
	}
}

/* ---- below 1024 px: one column in reading order (design silent; intake reference pass) ---- */

@media (max-width: 1023.98px) {
	.mn-lighting {
		height: auto;
	}

	.mn-lighting__inner {
		height: auto;
		padding-block: 64px;
	}

	/* the same scrim for the column. The ramp is in px, not %: the section's height follows the
	   client's texts, so a % stop would slide up into the first text if they grew. Measured 360-1023:
	   the title ends at 153-236 px (a line in the ramp only gets darker), the first text starts at
	   293 px or lower. Title band 42 % (41 % leaves 2.98:1 at 1010, night), texts 54 % (53 %: 4.47:1
	   at 390, day) */
	.mn-lighting .mn-lighting__media::after {
		background: linear-gradient(
			to bottom,
			rgb(0 0 0 / 0.42) 0,
			rgb(0 0 0 / 0.42) 190px,
			rgb(0 0 0 / 0.54) 270px,
			rgb(0 0 0 / 0.54) 100%
		);
	}

	.mn-lighting .mn-lighting__title {
		font-size: clamp(40px, 10vw, 83px);
	}

	.mn-lighting__switch {
		margin-top: 30px;
	}

	.mn-lighting .mn-lighting__cards {
		position: static;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 16px;
		margin-top: 40px;
		pointer-events: auto;
	}

	.mn-lighting .mn-lighting__card {
		position: relative;
		inset: auto;
		width: 100%;
		max-width: 520px;
		min-height: 0;
		padding: 26px 28px;
	}

	/*
	 * The photo is drawn cover-cropped; in this taller box let the img take its real rendered width
	 * (height-led, centred) so sizes=auto picks a file that wide instead of upscaling a narrow one.
	 */
	.mn-lighting .mn-lighting__photo img {
		position: absolute;
		top: 0;
		left: 50%;
		width: auto;
		min-width: 100%;
		max-width: none;
		height: 100% !important;
		transform: translateX(-50%);
	}

	.mn-lighting .mn-lighting__card-text {
		max-width: none;
	}
}

/*
 * In the block editor (no script, no is-night) both states must stay editable: the two words sit
 * side by side, and the night photo shows as a small inset at the bottom left (a corner no card
 * covers) so the client can select and replace it. Editor only: .block-editor-block-list__block
 * exists nowhere on the front end.
 */
.mn-lighting.block-editor-block-list__block .mn-lighting__switch {
	visibility: visible;
	display: flex;
	align-items: center;
	gap: 12px;
	width: fit-content;
	height: auto;
	padding: 8px 8px 8px 16px;
}

.mn-lighting.block-editor-block-list__block .mn-lighting__switch::before {
	display: none;
}

.mn-lighting.block-editor-block-list__block .mn-lighting__day-label,
.mn-lighting.block-editor-block-list__block .mn-lighting__actions {
	position: static;
}

.mn-lighting.block-editor-block-list__block .mn-lighting__toggle .wp-block-button__link {
	width: auto;
	height: auto;
	padding: 6px 14px;
	background-color: var(--mn-lighting-night);
	color: var(--wp--preset--color--c-01);
}

.mn-lighting.block-editor-block-list__block .mn-lighting__photo--night {
	inset: auto auto 0 0;
	width: 20%;
	height: 20%;
	opacity: 1;
}