/*
 * Pirkimo gidas (frame 495:2957, page /pirkimo-gidas/ 374) - the page title, the lead and the 8 steps.
 * The page title style is also the Naujienos / patarimai title (527:1179). The article cards, the
 * Straipsniai row and the posts grid are in articles.css. Values read from the nodes (1440 frame,
 * y from the frame's top; the header box ends at 193):
 *
 *   title  495:2958 / 527:1179  132,208 one line in a 122 px box, Geist 600 70/122 #C69A37 (C07);
 *          the next section starts at 377 (47 under the box)
 *   lead   495:3023  132,377 1177 x 276 (6 lines), Geist 500 36/46 #424242 (C02); steps at 708 (55)
 *   steps  495:3024  a column: a 1 px #424242 rule (Line 4/5), 43, a step, 43, a rule ... the 9th rule
 *          at 3352. The Straipsniai row starts at 3452 (100 under the last rule's top).
 *   step   a row centred on its middle: the number (Geist 400 56/46 #424242, right-aligned in a box
 *          that hugs it), 72, the photo (ellipse 209 x 209, image fill), 72, the text column
 *          (heading Geist 500 36/46, 31 under it the text Geist 500 18/28, both #424242). The
 *          column is drawn 801 wide in steps 1-3 and 789 in 4-8 (and steps 2-3 run 13 px past the
 *          container); here it takes what is left of the 1176 line, so every step ends on it.
 *          Step 2's text is two paragraphs (a blank 28 px line between them, as drawn).
 * Below the drawn width (no frame; the intake's reference pass): gutters 20 px; under 1024 the gaps
 * and the photo shrink; under 782 a step stacks (number and photo on one line, the text under them),
 * the title steps down to the plain-page rule 38/51 and the lead to 24/34.
 */

.mn-gn-title,
.mn-gn-lead,
.mn-gn-steps {
	box-sizing: border-box;
	width: min(var(--mn-content, 1176px), 100% - 2 * var(--mn-gutter, 20px));
	margin-inline: auto;
	font-family: var(--wp--preset--font-family--geist);
	color: var(--wp--preset--color--c-02);
}

/* ---- page title (the 416:953 pattern, drawn 600 in the new frames) ---- */

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

/*
 * One 70 px line in the drawn 122 px box. A long title wraps, and 122 px between wrapped lines reads
 * as two titles, so the line is 1.1 and the padding restores the drawn box (the atlikti-darbai rule):
 * one line still measures 122 with its glyphs where they are drawn.
 */
.mn-gn-title .mn-gn-title__text {
	margin: 0;
	padding-block: calc((122px - 1.1em) / 2);
	font-family: var(--wp--preset--font-family--geist);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--s-18);
	line-height: 1.1;
	letter-spacing: 0;
	color: var(--wp--preset--color--c-07);
}

/* ---- lead ---- */

.mn-gn-lead {
	padding-bottom: 55px;
}

.mn-gn-lead .mn-gn-lead__text {
	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-02);
}

/* ---- the 8 steps ---- */

.mn-gn-steps {
	padding-bottom: 99px;
}

/* the rule above each step is its top border (1 px, then 42 to the row: the drawn 43 from the line's
 * middle); the last step also closes with one */
.mn-gn-steps .mn-gn-step {
	display: flex;
	align-items: center;
	gap: 72px;
	margin: 0;
	padding-block: 42px 43px;
	border-top: 1px solid var(--wp--preset--color--c-02);
}

.mn-gn-steps .mn-gn-step:last-child {
	border-bottom: 1px solid var(--wp--preset--color--c-02);
}

.mn-gn-steps .mn-gn-step__num {
	flex: 0 0 auto;
	margin: 0;
	font-weight: 400;
	/* drawn 56 px: no preset holds it */
	font-size: 56px;
	line-height: 46px;
	letter-spacing: 0;
	text-align: right;
	color: var(--wp--preset--color--c-02);
}

.mn-gn-steps .mn-gn-step__photo {
	flex: 0 0 209px;
	width: 209px;
	height: 209px;
	margin: 0;
	border-radius: 50%;
	overflow: hidden;
}

.mn-gn-steps .mn-gn-step__photo img {
	display: block;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	border-radius: 50%;
}

.mn-gn-steps .mn-gn-step__body {
	flex: 1 1 0;
	min-width: 0;
}

.mn-gn-steps .mn-gn-step__title {
	margin: 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-02);
}

.mn-gn-steps .mn-gn-step__text {
	margin: 31px 0 0;
	font-weight: 500;
	font-size: var(--wp--preset--font-size--s-04);
	line-height: 28px;
	letter-spacing: 0;
	color: var(--wp--preset--color--c-02);
}

/* a second paragraph (step 2) sits one blank 28 px line under the first, as drawn */
.mn-gn-steps .mn-gn-step__text + .mn-gn-step__text {
	margin-top: 28px;
}

/* step 1's text frame is drawn 273 high: a heading (46), 31, and a FIXED 196 px text box that holds 6
 * lines (168) with one empty line under them; the other steps hug their text. The row is that frame,
 * the photo and the number centred in it, so the first step keeps the 273 (the rows below then sit
 * where they are drawn). Narrower than 1024 the text wraps to more lines anyway. */
@media (min-width: 1024px) {
	.mn-gn-steps .mn-gn-step:first-child .mn-gn-step__body {
		min-height: 273px;
	}
}

/* ---- narrower than the drawn container ---- */

@media (max-width: 1023.98px) {
	.mn-gn-steps .mn-gn-step {
		gap: 40px;
	}

	.mn-gn-steps .mn-gn-step__photo {
		flex-basis: 160px;
		width: 160px;
		height: 160px;
	}

	.mn-gn-steps .mn-gn-step__title {
		font-size: var(--wp--preset--font-size--s-12);
		line-height: 36px;
	}

	.mn-gn-steps .mn-gn-step__text {
		margin-top: 20px;
	}
}

@media (max-width: 781.98px) {
	.mn-gn-title {
		padding-bottom: 24px;
	}

	.mn-gn-title .mn-gn-title__text {
		padding-block: 0;
		font-size: var(--wp--preset--font-size--s-14);
		line-height: 51px;
	}

	.mn-gn-lead {
		padding-bottom: 32px;
	}

	.mn-gn-lead .mn-gn-lead__text {
		font-size: var(--wp--preset--font-size--s-09);
		line-height: 34px;
	}

	.mn-gn-steps {
		padding-bottom: 64px;
	}

	/* number and photo on one line, the text under them */
	.mn-gn-steps .mn-gn-step {
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: center;
		gap: 20px 24px;
		padding-block: 31px 32px;
	}

	.mn-gn-steps .mn-gn-step__num {
		font-size: var(--wp--preset--font-size--s-15);
		line-height: 46px;
	}

	.mn-gn-steps .mn-gn-step__photo {
		width: 120px;
		height: 120px;
	}

	.mn-gn-steps .mn-gn-step__body {
		grid-column: 1 / -1;
	}

	.mn-gn-steps .mn-gn-step__title {
		font-size: var(--wp--preset--font-size--s-09);
		line-height: 31px;
	}

	.mn-gn-steps .mn-gn-step__text {
		margin-top: 12px;
		font-size: var(--wp--preset--font-size--s-03);
		line-height: 26px;
	}

	.mn-gn-steps .mn-gn-step__text + .mn-gn-step__text {
		margin-top: 26px;
	}
}