/*
 * Kas mes esame (frame 495:2565, page 370) - U6. Sections 499:400, 499:403, 499:405, 499:417, 499:419.
 * The designer built this frame with auto-layout, so the values below are its own paddings and gaps.
 *
 * Read from the nodes (frame 1440):
 *   every section but the CTA: 132 px side padding = the 1176 px content container.
 *   499:400 hero 193..856: padding 15 top / 80 bottom, gap 47; title "Kas mes esame?" Geist 400
 *     70/122 #C69A37 (C07); photo 1176 x 399 radius 20 (the drawn crop of the photo, exported as is).
 *   499:403 intro 856..976: text Geist 400 24/40 #04448C (C03); padding 80 bottom.
 *   499:405 credibility 976..1364: row, centred vertically, gap 66, padding 64 bottom; badges 2 x 2
 *     of 162 (raster-only in the design: the exported PNGs at 2x; badge 2 is badge-2-19.svg, redrawn in
 *     vector to read 19, Gate A.5 item 1); text 786 wide Geist 500 36/46
 *     #424242 with "18 metų patirtį" and "7000 objektų" in Geist 600 #C69A37 (bold in the editor).
 *   499:417 services 1364..1566: text Geist 500 25/34 #424242; padding 100 bottom.
 *   499:419 CTA 1566..2062: 50 px side padding (the 1340 wide box), no vertical padding (the footer
 *     499:427 carries its own 57 + 1 px); panel 522 #04448C radius 15 on the left, padding 48, gap 24;
 *     title Geist 500 36/46, text 500 18/28, "Turite klausimų?" 500 26/33.8, all #F2F2F2;
 *     button 310 x 54 #C69A37 radius 47.14, label Geist 500 20.64/29.46 white, centred, no stroke;
 *     photo 818 x 496 cover, radius 15 on the right; play mark 92.6 centred, as drawn; it opens the
 *     live site's video (Gate A.5 item 7; the shared play mark and modal rules are in consult.css).
 *
 * Narrower (no frame; the intake's reference pass): below 1024 px the credibility row and the CTA
 * stack (like the consult block); below 782 px the 70 px title goes to 38/51 (the shared plain-page
 * title) and the two 36/46 statements to 25/34 (this page's own services style).
 */

.mn-about {
	padding-inline: max(var(--mn-gutter, 20px), (100% - var(--mn-content, 1176px)) / 2);
}

/* ---- 499:400 hero ---- */

.mn-about-hero {
	padding-block: 15px 80px;
}

.mn-about-hero .mn-about-hero__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--geist);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--s-18);
	line-height: 122px;
	letter-spacing: 0;
	color: var(--wp--preset--color--c-07);
}

.mn-about-hero .mn-about-hero__photo {
	margin: 47px 0 0;
	aspect-ratio: 1176 / 399;
	border-radius: 20px;
	overflow: hidden;
}

.mn-about-hero .mn-about-hero__photo img {
	display: block;
	width: 100%;
	height: 100% !important;
	border-radius: inherit;
	object-fit: cover;
	object-position: 50% 50%;
}

/* ---- 499:403 intro ---- */

.mn-about-intro {
	padding-block: 0 80px;
}

.mn-about-intro .mn-about-intro__text {
	margin: 0;
	font-family: var(--wp--preset--font-family--geist);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--s-09);
	line-height: 40px;
	color: var(--wp--preset--color--c-03);
}

/* ---- 499:405 credibility ---- */

.mn-about-cred {
	padding-block: 0 64px;
}

.mn-about-cred .mn-about-cred__row {
	display: flex;
	align-items: center;
	gap: 66px;
}

.mn-about-cred .mn-about-cred__badges {
	display: grid;
	flex: 0 0 324px;
	grid-template-columns: repeat(2, minmax(0, 162px));
	gap: 0;
	max-width: 100%;
}

.mn-about-cred .mn-about-cred__badge {
	margin: 0;
}

/* 162 x 162 as drawn; a 320 px screen has 280 px, so the pair shrinks rather than overflows */
.mn-about-cred .mn-about-cred__badge img {
	display: block;
	width: 100%;
	max-width: 162px;
	height: auto;
	aspect-ratio: 1;
}

.mn-about-cred .mn-about-cred__text {
	flex: 1 1 0;
	min-width: 0;
	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;
	color: var(--wp--preset--color--c-02);
}

.mn-about-cred .mn-about-cred__text strong {
	font-weight: 600;
	color: var(--wp--preset--color--c-07);
}

/* ---- 499:417 services ---- */

.mn-about-services {
	padding-block: 0 100px;
}

.mn-about-services .mn-about-services__text {
	margin: 0;
	font-family: var(--wp--preset--font-family--geist);
	font-weight: 500;
	font-size: var(--wp--preset--font-size--s-10);
	line-height: 34px;
	color: var(--wp--preset--color--c-02);
}

/* ---- 499:419 CTA ---- */

.mn-about-cta {
	padding-inline: max(var(--mn-gutter, 20px), (100% - var(--mn-wide, 1340px)) / 2);
}

.mn-about-cta .mn-about-cta__card {
	display: flex;
	min-height: 496px;
}

.mn-about-cta .mn-about-cta__panel {
	flex: 0 0 522px;
	box-sizing: border-box;
	padding: 48px;
	border-radius: 15px 0 0 15px;
	background-color: var(--wp--preset--color--c-03);
	color: var(--wp--preset--color--c-06);
}

.mn-about-cta .mn-about-cta__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-06);
}

.mn-about-cta .mn-about-cta__text {
	margin: 24px 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;
	color: var(--wp--preset--color--c-06);
}

.mn-about-cta .mn-about-cta__question {
	margin: 24px 0 0;
	font-family: var(--wp--preset--font-family--geist);
	font-weight: 500;
	font-size: var(--wp--preset--font-size--s-11);
	line-height: 33.8px;
	color: var(--wp--preset--color--c-06);
}

.mn-about-cta .mn-about-cta__actions {
	margin: 24px 0 0;
	gap: 0;
}

/*
 * The pill (drawn frame "button", 310 x 54) is the link itself, as core/button draws it: the whole
 * pill is the click target and the label sits centred in it (drawn 203 x 30 at 53.5 px in).
 */
.mn-about-cta .mn-about-cta__button {
	margin: 0;
}

.mn-about-cta .mn-about-cta__button .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 310px;
	max-width: 100%;
	height: 54px;
	padding: 11.78px 26.51px;
	border: 0;
	border-radius: 47.14px;
	background-color: var(--wp--preset--color--c-07);
	color: var(--wp--preset--color--c-01);
	font-family: var(--wp--preset--font-family--geist);
	font-weight: 500;
	font-size: 20.64px;
	line-height: 29.46px;
	text-decoration: none;
	white-space: nowrap;
}

.mn-about-cta .mn-about-cta__media {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	border-radius: 0 15px 15px 0;
	overflow: hidden;
}

.mn-about-cta .mn-about-cta__photo {
	position: absolute;
	inset: 0;
	margin: 0;
	border-radius: inherit;
}

.mn-about-cta .mn-about-cta__photo img {
	display: block;
	width: 100%;
	height: 100% !important;
	border-radius: inherit;
	object-fit: cover;
	object-position: 50% 50%;
}

.mn-about-cta .mn-about-cta__play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 92.59px;
	height: 92.59px;
	margin: 0;
	transform: translate(-50%, -50%);
}

.mn-about-cta .mn-about-cta__play img {
	display: block;
	width: 100%;
	height: 100% !important;
}

/* ---- narrower than the drawn row ---- */

@media (max-width: 1023.98px) {
	.mn-about-cred .mn-about-cred__row {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--wp--preset--spacing--neutral-30);
	}

	.mn-about-cred .mn-about-cred__badges {
		flex-basis: auto;
		width: 324px;
	}

	.mn-about-cred .mn-about-cred__text {
		flex: 0 0 auto;
		width: 100%;
	}

	.mn-about-cta .mn-about-cta__card {
		flex-direction: column;
		min-height: 0;
	}

	.mn-about-cta .mn-about-cta__panel {
		flex-basis: auto;
		padding: 40px 24px;
		border-radius: 15px 15px 0 0;
	}

	.mn-about-cta .mn-about-cta__media {
		flex: 0 0 auto;
		aspect-ratio: 818 / 496;
		border-radius: 0 0 15px 15px;
	}

	.mn-about-cta .mn-about-cta__play {
		width: 80px;
		height: 80px;
	}

	.mn-about-cta .mn-about-cta__button {
		width: 100%;
		max-width: 310px;
	}

	.mn-about-cta .mn-about-cta__button .wp-block-button__link {
		width: 100%;
		padding-inline: 16px;
	}
}

@media (max-width: 781.98px) {
	.mn-about-hero .mn-about-hero__title {
		font-size: var(--wp--preset--font-size--s-14);
		line-height: 51px;
	}

	.mn-about-cred .mn-about-cred__text,
	.mn-about-cta .mn-about-cta__title {
		font-size: var(--wp--preset--font-size--s-10);
		line-height: 34px;
	}
}

/* the label needs about 235 px at 20.64 px; below 360 px the panel has less */
@media (max-width: 359.98px) {
	.mn-about-cta .mn-about-cta__button .wp-block-button__link {
		font-size: var(--wp--preset--font-size--s-04);
	}
}