/*
 * Atlikti darbai - the index (frame 406:438) and the single project (frame 418:1812). U5.
 * Classes live in the mn-works / mn-work-* namespace (the homepage carousel owns mn-projects*).
 *
 * Read from the nodes (frame 1440, y from the frame top):
 *   page title 416:953 / 418:1830   Geist 400 70/122 #C69A37 (C07), box at y 208; header ends 193, so
 *                                   15 px above; 47 px under it to the grid / the main photo (y 377)
 *   grid 416:1354                   3 columns of 378 x 377, 21 px gaps both ways, from y 377; ends 3690,
 *                                   consult at 3884 (194 px)
 *     card 416:1213                 #F8F8F8 (C04), radius 12; content box 336 wide, 21 px in, 18.16 down
 *     photo 416:1215                336 x 239.2, radius 10, cover; 24 px to the title
 *     title 416:1217                Geist 700 26/30 #424242, in a 323 px frame; 11 px to the link row
 *     link row 416:1219             "Daugiau informacijos" Geist 500 20.21/28.88 #424242 + chevron
 *                                   416:1221 (8 x 18.6 stroked path, #424242) 209 px from the label's
 *                                   start, 6.65 px down; 22.64 px card padding under it
 *   main photo 418:2152             1177 x 399, radius 20, at y 377, cropped to its lower part (see
 *                                   the rule); 80 px to the text (y 856)
 *   text 418:2155                   lead Geist 500 36/46 #000 (C11); 31 px; body Geist 500 18/28 #424242,
 *                                   a blank line between paragraphs. The visible text ends at y 1257
 *                                   (the drawn 364 px box is taller than its five lines); strip at 1329
 *   contact strip 419:2176          two lines in 772 px: Geist 700 18/28, 15 px, Geist 500 18/28,
 *                                   #424242; button 419:2179 260.85 x 53.83 at the right edge, top aligned:
 *                                   #C69A37 (C07), radius 47.92, padding 11.98 / 26.96, label Geist 500
 *                                   20.97/29.95 white, 1.5 px inside stroke white 20 % -> 0 top to bottom;
 *                                   strip ends 1428, gallery at 1508 (80 px)
 *   gallery 419:2159                3 columns of 386 x 272, 9 px gaps both ways, radius 12; ends 2061,
 *                                   consult at 2244 (183 px)
 * Every gap belongs to the section above it (its bottom padding), as the chrome contract says.
 *
 * Below the drawn width (no frame; reference pass + the brief): cards 3 -> 2 columns below 1024 px,
 * 1 column below 600 px; gallery 2 columns below 782 px; titles 38/51 below 782 px (the plain-page
 * title rule base.css already uses); lead 24/31; the contact strip stacks; drawn vertical gaps halved.
 */

/* ---- shared: the content container and the two page titles ---- */

.mn-works-title,
.mn-works,
.mn-work-title,
.mn-work-photo,
.mn-work-text,
.mn-work-cta,
.mn-work-gallery-section {
	box-sizing: border-box;
	width: min(var(--mn-content, 1176px), 100% - 2 * var(--mn-gutter, 20px));
	margin-inline: auto;
}

.mn-works-title,
.mn-work-title {
	padding-block: 15px 47px;
}

/*
 * The drawn title is one 70 px line in a 122 px box. A long project 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:
 * one line still measures 122 with its glyphs where they are drawn, two lines measure 199, not 244.
 */
.mn-works-title .mn-works-title__text,
.mn-work-title .mn-work-title__text {
	margin: 0;
	padding-block: calc((122px - 1.1em) / 2);
	font-family: var(--wp--preset--font-family--geist);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--s-18);
	line-height: 1.1;
	letter-spacing: 0;
	color: var(--wp--preset--color--c-07);
}

/* ---- index grid (416:1354) ---- */

.mn-works {
	padding-bottom: 194px;
}

.mn-works .mn-works__query {
	margin: 0;
}

.mn-works .mn-works__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 21px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mn-works .mn-works__grid > li {
	display: flex;
	margin: 0;
}

.mn-works .mn-work-card {
	position: relative;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	width: 100%;
	padding: 18.16px 21px 22.64px;
	border-radius: 12px;
	background-color: var(--wp--preset--color--c-04);
}

.mn-works .mn-work-card__photo {
	margin: 0;
	aspect-ratio: 336 / 239.2;
	overflow: hidden;
	border-radius: 10px;
}

.mn-works .mn-work-card__photo img {
	display: block;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	border-radius: 10px;
}

/* the drawn title box is 33 px for one 30 px line (416:1217) and 59 for two: min-height 33 puts
   the link row where it is drawn on one-line cards and within 1 px on two-line cards */
.mn-works .mn-work-card__title {
	min-height: 33px;
	margin: 24px 13px 11px 0;
	font-family: var(--wp--preset--font-family--geist);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--s-11);
	line-height: 30px;
	letter-spacing: 0;
	color: var(--wp--preset--color--c-02);
}

.mn-works .mn-work-card__title a {
	color: inherit;
	text-decoration: none;
}

/* the whole card opens the project: the title's link covers it */
.mn-works .mn-work-card__title:not(.block-editor-block-list__block) a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 12px;
}

/* the link row sits on one baseline across a row of cards, whatever the title length */
.mn-works .mn-work-card__more {
	display: flex;
	align-items: flex-start;
	margin-top: auto;
}

.mn-works .mn-work-card__more-label {
	margin: 0;
	font-family: var(--wp--preset--font-family--geist);
	font-weight: 500;
	font-size: 20.21px;
	line-height: 28.88px;
	letter-spacing: 0;
	color: var(--wp--preset--color--c-02);
}

/* the chevron, drawn here and not a photo block (R8b item 5). The SVG is the path plus its stroke (10 x 20);
 * the path box starts 0.5 px in. */
.mn-works .mn-work-card__more::after {
	content: "";
	flex: 0 0 auto;
	width: 10px;
	height: 20px;
	margin: 6.2px 0 0 9.5px;
	background-color: var(--wp--preset--color--c-02);
	-webkit-mask: url("../../img/projects/chevron-right.svg") no-repeat center / 100% 100%;
	mask: url("../../img/projects/chevron-right.svg") no-repeat center / 100% 100%;
}

/* ---- single project (418:1812) ---- */

.mn-work-photo {
	padding-bottom: 80px;
}

.mn-work-photo .mn-work__photo {
	margin: 0;
	overflow: hidden;
	border-radius: 20px;
	isolation: isolate;
	/* the img's crop below reads the banner's width as 100cqw */
	container-type: inline-size;
}

/*
 * The crop is read from the node's image transform (418:2153, STRETCH fill):
 *   u = 0.9751 x + 0.0130    the window shows 97.51 % of the photo's WIDTH, 1.30 % cut on the left;
 *   v = 0.5877 y + 0.3877    and 58.77 % of its height, starting 38.77 % down (the fence).
 * Plain `cover` fills the width exactly, so it showed 2.4 % too much of the photo and the window
 * started 9 px too high (G1 defect 4: 37.4-97.6 % at scale 0.735 against 38.77-97.54 % at 0.753).
 * So the photo is zoomed by 1 / 0.9751 = 1.02554 about its centre (which cuts 1.24 % each side;
 * drawn: 1.30 % and 1.19 %) and positioned where that zoom puts the window's top at 38.77 % for the
 * drawn 1600 x 901 photo: p (1 - f) + f (1 - 1 / k) / 2 = 0.3877 with f = 0.6020 -> p = 95.53 %.
 * Cover plus a zoom never leaves a gap, whatever a project photo's proportions. NOT reproduced: the
 * drawn crop is also turned by 0.56 degrees (the transform's 0.017 shear), which no item's photo
 * should be.
 *
 * TALLER PHOTOS (R5, G2 defect 1). 95.53 % is right for the drawn 16:9 photo only: a 4:3 photo under
 * it starts 52.9 % down and loses the top of its fence. What the drawn crop fixes is the window's
 * START, so the second value starts ANY photo's window at the drawn 38.77 %. With H the box height
 * (399 / 1177 of its width, 100cqw of the figure) and the zoom's margin m = (1 - 1 / k) / 2 = 0.012451,
 * an offset of 38.77 % of (H - photo height) - (0.3877 - m) H puts the photo's 38.77 % line exactly
 * at the top of the zoomed window, whatever the photo's proportions: (0.3877 - 0.012451) x 399 / 1177
 * = 12.7208cqw. max() keeps 95.53 % wherever that starts the window HIGHER - every photo at 16:9 or
 * wider (61 of 68: their crop is unchanged, 34.4-38.75 %) - and never leaves a gap below the photo.
 * So a taller photo is framed from the drawn line without anybody setting anything, including one a
 * client uploads later or puts in a new project. (A browser without container units keeps 95.53 %.)
 *
 * A photo with its OWN focal point (the image block's Dimensions > Focal point, written as the img's
 * inline object-fit / object-position) keeps it: nothing here may win over that inline style (no
 * !important), at any width. tools/project-photo-focal.php writes one where a person decided it.
 */
.mn-work-photo .mn-work__photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1177 / 399;
	object-fit: cover;
	object-position: 50% 95.53%;
	object-position: 50% max(95.53%, 38.77% - 12.7208cqw);
	transform: scale(1.02554);
	transform-origin: 50% 50%;
}

.mn-work-text {
	padding-bottom: 72px;
}

.mn-work-text .mn-work__lead {
	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-11);
}

.mn-work-text .mn-work__body {
	margin: 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;
	color: var(--wp--preset--color--c-02);
}

.mn-work-text .mn-work__lead + .mn-work__body {
	margin-top: 31px;
}

/* the drawn body is one text with a blank line between paragraphs */
.mn-work-text .mn-work__body + .mn-work__body {
	margin-top: 28px;
}

.mn-work-cta {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	padding-bottom: 80px;
}

.mn-work-cta .mn-work-cta__text {
	flex: 0 1 772px;
	min-width: 0;
}

.mn-work-cta .mn-work-cta__strong,
.mn-work-cta .mn-work-cta__note {
	margin: 0;
	font-family: var(--wp--preset--font-family--geist);
	font-size: var(--wp--preset--font-size--s-04);
	line-height: 28px;
	letter-spacing: 0;
	color: var(--wp--preset--color--c-02);
}

.mn-work-cta .mn-work-cta__strong {
	font-weight: 700;
}

.mn-work-cta .mn-work-cta__note {
	margin-top: 15px;
	font-weight: 500;
}

.mn-work-cta .mn-work-cta__actions {
	flex: 0 0 auto;
	margin: 0;
	gap: 0;
}

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

.mn-work-cta .mn-work-cta__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;
	text-decoration: none;
	white-space: nowrap;
}

.mn-work-cta .mn-work-cta__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-work-cta .mn-work-cta__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;
}

/* gallery: core's nested-image gallery is a flex row with computed widths; this is a grid */
.mn-work-gallery-section {
	padding-bottom: 183px;
}

.mn-work-gallery-section .mn-work-gallery.wp-block-gallery.has-nested-images {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 9px;
	margin: 0;
}

.mn-work-gallery-section .mn-work-gallery.wp-block-gallery.has-nested-images figure.wp-block-image:not(#mn-gallery-item) {
	display: block;
	width: auto;
	margin: 0;
	aspect-ratio: 386 / 272;
	overflow: hidden;
	border-radius: 12px;
}

.mn-work-gallery-section .mn-work-gallery.wp-block-gallery.has-nested-images figure.wp-block-image:not(#mn-gallery-item) a,
.mn-work-gallery-section .mn-work-gallery.wp-block-gallery.has-nested-images figure.wp-block-image:not(#mn-gallery-item) img {
	display: block;
	width: 100%;
	height: 100% !important;
}

.mn-work-gallery-section .mn-work-gallery.wp-block-gallery.has-nested-images figure.wp-block-image:not(#mn-gallery-item) img {
	object-fit: cover;
	border-radius: 12px;
}

/* ---- narrower than drawn ---- */

@media (max-width: 1023.98px) {
	.mn-works .mn-works__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 781.98px) {
	.mn-works-title,
	.mn-work-title {
		padding-block: 15px 24px;
	}

	.mn-works-title .mn-works-title__text,
	.mn-work-title .mn-work-title__text {
		padding-block: calc((51px - 1.1em) / 2);
		font-size: var(--wp--preset--font-size--s-14);
	}

	.mn-works {
		padding-bottom: 97px;
	}

	.mn-work-photo {
		padding-bottom: 40px;
	}

	/* Mobile has no frame: the 3:2 crop measured before R2, without the desktop zoom. A photo's own
	 * focal point (inline) wins here too. */
	.mn-work-photo .mn-work__photo img {
		aspect-ratio: 3 / 2;
		object-position: 50% 94%;
		transform: none;
	}

	.mn-work-text {
		padding-bottom: 36px;
	}

	.mn-work-text .mn-work__lead {
		font-size: var(--wp--preset--font-size--s-09);
		line-height: 31px;
	}

	.mn-work-text .mn-work__lead + .mn-work__body {
		margin-top: 24px;
	}

	.mn-work-cta {
		flex-direction: column;
		padding-bottom: 40px;
	}

	.mn-work-cta .mn-work-cta__text {
		flex-basis: auto;
	}

	.mn-work-gallery-section {
		padding-bottom: 92px;
	}

	.mn-work-gallery-section .mn-work-gallery.wp-block-gallery.has-nested-images {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 599.98px) {
	.mn-works .mn-works__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}