/*
 * Catalogue and sales (W2-U6): Tvoros (frame 495:1824, /tvoros/ and the 44 category pages written by
 * tools/convert-categories.php) and Akcijos (frame 495:734, /akcijos/). One card family: photo, title,
 * the link words and the drawn chevron (416-1788.svg, the projects index card's).
 *
 * Read from the nodes (frame 1440, y from the frame top):
 *   page titles 495:1825 / 495:735  Geist 600 70/122 #C69A37 (C07) at y 208; 47 px under the box to
 *                                   the content at y 377 (the 416:953 pattern)
 *   catalogue 495:1890              groups 110 px apart; a group: heading Geist 700 36/46 #424242 (C02),
 *                                   31 px, text Geist 500 18/28 C02 in 698 px, 47 px, the card grid
 *     grid                          3 columns of 378, rows 22 px apart (drawn 131/531/931; built on the
 *                                   1176 container, 132/531/930, as every built page is)
 *     Tinklinės / Tvorų stulpai     drawn as two separate rows 47 px apart (495:2022 + 495:2051,
 *                                   495:2084 + 495:2113): .mn-cat__grid--rows-47
 *     card 495:1897                 #F8F8F8 (C04) radius 12, 378 x 284; photo 21 in, 23 down, 336 x 148,
 *                                   radius 10; 20 px; title Geist 700 26/30 C02; 11 px; link row
 *                                   "Peržiūrėti kategoriją" Geist 500 20.21/28.88 C02 + chevron (10 x 20
 *                                   with its stroke) 9.47 px after the words, 6.19 px down; 23 px under
 *   consult                         216 px under the last row (5043 -> 5259; 2276 -> 2492)
 *   sale grid 495:800               3 columns of 378, 21 px both ways; card 378 x 459: 21 px in, photo
 *                                   336 x 239.2 radius 10, 24 px, title 26/30 in a 323 px frame (box 33
 *                                   for one line), 11 px, price Geist 700 26/30 C07 and the old price
 *                                   Geist 400 16 C02 struck through on one baseline, "Akcija galioja iki"
 *                                   + date Geist 400 14 C02 on the next 30 px line, 11 px (the drawn text
 *                                   box is 65 tall for its two lines, then 6), link row as above; 30.8 px
 *                                   under it
 *
 * Photo crops are each block's own (core/image scale + focal point, written by the generator from the
 * drawn image transforms); the CSS default is a centred cover, the drawn FILL.
 *
 * Below the drawn width (no frame; intake reference pass, as the projects index): cards 3 -> 2 columns
 * below 1024 px, 1 column below 600 px; titles 38/51 below 782 px; drawn vertical gaps halved below
 * 782 px; 20 px gutter. Nothing is a sideways row, so above 1440 the content stays on the container.
 */

/* ---- shared: the container and the page title ---- */

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

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

/* one 70 px line in the drawn 122 px box; a long category title wraps at 1.1, not at 122 (the
   projects title rule) */
.mn-cat-title .mn-cat-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);
}

/* ---- catalogue (495:1890) ---- */

.mn-cat {
	padding-bottom: 216px;
}

.mn-cat > .mn-cat__group {
	margin: 0;
}

.mn-cat > .mn-cat__group + .mn-cat__group {
	margin-top: 110px;
}

/* a heading-only group (a live "Kitos tvoros" over the groups after it) is followed at the drawn
   heading-to-content distance, not a whole group gap */
.mn-cat > .mn-cat__group:not(:has(.mn-cat__text, .mn-cat__grid)) + .mn-cat__group {
	margin-top: 47px;
}

.mn-cat .mn-cat__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;
	color: var(--wp--preset--color--c-02);
}

.mn-cat .mn-cat__text {
	max-width: 698px;
	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-cat .mn-cat__heading + .mn-cat__text {
	margin-top: 31px;
}

/* a live text of several paragraphs: a blank line between them */
.mn-cat .mn-cat__text + .mn-cat__text {
	margin-top: 28px;
}

.mn-cat .mn-cat__text a {
	color: inherit;
}

.mn-cat .mn-cat__group > * + .mn-cat__grid {
	margin-top: 47px;
}

.mn-cat .mn-cat__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: 21px;
	row-gap: 22px;
}

.mn-cat .mn-cat__grid > * {
	margin: 0;
}

@media (min-width: 1024px) {
	.mn-cat .mn-cat__grid--rows-47 {
		row-gap: 47px;
	}
}

.mn-cat .mn-cat-card {
	position: relative;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	min-width: 0;
	padding: 23px 21px;
	border-radius: 12px;
	background-color: var(--wp--preset--color--c-04);
}

/* R16: a card with no photo is as tall as its own words at EVERY width. In one column (below 600) it is its
 * own row, so it already was; in two or three columns the grid stretched it to the photo card beside it, a
 * tall card with a gap between its title and its link row. Photo cards keep the grid's equal-row stretch. */
.mn-cat .mn-cat-card:not(:has(.mn-cat-card__photo)) {
	align-self: start;
}

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

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

/* 495:2066 / 495:2075: a white product photo shown whole on white (the block's own "contain") */
.mn-cat .mn-cat-card__photo img[style*="object-fit:contain"] {
	background-color: var(--wp--preset--color--c-01);
}

/* 495:2075 draws its coil bigger than the "contain" 495:2066 does: a STRETCH fill with a 1.3023 x 0.8593
 * transform, i.e. the photo 258 x 172.2 centred in the 336 x 148 frame and cropped 12 px top and bottom.
 * "contain" gives 221.6 x 148; 258 / 221.6 = 1.1638 about the centre, the frame's overflow does the crop. */
.mn-cat .mn-cat-card__photo--zoom img {
	transform: scale(1.1638);
}

.mn-cat .mn-cat-card__title {
	margin: 20px 0 11px;
	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);
	overflow-wrap: anywhere;
}

/* a card whose live photo is not in the library yet starts with its title */
.mn-cat .mn-cat-card__title:first-child {
	margin-top: 0;
}

/* ---- R8b: cards with no link words (a kit's photo and name; a colour and its size) and a linked
 * group heading. The drawn card has a link row; these live cards have none, so the card ends under its
 * title (or its words) with the same 23 px padding. Words under a title: Geist 500 18/28, 6 px under
 * the title. */
.mn-cat .mn-cat-card--plain .mn-cat-card__title {
	margin-bottom: 0;
}

.mn-cat .mn-cat-card__text {
	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);
	overflow-wrap: anywhere;
}

.mn-cat .mn-cat-card__title + .mn-cat-card__text {
	margin-top: 6px;
}

.mn-cat .mn-cat__heading a {
	color: inherit;
	text-decoration: none;
}

/* ---- the card family's shared parts: title link over the whole card, the link row ---- */

.mn-cat .mn-cat-card__title a,
.mn-sale .mn-sale-card__title a {
	color: inherit;
	text-decoration: none;
}

.mn-cat .mn-cat-card__title:not(.block-editor-block-list__block) a::after,
.mn-sale .mn-sale-card__title:not(.block-editor-block-list__block) a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 12px;
}

.mn-cat .mn-cat-card__more,
.mn-sale .mn-sale-card__more {
	display: flex;
	align-items: flex-start;
	min-height: 29px;
	margin-top: auto;
}

.mn-cat .mn-cat-card__label,
.mn-sale .mn-sale-card__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 after the link words, drawn here and not a photo block (R8b item 5: a decorative arrow
 * the client could swap or caption). The SVG is the path plus its stroke (10 x 20); the path box starts
 * 0.5 px in. The mask is the drawn SVG, the colour C02 (#424242) as drawn. */
.mn-cat .mn-cat-card__more::after,
.mn-sale .mn-sale-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/catalogue/chevron-right.svg") no-repeat center / 100% 100%;
	mask: url("../../img/catalogue/chevron-right.svg") no-repeat center / 100% 100%;
}

/* ---- sale grid (495:800) ---- */

.mn-sale {
	padding-bottom: 216px;
}

.mn-sale .mn-sale__query {
	margin: 0;
}

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

.mn-sale .mn-sale__grid > li {
	display: flex;
	min-width: 0;
	margin: 0;
}

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

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

.mn-sale .mn-sale-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 (as 416:1217); its width is 323 on most cards, 336
   on "VINCENT" and 348 on "3D tvoros segmentas 1530x5 mm rudas RAL8017" (495:864, 12 px into the
   card's right padding, 9 px short of its edge). 348 keeps every drawn wrap: VINCENT on one line, the
   3D segment on two (three at 336); measured on all 22 live titles, none wraps more at 348 than at
   336. The right margin is the 12 px past the photo column. */
.mn-sale .mn-sale-card__title {
	min-height: 33px;
	margin: 24px -12px 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);
	overflow-wrap: anywhere;
}

.mn-sale .mn-sale-card__prices,
.mn-sale .mn-sale-card__valid {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
}

.mn-sale .mn-sale-card__prices {
	column-gap: 7px;
}

/* Figma sets the drawn date line's 14 px glyphs 4 px lower in its 30 px line than a browser does
   (measured on the render: glyphs 749-760 drawn, 745-756 at 30 px): the line starts 4 px lower and
   the link row's gap is 4 px less, so the link row stays at the drawn y */
.mn-sale .mn-sale-card__valid {
	column-gap: 0.25em;
	padding-top: 4px;
	font-size: var(--wp--preset--font-size--s-02);
}

.mn-sale .mn-sale-card__price,
.mn-sale .mn-sale-card__old,
.mn-sale .mn-sale-card__valid-label,
.mn-sale .mn-sale-card__valid-date {
	margin: 0;
	font-family: var(--wp--preset--font-family--geist);
	line-height: 30px;
	letter-spacing: 0;
}

.mn-sale .mn-sale-card__price {
	font-weight: 700;
	font-size: var(--wp--preset--font-size--s-11);
	color: var(--wp--preset--color--c-07);
}

/* on the price's baseline; 22 px keeps its box inside the 30 px line (at 30 the baseline alignment
   pushed it 4 px below the line and the line grew to 34) */
.mn-sale .mn-sale-card__old {
	font-weight: 400;
	font-size: var(--wp--preset--font-size--s-03);
	line-height: 22px;
	color: var(--wp--preset--color--c-02);
	text-decoration: line-through;
}

.mn-sale .mn-sale-card__valid-label,
.mn-sale .mn-sale-card__valid-date {
	font-weight: 400;
	font-size: var(--wp--preset--font-size--s-02);
	color: var(--wp--preset--color--c-02);
}

/* an empty field prints nothing (core leaves a bound paragraph out when its value is empty): no
   price line without a price, no "Akcija galioja iki" without a date */
.mn-sale .mn-sale-card__prices > p:empty,
.mn-sale .mn-sale-card__prices:not(:has(> p:not(:empty))),
.mn-sale .mn-sale-card__valid:not(:has(.mn-sale-card__valid-date:not(:empty))) {
	display: none;
}

/* the drawn two-line text box is 65 px tall, 6 px above the link row: 11 px under the 30 px date
   line, 7 under its 4 px shift (above); 11 when a sale has no date line */
.mn-sale .mn-sale-card__more {
	padding-top: 11px;
}

.mn-sale .mn-sale-card__valid:has(.mn-sale-card__valid-date:not(:empty)) + .mn-sale-card__more {
	padding-top: 7px;
}

/* ---- below the drawn width ---- */

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

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

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

	.mn-cat,
	.mn-sale {
		padding-bottom: 108px;
	}

	.mn-cat > .mn-cat__group + .mn-cat__group {
		margin-top: 55px;
	}

	.mn-cat > .mn-cat__group:not(:has(.mn-cat__text, .mn-cat__grid)) + .mn-cat__group,
	.mn-cat .mn-cat__group > * + .mn-cat__grid {
		margin-top: 24px;
	}

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

	.mn-cat .mn-cat__heading + .mn-cat__text {
		margin-top: 16px;
	}
}

@media (max-width: 599.98px) {
	.mn-cat .mn-cat__grid,
	.mn-sale .mn-sale__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}