/**
 * Новое page — editorial photography + hardcoded product blocks.
 *
 * The page carries both `catalog-page` and `novoye-page` classes, so every
 * product-card and grid rule in woocommerce.css applies untouched. This file
 * adds only the photo sections, captions, link, single-card block, and the
 * mobile card hiding. Product overrides are prefixed `.novoye-page`
 * to out-specify `.catalog-page ul.products` regardless of load order.
 */

.novoye-page {
	display: flex;
	flex-direction: column;
}

/* Vertical rhythm
   ==========================================================================
   Each gap-* class sets the space ABOVE the element it is applied to. Values
   are fluid, anchored to the two Figma frames — 1440px desktop and 440px
   mobile — so both design widths match exactly, tablet interpolates smoothly,
   and the gap holds flat outside that range. Coefficients are derived from a
   straight line through the two (viewport, gap) points.
   ========================================================================== */

/* Scoped under .novoye-page so these out-specify the base margin resets on
   .novoye-photo / .novoye-caption (both `margin: 0`). */

/* header -> opening caption   (206px @1440 / 74px @440; 8px of it is the
   catalog-page base padding, the remainder comes from here). */
.novoye-page .novoye-caption {
	margin-top: clamp(66px, 13.24vw + 8px, 199px);
}

/* caption <-> photo           (249px @1440 / 102px @440) */
.novoye-page .novoye-gap-caption {
	margin-top: clamp(102px, 14.65vw + 38px, 249px);
}

/* last photo -> footer        (175px @1440 / 108.7px @440)
   The page-end gap. Since the 2026-07-29 revision the page ends on a photograph
   rather than the closing caption, so this hangs off whatever is last rather
   than off a caption — a :last-of-type rule here would now match the *opening*
   caption and push the first photo down by its margin. It is also the one
   space-below rule in this file; every gap-* above sets space above. */
.novoye-page > :last-child {
	margin-bottom: clamp(108px, 6.63vw + 79.5px, 175px);
}

/* photo <-> product block     (281px @1440 / 102px @440) */
.novoye-page .novoye-gap-block {
	margin-top: clamp(102px, 17.85vw + 24px, 281px);
}

/* product-block-with-link -> next photo   (170px @1440 / 19px @440) */
.novoye-page .novoye-gap-after-link {
	margin-top: clamp(19px, 15.08vw - 47px, 170px);
}

/* full photo <-> inset photo, the tightest adjacency   (404px @1440 / 38px @440) */
.novoye-page .novoye-gap-photo-to-photo {
	margin-top: clamp(38px, 36.6vw - 123px, 404px);
}

/* Captions
   ========================================================================== */

/* One caption, and it opens the page — the closing SOLSTICE run was deleted in
   the 2026-07-29 revision, taking the base/modifier split with it (the modifier
   existed only to differ from that sibling).

   Body is Regular. Figma's box is 753.31 wide, but its last word clears the
   second line there by only 0.2px, and in the browser it misses by 0.1px and
   drops to a third line. 754px is the flip point and the break changes again
   past 765, so 758 sits in the middle of the safe band: same 2-line body and
   68px block as Figma (130:228), 4.7px wider, which is under a pixel per side
   once centred. */

.novoye-caption {
	align-self: center;
	max-width: 758px;
	margin: 0;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.4;
	text-align: center;
	color: var(--color-black);
}

/* Title line is Medium, and Figma separates it from the body with one empty
   line — reproduced as a single line-height of margin rather than a blank
   element, so it tracks the font size at both breakpoints. */
.novoye-caption__title {
	display: block;
	margin-bottom: 1.4em;
	font-weight: 500;
}

/* «Ознакомиться…» link
   ========================================================================== */

.novoye-link {
	display: block;
	/* grid -> link, within a product row (94px @1440 / 73px @440) */
	margin-top: clamp(73px, 2.08vw + 64px, 94px);
	font-size: 12px;
	line-height: 1.4;
	text-align: center;
	color: var(--color-black);
	text-decoration: none;
}

.novoye-link:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Photographs
   ========================================================================== */

.novoye-photo {
	position: relative;
	margin: 0;
	overflow: hidden;
}

.novoye-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--pos-d, center);
}

/* Full-bleed — break out of the container side padding to the viewport edge. */
.novoye-photo--full {
	aspect-ratio: 1440 / 900;
	margin-inline: calc(-1 * var(--container-padding));
}

/* Inset — narrower, centered. */
.novoye-photo--inset {
	align-self: center;
	width: 100%;
	max-width: 750px;
	aspect-ratio: 750 / 900;
}

/* Product blocks
   ========================================================================== */

/* Multi-card row: reuses the catalog grid (.catalog-page ul.products). */

/* Single-card block: one catalog-width card, centered at every breakpoint. */
.novoye-page .novoye-single ul.products {
	display: flex;
	justify-content: center;
}

.novoye-page .novoye-single ul.products .product-card {
	width: calc(100% / 3);
}

/* Tablet / Mobile
   ========================================================================== */

@media (max-width: 1024px) {
	/* A 3-up row sheds one card once the grid drops to 2 columns. Which card is
	   an editorial choice made per block in page-novoye.php — named there by
	   артикул and arriving here as a --hide-N position class, since CSS can only
	   select positionally. All three positions are covered so reordering a row
	   never needs a change on this side. */
	.novoye-page .novoye-row--hide-1 ul.products .product-card:nth-child(1),
	.novoye-page .novoye-row--hide-2 ul.products .product-card:nth-child(2),
	.novoye-page .novoye-row--hide-3 ul.products .product-card:nth-child(3) {
		display: none;
	}

	/* Single card matches the 2-column card width. */
	.novoye-page .novoye-single ul.products .product-card {
		width: 50%;
	}
}

@media (max-width: 768px) {
	/* The catalog page drops its side padding at this width, so the desktop
	   break-out margin would push the photo past the viewport edge. */
	.novoye-photo--full {
		aspect-ratio: 440 / 547;
		margin-inline: 0;
	}

	/* First hero is taller and more immersive on mobile. */
	.novoye-photo--full.novoye-photo--tall {
		aspect-ratio: 440 / 861;
	}

	/* 381.2 wide in the Figma 440 frame — 29.4px side margins, kept
	   proportional (381.2 / 440 ≈ 86.64%) like the caption column below. */
	.novoye-photo--inset {
		max-width: 86.64%;
		aspect-ratio: 381 / 470;
	}

	.novoye-photo img {
		object-position: var(--pos-m, center);
	}

	/* Caption and link switch to the mobile text style — Body 5, 8px/1.2 in the
	   Figma 440 frame. The link is Medium; the caption body stays Regular, with
	   only its title line Medium (see .novoye-caption__title, which targets the
	   span directly and so beats this inherited weight). */
	.novoye-caption,
	.novoye-link {
		font-size: var(--font-size-body5);
		line-height: 1.2;
	}

	.novoye-link {
		font-weight: 500;
	}

	/* Caption column is 334.4px in the 440 frame (Figma 130:286), kept
	   proportional at ≈76%. */
	.novoye-caption {
		max-width: 76%;
	}

	.novoye-caption__title {
		margin-bottom: 1.2em;
	}
}