/*
 * Galerija (frame 441:438) - U6. The page title 441:439 and the photo wall 441:438.s03.
 *
 * Read from the nodes (frame 1440):
 *   title "Galerija" Geist 600 70/122 #C69A37 (C07), x 132, y 208 (15 px under the 193 px header
 *     box), 122 tall; the wall starts at y 377, so the title section ends 47 px under the text.
 *   wall: 35 tiles in three 386 px columns at x 132 / 527 / 922 (9 px gaps), rows of 272 px on a
 *     281 px pitch, tall tiles 386 x 553 = two rows plus the 9 px gap, every tile radius 12.
 *     The drawn rhythm repeats every 6 rows with 14 tiles: in reading order tiles 5, 6, 11 and 12
 *     of each 14 are the tall ones (grid auto-placement then lands every tile where it is drawn).
 *   the wall ends at y 4583; the footer's rule is drawn at 4770 (rendered row 4769): 186 px,
 *     which belongs to this section (U1 report).
 *
 * The wall is ONE core/gallery holding the live Galerija photo set (561 photos, drawn photos were
 * placeholders). Photos are cropped into the tiles (cover, centred); tapping one opens the shared
 * lightbox (lightbox.js via .mn-lightbox) with the whole photo.
 * Row height follows the column width (272/386 of it), so tiles keep the drawn shape at every width.
 * Below 782 px (WordPress's own stacking width) the wall is 2 columns, same rhythm (talls in pairs,
 * so no holes), and the title drops to 38/51 like the shared plain-page title (base.css).
 */

/* ---- 441:439 page title ---- */

.mn-page-title {
	padding: 15px max(var(--mn-gutter, 20px), (100% - var(--mn-content, 1176px)) / 2) 47px;
}

/* the drawn text box hugs the word (258 x 122), it does not fill the row */
.mn-page-title > .mn-page-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);
}

/* ---- 441:438.s03 photo wall ---- */

.mn-wall {
	--mn-wall-cols: 3;
	--mn-wall-gap: 9px;
	container-type: inline-size;
	padding: 0 0 186px;
}

.mn-wall .wp-block-gallery.mn-wall__gallery {
	/* the drawn content width, centred; the row height is 272/386 of a column */
	--mn-wall-width: min(var(--mn-content, 1176px), 100cqi - 2 * var(--mn-gutter, 20px));
	display: grid;
	grid-template-columns: repeat(var(--mn-wall-cols), minmax(0, 1fr));
	grid-auto-rows: calc((var(--mn-wall-width) - (var(--mn-wall-cols) - 1) * var(--mn-wall-gap)) / var(--mn-wall-cols) * 272 / 386);
	grid-auto-flow: row;
	gap: var(--mn-wall-gap);
	box-sizing: border-box;
	width: var(--mn-wall-width);
	margin: 0 auto;
	padding: 0;
}

.mn-wall .wp-block-gallery.has-nested-images.mn-wall__gallery figure.wp-block-image:not(#individual-image) {
	display: block;
	position: relative;
	width: auto;
	height: 100%;
	max-width: none;
	margin: 0;
	border-radius: 12px;
	overflow: hidden;
}

/* tiles 5, 6, 11 and 12 of every 14 are the drawn 386 x 553 ones */
.mn-wall .wp-block-gallery.has-nested-images.mn-wall__gallery figure.wp-block-image:nth-child(14n + 5),
.mn-wall .wp-block-gallery.has-nested-images.mn-wall__gallery figure.wp-block-image:nth-child(14n + 6),
.mn-wall .wp-block-gallery.has-nested-images.mn-wall__gallery figure.wp-block-image:nth-child(14n + 11),
.mn-wall .wp-block-gallery.has-nested-images.mn-wall__gallery figure.wp-block-image:nth-child(14n + 12) {
	grid-row: span 2;
}

.mn-wall .wp-block-gallery.has-nested-images.is-cropped.mn-wall__gallery figure.wp-block-image:not(#individual-image) img {
	display: block;
	width: 100%;
	height: 100% !important;
	max-width: none;
	border-radius: inherit;
	object-fit: cover;
	object-position: 50% 50%;
}

/* The pill below is also the "Rodyti daugiau" of every card list (.mn-more__button, R13; paged.css holds
 * the rest of that button's rules): one look, kept here, with the Galerija button it was drawn for. */
/* ---- "Rodyti daugiau" (V2; operator 2026-10-13: 561 photos is far too long a page) ----
 * show-more.js shows the drawn wall (35 photos) and this button, which reveals 35 more per press
 * (one more when a row would end with a hole, so the tall/short rhythm always ends flush). The
 * words are the button block's own. Without JavaScript the button stays hidden and every photo
 * shows. The design draws no such button: it is the homepage's sibling "Žiūrėti daugiau
 * projektų" pill (projects.css), copied, 65 px under the wall as that one sits under its cards. */
/* as specific as the tile rule above (its :not(#individual-image) counts as an id) */
.mn-wall .wp-block-gallery.has-nested-images.mn-wall__gallery figure.wp-block-image.is-later:not(#individual-image) {
	display: none;
}

.mn-wall .mn-wall__more {
	display: none;
	justify-content: center;
	gap: 0;
	margin: 65px 0 0;
	padding-inline: var(--mn-gutter, 20px);
}

.mn-wall.is-paged .mn-wall__more,
.editor-styles-wrapper .mn-wall .mn-wall__more {
	display: flex;
}

.mn-wall.is-paged .mn-wall__more[hidden] {
	display: none;
}

.mn-wall .mn-wall__more-button,
.mn-more .mn-more__button {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 303px;
	max-width: 100%;
	min-height: 53px;
	margin: 0;
	padding: 11.78px 26.51px;
	border-radius: 47.14px;
	background-color: var(--wp--preset--color--c-12);
	background-image: linear-gradient(111deg, #cba040 0%, #caa140 10%, #caa13f 20%, #cba041 50%, #c99d3c 60%, #c59834 70%, #c69a36 80%, #c79b39 90%, #c89d3b 100%);
}

.mn-wall .mn-wall__more-button::before,
.mn-more .mn-more__button::before {
	content: "";
	position: absolute;
	inset: 0;
	padding: 1.47px;
	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-wall .mn-wall__more-button .wp-block-button__link,
.mn-more .mn-more__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: 600;
	font-size: 20.62px;
	line-height: 29.46px;
	letter-spacing: 0;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

/* the whole pill takes the press, not only the label */
.mn-wall .mn-wall__more-button .wp-block-button__link::after,
.mn-more .mn-more__button .wp-block-button__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 47.14px;
}

@media (max-width: 1023.98px) {
	.mn-wall .mn-wall__more {
		margin-top: 32px;
	}
}

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

	.mn-wall {
		--mn-wall-cols: 2;
	}
}