/*
 * Product page parts (W2-U2-product-parts): the page title of the product template, the product
 * intro and the consult-trust block. Used by templates/page-product.html on every product page and
 * on Blokeliai tvoroms.
 *
 * Read from frame 495:2174 (Vidinis tvoros puslapis, 1440) and its Blokeliai copies 495:984 /
 * 495:1114 / 495:1303 (identical geometry):
 *
 *   495:2175 title     Geist 600 70/122 #C69A37 (C07) at 132,208 - 15 under the 193 px header box,
 *                      47 to the intro (377). Same look as 416:953 at the weight the new frames
 *                      draw (I2 Q15 default: new pages as drawn, 600).
 *   495:2174.s03 intro text column 592 wide (Geist 500 18/28 #424242, one blank 28 px line between
 *                      paragraphs), photo 503 x 336 radius 10 at 804 (81 px gap), row 377..714;
 *                      62 px to the contact strip (776). Blokeliai's text opens with a bold line
 *                      Geist 700 26 whose line measures 31 (339 px box = 336 + 3).
 *   495:2248 consult-trust (1177 x 702, 117 px to the footer rule at 2437):
 *     panel  375 x 702 #054487 (C16) radius 15; content 53 in, 41 down, 278 wide:
 *            title Geist 700 36/46 #F2F2F2 (C06) 92 tall; 17 gap; text Geist 500 18/28 C06 196 tall;
 *            48 gap; photo 278 x 188 radius 15; 25 gap; button 278 x 54 #C69A37 radius 47.92,
 *            label Geist 500 20.97/29.95 white, 1.5 px inside stroke white 20 % fading to 0
 *            downwards; 41 to the panel bottom.
 *     card   766 x 465 #F8F8F8 (C04) radius 15, 35 right of the panel; content 72 in, 41 down:
 *            heading Geist 700 36/46 #CD9F3F (C05) 632 wide; 17 gap; text Geist 500 18/28 #424242
 *            588 wide, bold runs 700; 41 gap; stat Geist 700 31.15/50.51 #054487 with
 *            "7000 projektų." at 45.46 (an <em>, as the live page marks it); 66 to the card bottom.
 *     badges four 181 px badges in the card's width, 38 under the card (the 499:405 badges).
 *
 * Below 1024 px the intro's photo drops under the text and the consult-trust panel, card and badges
 * stack in reading order; below 782 px the gaps halve and the badges go two by two.
 */

/* ---- shared box: the 1176 px content column, never closer than the 20 px gutter ---- */

.mn-pt,
.mn-pi,
.mn-ct {
	box-sizing: border-box;
	width: min(var(--mn-content, 1176px), 100% - 2 * var(--mn-gutter, 20px));
	margin-inline: auto;
}

/* ---- 495:2175 page title: one 70 px line in a 122 px box. A long title wraps at 1.1 so two lines
 * do not read as two titles; the padding restores the drawn 122 px box for one line. ---- */

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

.mn-pt .mn-pt__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);
	overflow-wrap: anywhere;
}

/* ---- 495:2174.s03 product intro ---- */

.mn-pi {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	column-gap: 81px;
	padding-bottom: 62px;
}

.mn-pi .mn-pi__copy {
	flex: 0 1 592px;
	min-width: 0;
	padding-top: 1px;
	font-family: var(--wp--preset--font-family--geist);
	color: var(--wp--preset--color--c-02);
}

.mn-pi .mn-pi__copy > * {
	margin: 0;
}

/* one blank 28 px line between paragraphs, as the drawn text node */
.mn-pi .mn-pi__copy > * + * {
	margin-top: 28px;
}

.mn-pi .mn-pi__heading {
	font-family: var(--wp--preset--font-family--geist);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--s-11);
	line-height: 31px;
	letter-spacing: 0;
	color: var(--wp--preset--color--c-02);
}

.mn-pi .mn-pi__copy p,
.mn-pi .mn-pi__copy li {
	font-family: var(--wp--preset--font-family--geist);
	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);
}

.mn-pi .mn-pi__copy strong {
	font-weight: 700;
}

.mn-pi .mn-pi__photo {
	flex: 0 1 503px;
	min-width: 0;
	margin: 0;
}

.mn-pi .mn-pi__photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 503 / 336;
	object-fit: cover;
	border-radius: 10px;
}

/* ---- tables carried from the live pages (R8b item 13: the TablePress size tables of the mesh pages) ----
 * The design draws none, so this is the section's own type in a plain grid: Geist 500 16/24 #424242,
 * a 1 px rule in the same colour at 25 %, the header row bold on a grey band (#D5D5D5). A table with no
 * photo beside it takes the full line; a wide one scrolls inside its own figure, never the page. */
.mn-pi:has(.mn-pi__table):not(:has(.mn-pi__photo)) .mn-pi__copy {
	flex: 1 1 100%;
}

.mn-pi .mn-pi__table {
	max-width: 100%;
	margin-inline: 0;
	margin-bottom: 0;
	overflow-x: auto;
}

.mn-pi .mn-pi__table table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--wp--preset--font-family--geist);
	font-weight: 500;
	font-size: var(--wp--preset--font-size--s-03);
	line-height: 24px;
	color: var(--wp--preset--color--c-02);
}

.mn-pi .mn-pi__table th,
.mn-pi .mn-pi__table td {
	padding: 9px 14px;
	border: 1px solid rgb(66 66 66 / 0.25);
	text-align: left;
	vertical-align: top;
}

.mn-pi .mn-pi__table th {
	font-weight: 700;
	background: var(--wp--preset--color--c-15);
}

/* ---- 495:2248 consult-trust (template part consult-trust.html) ---- */

.mn-ct {
	display: flex;
	align-items: stretch;
	gap: 35px;
	padding-bottom: 117px;
	font-family: var(--wp--preset--font-family--geist);
}

.mn-ct .wp-block-image {
	margin: 0;
}

.mn-ct .mn-ct__panel {
	display: flex;
	flex-direction: column;
	flex: 0 0 375px;
	box-sizing: border-box;
	padding: 41px 44px 41px 53px;
	border-radius: 15px;
	background-color: var(--wp--preset--color--c-16);
	color: var(--wp--preset--color--c-06);
}

.mn-ct .mn-ct__title,
.mn-ct .mn-ct__heading {
	margin: 0;
	font-family: var(--wp--preset--font-family--geist);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--s-13);
	line-height: 46px;
	letter-spacing: 0;
}

.mn-ct .mn-ct__title {
	color: var(--wp--preset--color--c-06);
}

.mn-ct .mn-ct__text,
.mn-ct .mn-ct__lead {
	margin: 17px 0 0;
	font-family: var(--wp--preset--font-family--geist);
	font-weight: 500;
	font-size: var(--wp--preset--font-size--s-04);
	line-height: 28px;
	letter-spacing: 0;
}

.mn-ct .mn-ct__text {
	color: var(--wp--preset--color--c-06);
}

.mn-ct .mn-ct__photo {
	margin-top: 48px;
}

.mn-ct .mn-ct__photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 278 / 188;
	object-fit: cover;
	border-radius: 15px;
}

.mn-ct .mn-ct__actions {
	margin: 25px 0 0;
	gap: 0;
}

/* the pill is the button wrapper (the drawn frame "green 32"); the label's link covers it */
.mn-ct .mn-ct__button {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 278px;
	max-width: 100%;
	height: 54px;
	margin: 0;
	padding: 11.98px 26.96px;
	border-radius: 47.92px;
	background-color: var(--wp--preset--color--c-07);
}

.mn-ct .mn-ct__button .wp-block-button__link {
	display: block;
	flex: 0 0 auto;
	width: auto;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--wp--preset--color--c-01);
	font-family: var(--wp--preset--font-family--geist);
	font-weight: 500;
	font-size: 20.97px;
	line-height: 29.95px;
	letter-spacing: 0;
	text-decoration: none;
	white-space: nowrap;
}

.mn-ct .mn-ct__button .wp-block-button__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 47.92px;
}

/* the drawn 1.5 px inside stroke: white 20 % at the top, fading to nothing at the bottom */
.mn-ct .mn-ct__button::before {
	content: "";
	position: absolute;
	inset: 0;
	padding: 1.5px;
	border-radius: inherit;
	background: linear-gradient(to bottom, rgb(255 255 255 / 0.2), rgb(255 255 255 / 0));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite: exclude;
	pointer-events: none;
}

.mn-ct .mn-ct__side {
	display: flex;
	flex-direction: column;
	flex: 1 1 766px;
	min-width: 0;
}

.mn-ct .mn-ct__card {
	box-sizing: border-box;
	/* 66 drawn under a 96 px stat box; the stat's two 50.51 lines lay out at 101, so 61 here */
	padding: 41px 40px 61px 72px;
	border-radius: 15px;
	background-color: var(--wp--preset--color--c-04);
}

.mn-ct .mn-ct__heading {
	max-width: 632px;
	color: var(--wp--preset--color--c-05);
}

.mn-ct .mn-ct__lead {
	max-width: 588px;
	color: var(--wp--preset--color--c-02);
}

.mn-ct .mn-ct__lead strong {
	font-weight: 700;
}

.mn-ct .mn-ct__stat {
	margin: 41px 0 0;
	font-family: var(--wp--preset--font-family--geist);
	font-weight: 700;
	font-size: 31.15px;
	line-height: 50.51px;
	letter-spacing: 0;
	color: var(--wp--preset--color--c-16);
}

/* the larger run sits on the same 50.51 px line pitch, as Figma sets it: it must not grow the line */
.mn-ct .mn-ct__stat em {
	font-style: normal;
	font-size: 45.46px;
	line-height: 0;
}

.mn-ct .mn-ct__badges {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-top: 38px;
}

.mn-ct .mn-ct__badge {
	flex: 0 1 181px;
	min-width: 0;
}

.mn-ct .mn-ct__badge img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
}

/* ---- below 1024: the intro's photo under the text; consult-trust stacked in reading order ---- */

@media (max-width: 1023.98px) {
	.mn-pi {
		flex-direction: column;
		row-gap: 40px;
	}

	.mn-pi .mn-pi__copy,
	.mn-pi .mn-pi__photo {
		flex: 0 0 auto;
		width: 100%;
	}

	/* a tablet-wide photo would stand 650 px tall; it stops at the width the photo fills at 1440 x 1.27 */
	.mn-pi .mn-pi__photo {
		max-width: 640px;
	}

	.mn-ct {
		flex-direction: column;
		gap: 24px;
	}

	.mn-ct .mn-ct__panel,
	.mn-ct .mn-ct__side {
		flex: 0 0 auto;
	}

	.mn-ct .mn-ct__photo {
		max-width: 480px;
	}
}

/* ---- below 782: gaps halved, inner padding to the 24 px card inset, badges two by two ---- */

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

	.mn-pt .mn-pt__text {
		padding-block: calc((51px - 1.2em) / 2);
		font-size: var(--wp--preset--font-size--s-14);
		line-height: 1.2;
	}

	.mn-pi {
		row-gap: 24px;
		padding-bottom: 32px;
	}

	.mn-ct {
		padding-bottom: 58px;
	}

	.mn-ct .mn-ct__panel,
	.mn-ct .mn-ct__card {
		padding: 40px 24px;
	}

	.mn-ct .mn-ct__photo {
		margin-top: 32px;
		max-width: none;
	}

	.mn-ct .mn-ct__button {
		width: 100%;
		max-width: 311px;
		padding-inline: 16px;
	}

	.mn-ct .mn-ct__stat {
		margin-top: 28px;
		font-size: 24px;
		line-height: 36px;
	}

	.mn-ct .mn-ct__stat em {
		font-size: 35px;
	}

	.mn-ct .mn-ct__badges {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 181px));
		justify-content: center;
		gap: 16px 24px;
		margin-top: 24px;
	}
}

/* the label fits a 320 px screen */
@media (max-width: 359.98px) {
	.mn-ct .mn-ct__button .wp-block-button__link {
		font-size: 18px;
	}
}