/*
 * NGL v2 — the inspection services page (Figma "Technical Inspection" 201:12377,
 * design/inspection-services): the hero's height, the inspection areas and memberships. The page under
 * the solid header, breadcrumbs, eyebrow, the services' hero, section titles, accreditation badges,
 * complaints band, FAQ and closing section are in inner.css (the title rules, the accreditation and the
 * hero's ExtraBold title moved there on 2026-10-03, for the metrology page), the dialog in dialog.css.
 *
 * Desktop values are the 1440px frame's. Logical properties throughout, so the RTL design mirrors for
 * English. Text has no fixed width or height: a longer translation wraps and makes its box taller.
 * Figma positions are physical; where the design puts something on the left in RTL (inline-end), the
 * markup orders it last.
 */

.nglv2-ipage--inspection {
	--nglv2-igap: clamp(48px, 5.5556vw, 80px); /* between the page's sections: 80 at 1440 */
	--nglv2-insp-deep: #005b4d;                /* list labels and notes */
}

/* ----------------------------------------------------------------------------------------------
 * Hero (Figma 209:13681): the services' hero (`nglv2-lhero--service` in inner.css: ExtraBold title,
 * looser paragraph), 391 tall, with a two-line subtitle
 * ------------------------------------------------------------------------------------------- */

.nglv2-lhero--inspection .nglv2-lhero__media {
	min-height: 391px;
}

.nglv2 .nglv2-lhero--inspection .nglv2-lhero__subtitle {
	max-width: 616px;
}

.nglv2 .nglv2-lhero--inspection .nglv2-lhero__badge {
	inset-block-end: 106px; /* top 212 of 391 */
}

/* ----------------------------------------------------------------------------------------------
 * Inspection areas (Figma 219:14799): groups 32 apart, each a title, a lead and its cards
 * ------------------------------------------------------------------------------------------- */

.nglv2-iareas {
	margin-top: var(--nglv2-igap);
}

.nglv2-iareas > .nglv2-container,
.nglv2-igroup {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.nglv2-igroup {
	scroll-margin-top: calc(var(--nglv2-header-h) + 24px);
}

.nglv2-igroup__head {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.nglv2 .nglv2-igroup__title {
	font-family: var(--nglv2-font-cta); /* Vazirmatn ExtraBold, as drawn for the group titles */
	font-weight: 800;
	font-size: clamp(28px, calc(12px + 1.945vw), 40px);
	line-height: 1.6;
	color: var(--nglv2-ink);
}

.nglv2 .nglv2-igroup__lead {
	max-width: 899px; /* 873 of text inside the quote bar */
	font-size: clamp(17px, calc(8px + 1.111vw), 24px);
	line-height: 1.3333;
	color: #586965;
}

/* Two cards to a row; a row's cards are as tall as the taller one. */
.nglv2-igroup__cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 32px;
}

/* ----------------------------------------------------------------------------------------------
 * Area card (Figma 280:8800 / 280:8931): white, 22px corners; photo 269 on top, or a 253px column at
 * the inline-start side on a wide card
 * ------------------------------------------------------------------------------------------- */

.nglv2-icard {
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	border-radius: 22px;
	background: #fff;
}

.nglv2-icard--wide {
	grid-column: 1 / -1;
	flex-direction: row;
}

.nglv2-icard__media {
	position: relative;
	flex: 0 0 auto;
	aspect-ratio: 584 / 269;
	background: var(--nglv2-navy);
}

.nglv2-icard--wide .nglv2-icard__media {
	flex: 0 0 253px;
	aspect-ratio: auto;
}

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

.nglv2-icard__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 32px;
	min-width: 0;
	padding: 32px;
}

.nglv2-icard__head {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.nglv2 .nglv2-icard__title {
	font-weight: 800;
	font-size: clamp(22px, calc(10px + 1.25vw), 28px);
	line-height: 1.6;
	color: var(--nglv2-ink);
}

.nglv2 .nglv2-icard__text {
	font-size: 13px;
	line-height: 28px;
	color: #000;
}

.nglv2-icard__block {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.nglv2 .nglv2-icard__label {
	font-weight: 800;
	font-size: 10px;
	line-height: 15px;
	color: var(--nglv2-insp-deep);
}

.nglv2 .nglv2-icard__list {
	padding-top: 9px;
}

/* Rows 34 tall with a rule under each and a green dot at the inline-start. */
.nglv2 .nglv2-icard__list > li {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 34px;
	border-bottom: 0.8px solid #e1e5e1;
	font-weight: 500;
	font-size: 12px;
	line-height: 18.15px;
	color: var(--nglv2-grey);
}

.nglv2 .nglv2-icard__list > li::before {
	content: "";
	flex: 0 0 5px;
	height: 5px;
	border-radius: 2.5px;
	background: var(--nglv2-green);
}

.nglv2-icard__list > li > span {
	min-width: 0;
}

/* "When this service applies": a sentence, wrapped at the design's 383px, 7 above the rule. */
.nglv2 .nglv2-icard__list--uses > li {
	padding-bottom: 7px;
}

.nglv2-icard__list--uses > li > span {
	max-width: 383px;
}

/* The wide card draws it narrower (242px), so it wraps as in the two-column cards. */
.nglv2-icard--wide .nglv2-icard__list--uses > li > span {
	max-width: 242px;
}

/* The note sits at the bottom, so two cards in a row end on the same line. */
.nglv2 .nglv2-icard__note {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	font-size: 10px;
	line-height: 18px;
	color: var(--nglv2-insp-deep);
}

.nglv2 .nglv2-icard__note .nglv2-icon {
	flex: 0 0 17px;
	width: 17px;
	height: 17px;
	color: var(--nglv2-green);
}

/* ----------------------------------------------------------------------------------------------
 * Not drawn: narrower screens
 * ------------------------------------------------------------------------------------------- */

@media (max-width: 1023px) {
	/* One card per row; a wide card's photo goes on top like the others. */
	.nglv2-igroup__cards {
		grid-template-columns: minmax(0, 1fr);
	}

	.nglv2-icard--wide {
		flex-direction: column;
	}

	.nglv2-icard--wide .nglv2-icard__media {
		flex: 0 0 auto;
		aspect-ratio: 584 / 269;
	}

	.nglv2 .nglv2-icard__list--uses > li > span {
		max-width: none;
	}
}

@media (max-width: 639px) {
	.nglv2-icard__body {
		padding: 24px 20px;
	}}