/*
 * Paslaugos (frame 495:1635, page /paslaugos/ 376) and ES Parama (frame 495:1748, page /es-parama/
 * 8105) - W2-U7. Every value is read from the frames' nodes (.dc/design/design.json); y values are
 * the frame's, at 1440. Both pages use the Galerija template (header, content, footer; no consult
 * block is drawn on either).
 *
 *   495:1636 / 495:1749   page title     y 208, Geist 600 70/122 #C69A37 (the 416:953 pattern as
 *                                        drawn), 15 px under the 193 px header box, 47 px above the
 *                                        section that follows (377)
 *   495:1635.s03          service cards  three #F8F8F8 cards 1176 wide, radius 12, at 377 / 1126 /
 *                                        1890 (32 and 47 apart as drawn), 717 tall; photo 506 x 651
 *                                        radius 10, 33 px from the card's top and bottom; the copy
 *                                        column is centred on the card's height. The last card ends
 *                                        2607; the footer rule is drawn at 2690 (82 px).
 *       photo left  (cards 1 and 3): 22 | photo 506 | 44 | copy 556 | 48
 *       photo right (card 2):        39 | copy 533 | 73 | photo 506 | 25
 *       title Geist 500 50/65 #CD9F3F (514 wide in the photo-left cards), text Geist 500 16/24
 *       #424242, sub-title Geist 400 24/40 #04448C, list rows 16/24 with the text 24 px in (a 4 x 4
 *       bullet 10 px in, 11 down; a number 6 px in), link "Reikalinga konsultacija?" Geist 500
 *       20.21/28.88 #04448C with the 20 x 20 arrow 10 px after it, 6 px down (2 px stroke #04448C).
 *       The three cards are drawn with different gaps inside the copy column; each is built as drawn
 *       (--mn-sv-g1..g4 below).
 *   495:1748.s03          EU notice      the official EU co-funding mark (raster, 1176 x 247, blend
 *                                        DARKEN so its white sits on the page grey), 47 px, the
 *                                        notice title Geist 500 36/46 #000, 31 px, the notice Geist
 *                                        500 18/28 #424242 with one empty 28 px line between
 *                                        paragraphs. It ends 1158; the footer rule is drawn at 1668.
 *
 * The lists are runs of paragraphs (not core/list): the section lock lets the client edit words in
 * paragraphs and headings, and freezes every list block. The numbers and bullets are drawn here.
 *
 * Below 1024 (no mobile frame; intake reference pass): a card is one column in its drawn reading
 * order, the photo square (the live photos are 1000 x 1000, so nothing is cropped), the card title
 * 36/46 as the consult block's; below 782 the page title is 38/51 as Galerija's. Side gutter 20 px.
 */

.mn-sv-title,
.mn-sv-services,
.mn-eu {
	--mn-sv-inline: max(var(--mn-gutter, 20px), (100% - var(--mn-content, 1176px)) / 2);
	box-sizing: border-box;
	padding-inline: var(--mn-sv-inline);
	font-family: var(--wp--preset--font-family--geist);
	letter-spacing: 0;
}

/* ---- 495:1636 / 495:1749 page title: one 70 px line in a 122 px box ---- */

.mn-sv-title {
	padding-block: 15px 47px;
}

.mn-sv-title > .mn-sv-title__heading {
	box-sizing: border-box;
	width: fit-content;
	max-width: 100%;
	margin: 0;
	font-family: var(--wp--preset--font-family--geist);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--s-18);
	line-height: 122px;
	letter-spacing: 0;
	color: var(--wp--preset--color--c-07);
}

/* ---- 495:1635.s03 service cards ---- */

.mn-sv-services {
	padding-bottom: 82px;
}

.mn-sv-card {
	/* the copy column's inner gaps: title > text > sub-title > list > link (card 1 as drawn) */
	--mn-sv-g1: 26px;
	--mn-sv-g2: 26px;
	--mn-sv-g3: 6px;
	--mn-sv-g4: 26px;
	--mn-sv-copy: 556px;
	--mn-sv-copy-pad: 0px;
	--mn-sv-copy-top: 0px;
	--mn-sv-copy-align: center;
	--mn-sv-title-w: 514px;
	--mn-sv-text-w: 556px;
	display: flex;
	align-items: stretch;
	gap: 44px;
	box-sizing: border-box;
	padding: 33px 48px 33px 22px;
	border-radius: 12px;
	background: var(--wp--preset--color--c-04);
	color: var(--wp--preset--color--c-02);
}

.mn-sv-card + .mn-sv-card {
	margin-top: 32px;
}

.mn-sv-card.mn-sv-card--photo-right {
	gap: 73px;
	padding: 33px 25px 33px 39px;
	--mn-sv-copy: 533px;
	--mn-sv-title-w: 533px;
	--mn-sv-text-w: 533px;
}

/* card 1 as drawn: its copy starts 42 px into the card (photo 33); a taller copy keeps 42 clear */
.mn-sv-card.mn-sv-card--1 {
	--mn-sv-copy-pad: 9px;
}

/* card 2 as drawn. Its copy group is drawn at 99.3 % scale (title box 193.6 for three 65 px
 * lines, text 94.3 for four 24 px lines), so the drawn 35 px gap above the link lands the link
 * 650.5 px into the card; at full scale that position is a 29 px gap (and the card stays 717). */
.mn-sv-card.mn-sv-card--2 {
	--mn-sv-g3: 14px;
	--mn-sv-g4: 29px;
	/* the drawn link row (495:1739) starts 20 px right of the copy column (x191 vs 171); cards 1 and 3 are flush */
	--mn-sv-link-indent: 20px;
}

/* card 3 as drawn: 47 px under card 2, text 514 wide, its own gaps, and its copy NOT centred:
 * it starts 55 px into the card (22 below the photo's top) */
.mn-sv-card.mn-sv-card--3 {
	--mn-sv-copy-align: flex-start;
	--mn-sv-copy-top: 22px;
	--mn-sv-g1: 17px;
	--mn-sv-g2: 33px;
	--mn-sv-g3: 17px;
	--mn-sv-g4: 33px;
	--mn-sv-text-w: 514px;
}

.mn-sv-card + .mn-sv-card.mn-sv-card--3 {
	margin-top: 47px;
}

/* the photo fills its column at the card's full height (651 drawn), cropped like the drawn FILL */
.mn-sv-card > .mn-sv-card__photo {
	position: relative;
	/* between 1024 and 1176 the photo and the copy give up width in proportion */
	flex: 0 1 506px;
	min-width: 0;
	min-height: 651px;
	margin: 0;
	overflow: hidden;
	border-radius: 10px;
}

.mn-sv-card > .mn-sv-card__photo img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	border-radius: 10px;
}

/* the copy column is centred on the card; a copy taller than the photo grows the card */
.mn-sv-card > .mn-sv-card__copy {
	flex: 0 1 var(--mn-sv-copy);
	min-width: 0;
	align-self: var(--mn-sv-copy-align);
	padding-block: calc(var(--mn-sv-copy-pad) + var(--mn-sv-copy-top)) var(--mn-sv-copy-pad);
	counter-reset: mn-sv-step;
}

.mn-sv-card .mn-sv-card__title {
	max-width: var(--mn-sv-title-w);
	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);
}

.mn-sv-card .mn-sv-card__text {
	max-width: var(--mn-sv-text-w);
	margin: var(--mn-sv-g1) 0 0;
	font-weight: 500;
	font-size: var(--wp--preset--font-size--s-03);
	line-height: 24px;
}

.mn-sv-card .mn-sv-card__subtitle {
	margin: var(--mn-sv-g2) 0 0;
	font-family: var(--wp--preset--font-family--geist);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--s-09);
	line-height: 40px;
	letter-spacing: 0;
	color: var(--wp--preset--color--c-03);
}

.mn-sv-card .mn-sv-list {
	margin-top: var(--mn-sv-g3);
}

.mn-sv-card .mn-sv-list > .mn-sv-list__item {
	position: relative;
	margin: 0;
	padding-left: 24px;
	font-weight: 500;
	font-size: var(--wp--preset--font-size--s-03);
	line-height: 24px;
}

/* the drawn bullet: a 4 x 4 dot in the text colour, 10 px in, 11 px down the first line */
.mn-sv-card .mn-sv-list--bullets > .mn-sv-list__item::before {
	content: "";
	position: absolute;
	top: 11px;
	left: 10px;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--wp--preset--color--c-02);
}

/* the drawn number: 6 px in, Geist 700 like the drawn "1." (R8b item 6: items 1-9 keep that exact place,
 * measured: a one-digit "1." spans 6 to 17 px; the text starts at 24 px). From the tenth item (the client
 * adds steps) the number is two digits, "10." is 21.8 px wide, so it starts at the item's left edge
 * (0 to 21.8) and still ends 2 px before the text instead of running 3.8 px into it. */
.mn-sv-card .mn-sv-list--steps > .mn-sv-list__item {
	counter-increment: mn-sv-step;
}

.mn-sv-card .mn-sv-list--steps > .mn-sv-list__item::before {
	content: counter(mn-sv-step) ".";
	position: absolute;
	top: 0;
	left: 6px;
	font-weight: 700;
}

.mn-sv-card .mn-sv-list--steps > .mn-sv-list__item:nth-child(n + 10)::before {
	left: 0;
}

/* "Reikalinga konsultacija?" and its arrow: one link, the label's link stretched over the row */
.mn-sv-card .mn-sv-card__more {
	position: relative;
	display: flex;
	align-items: flex-start;
	width: fit-content;
	max-width: 100%;
	margin-top: var(--mn-sv-g4);
	margin-left: var(--mn-sv-link-indent, 0px);
}

.mn-sv-card .mn-sv-card__more-label {
	margin: 0;
	font-weight: 500;
	font-size: 20.21px;
	line-height: 28.88px;
	color: var(--wp--preset--color--c-03);
}

.mn-sv-card .mn-sv-card__more-label a {
	color: inherit;
	text-decoration: none;
}

.mn-sv-card .mn-sv-card__more-label:not(.block-editor-block-list__block) a::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* the arrow, drawn here and not a photo block (R8b item 5). The SVG is the 20 x 20 arrow plus its 2 px
 * stroke (21 x 22): its path starts 1 px in. Colour C03 (#04448C) as drawn. */
.mn-sv-card .mn-sv-card__more::after {
	content: "";
	flex: 0 0 auto;
	width: 21px;
	height: 22px;
	margin: 5px 0 0 9px;
	background-color: var(--wp--preset--color--c-03);
	-webkit-mask: url("../../img/services/arrow-right.svg") no-repeat center / 100% 100%;
	mask: url("../../img/services/arrow-right.svg") no-repeat center / 100% 100%;
}

/* ---- 495:1748.s03 EU notice ---- */

.mn-eu {
	padding-bottom: 509px;
	color: var(--wp--preset--color--c-02);
}

.mn-eu .mn-eu__logo {
	margin: 0;
}

/* the drawn layer blends DARKEN: the mark's white background takes the page grey */
.mn-eu .mn-eu__logo img {
	display: block;
	width: 100%;
	height: auto;
	mix-blend-mode: darken;
}

.mn-eu .mn-eu__title {
	margin: 47px 0 0;
	font-family: var(--wp--preset--font-family--geist);
	font-weight: 500;
	font-size: var(--wp--preset--font-size--s-13);
	line-height: 46px;
	letter-spacing: 0;
	color: var(--wp--preset--color--c-11);
}

.mn-eu .mn-eu__text {
	margin: 31px 0 0;
	font-weight: 500;
	font-size: var(--wp--preset--font-size--s-04);
	line-height: 28px;
}

.mn-eu .mn-eu__text + .mn-eu__text {
	margin-top: 28px;
}

/* ---- below 1024: one column ---- */

@media (max-width: 1023.98px) {
	.mn-sv-card,
	.mn-sv-card.mn-sv-card--photo-right {
		flex-direction: column;
		gap: 24px;
		padding: 20px;
	}

	.mn-sv-card > .mn-sv-card__photo {
		flex: 0 0 auto;
		width: 100%;
		min-height: 0;
		aspect-ratio: 1 / 1;
	}

	.mn-sv-card > .mn-sv-card__copy {
		flex: 0 0 auto;
		align-self: stretch;
		padding-block: 0 4px;
	}

	.mn-sv-card .mn-sv-card__title {
		max-width: none;
		font-size: var(--wp--preset--font-size--s-13);
		line-height: 46px;
	}

	.mn-sv-card .mn-sv-card__text {
		max-width: none;
	}

	/* the drawn indent belongs to the two-column card; stacked, the link is flush with the copy */
	.mn-sv-card.mn-sv-card--2 {
		--mn-sv-link-indent: 0px;
	}

	.mn-eu {
		padding-bottom: 82px;
	}
}

/* the link row fits the narrowest phones on one line (as the consult block's label below 360) */
@media (max-width: 359.98px) {
	.mn-sv-card .mn-sv-card__more-label {
		font-size: var(--wp--preset--font-size--s-04);
		line-height: 28.88px;
	}
}

@media (max-width: 781.98px) {
	.mn-sv-title > .mn-sv-title__heading {
		font-size: var(--wp--preset--font-size--s-14);
		line-height: 51px;
	}

	.mn-sv-card + .mn-sv-card,
	.mn-sv-card + .mn-sv-card.mn-sv-card--3 {
		margin-top: 24px;
	}

	.mn-sv-card .mn-sv-card__subtitle {
		line-height: 32px;
	}

	.mn-eu .mn-eu__title {
		margin-top: 32px;
		font-size: var(--wp--preset--font-size--s-12);
		line-height: 36px;
	}

	.mn-eu .mn-eu__text {
		margin-top: 24px;
	}
}