/*
 * NGL v2 — the catalogs page (Figma "Catalog" 299:10586; design/catalogs): the head and a row per
 * catalog, the design's rule between rows. The breadcrumbs, eyebrow, quote bar and button are the shared
 * ones (inner.css, base.css); the lightbox is the flip-catalog plugin's (its viewer.css).
 *
 * Desktop values are the 1440px frame's and scale down with clamp(). Logical properties throughout, so
 * RTL (fa, ar) and LTR (en) share every rule.
 */

/* ----------------------------------------------------------------------------------------------
 * Head (299:11466): 32 under the breadcrumbs; the eyebrow, 32, the title on the design's 85px line, 24,
 * the lead with the quote bar, all at the start.
 * ------------------------------------------------------------------------------------------- */

.nglv2-cats__head {
	display: flex;
	flex-direction: column;
	margin-top: clamp(24px, 2.2223vw, 32px);
}

.nglv2 .nglv2-cats__title {
	margin-top: clamp(20px, 2.2223vw, 32px);
	font-weight: 800;
	font-size: clamp(28px, calc(12px + 1.945vw), 40px);
	line-height: 1.6;
	color: var(--nglv2-ink);
}

/* The lead wraps where the design's does: its text box is 1107 wide, plus the quote bar's 2 + 24. */
.nglv2 .nglv2-cats__lead {
	max-width: 1133px;
	margin-top: 24px;
	font-size: clamp(17px, calc(8px + 1.111vw), 24px);
	line-height: 1.5;
	color: var(--nglv2-grey);
}

@media (min-width: 1024px) {
	.nglv2 .nglv2-cats__title {
		line-height: 2.125; /* 85px at 40px, as drawn */
	}
}

@media (min-width: 1200px) {
	.nglv2 .nglv2-cats__lead {
		line-height: 29.6px;
	}
}

/* ----------------------------------------------------------------------------------------------
 * Rows (299:11400): 64 under the head and 64 either side of each rule (299:11495); the image (578 × 339,
 * radius 32) at the start, 24, the text column centred beside it: title, 32, text, 32, the button.
 * ------------------------------------------------------------------------------------------- */

.nglv2-cats__list {
	display: flex;
	flex-direction: column;
	gap: var(--nglv2-igap);
	margin-top: var(--nglv2-igap);
}

.nglv2-cat {
	display: flex;
	align-items: center;
	gap: 24px;
}

.nglv2 .nglv2-cat__media {
	position: relative;
	display: block;
	flex: 0 0 48.1667%; /* 578 of 1200 */
	aspect-ratio: 578 / 339;
	overflow: hidden;
	border-radius: 32px;
	background: #fff;
}

.nglv2 .nglv2-cat__img,
.nglv2 .nglv2-cat__backdrop {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.nglv2 .nglv2-cat__img {
	transition: transform 0.8s var(--nglv2-ease);
}

.nglv2 .nglv2-cat__media:hover .nglv2-cat__img {
	transform: scale(1.04);
}

/* A catalog's cover (a PDF's first page, portrait or landscape): the whole page over a blurred copy of
   itself, as on the homepage. */
.nglv2 .nglv2-cat__media--whole .nglv2-cat__img {
	object-fit: contain;
}

.nglv2 .nglv2-cat__backdrop {
	filter: blur(28px);
	opacity: 0.6;
	transform: scale(1.2);
}

/* A banner wider than the frame (a homepage slide image, about 2.2 : 1): NGL's banners carry the logo
   and the text on their left and the photo on their right, so the photo is what gets cropped. */
.nglv2 .nglv2-cat__media--wide .nglv2-cat__img {
	object-position: left center;
}

.nglv2-cat__placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--nglv2-accent);
}

.nglv2-cat__placeholder .nglv2-icon {
	width: 64px;
	height: 64px;
}

.nglv2-cat__body {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	align-items: flex-start;
	gap: 32px;
	min-width: 0;
}

.nglv2 .nglv2-cat__title {
	display: flex;
	align-items: center;
	font-weight: 700;
	font-size: clamp(22px, calc(8px + 1.667vw), 32px);
	line-height: 1.3;
	color: #000;
}

/* Figma sets the 32px title in a 46px box with 29.6px lines and centres it there, so the design's
   two-line title overflows the box by 6.6 above and below; a fixed box with centred content does the
   same, which keeps the text and the button where they are drawn. */
@media (min-width: 1200px) {
	.nglv2 .nglv2-cat__title:not(.nglv2-cat__title--long) {
		height: 46px;
		line-height: 0.925;
	}
}

.nglv2 .nglv2-cat__text {
	font-size: 16px;
	line-height: 29.6px;
	color: #000;
}

/* The rule between rows: grey at the start, a 226px green segment at the end, 16 apart (as under each
   news row, news.css). */
.nglv2-cats__rule {
	display: flex;
	align-items: center;
	gap: 16px;
}

.nglv2-cats__rule span:first-child {
	flex: 1;
	height: 1px;
	background: rgba(0, 0, 0, 0.25);
}

.nglv2-cats__rule span:last-child {
	flex: 0 0 226px;
	height: 1px;
	background: var(--nglv2-accent);
}

.nglv2 .nglv2-cats__empty {
	margin-top: var(--nglv2-igap);
	font-size: 18px;
	color: var(--nglv2-muted);
}

/* ----------------------------------------------------------------------------------------------
 * Narrower screens (not drawn): the image on top, the text under it.
 * ------------------------------------------------------------------------------------------- */

@media (max-width: 1023px) {
	.nglv2-cat {
		flex-direction: column;
		align-items: stretch;
		gap: 24px;
	}

	.nglv2 .nglv2-cat__media {
		flex: none;
		width: 100%;
	}

	.nglv2-cat__body {
		gap: 20px;
	}

	.nglv2-cats__rule span:last-child {
		flex-basis: min(226px, 30%);
	}
}

@media (max-width: 767px) {
	.nglv2 .nglv2-cat__media {
		border-radius: 24px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nglv2 .nglv2-cat__img {
		transition: none;
	}

	.nglv2 .nglv2-cat__media:hover .nglv2-cat__img {
		transform: none;
	}
}