/*
 * NGL v2 — the weights, scales and metrology page (Figma "Metrology" 233:8296, design/metrology): the
 * hero's height, the three wide highlights, the introduction with its round badge, the "who is it
 * for" grid and the note under the equipment. The page under the solid header, breadcrumbs, the services' hero, section titles, equipment,
 * accreditation badges, complaints band, the prerequisites (FAQ) and closing section are in inner.css,
 * 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--metrology {
	--nglv2-igap: clamp(48px, 5.5556vw, 80px);      /* between the page's sections: 80 at 1440 */
	--nglv2-metro-rule: rgba(109, 190, 69, 0.3);    /* the grid's lines */
}

/* The complaints band's first button is in the band's own green (Figma 275:7933). */
.nglv2-ipage--metrology .nglv2-complaints {
	--nglv2-complaints-ink: #0d4036;
}

/* The design of 2026-10-07 pulled the two buttons apart from the icon (275:7928, 212 -> 243): 32 under
   the headset, 18 between the buttons, the three of them centred in the drawn 243. The inspection and
   labs pages keep the band as it was, so this is the metrology page's alone. */
@media (min-width: 1024px) {
	.nglv2-ipage--metrology .nglv2-complaints__action--two {
		justify-content: center;
		gap: 18px;
		min-height: 243px;
	}

	.nglv2-ipage--metrology .nglv2-complaints__action--two .nglv2-complaints__icon {
		margin-bottom: 14px;
	}
}

/* ----------------------------------------------------------------------------------------------
 * Hero (Figma 233:8301): the services' hero (`nglv2-lhero--service` in inner.css), 363 tall
 * ------------------------------------------------------------------------------------------- */

.nglv2-lhero--metrology .nglv2-lhero__media {
	min-height: 363px;
}

.nglv2 .nglv2-lhero--metrology .nglv2-lhero__badge {
	inset-block-end: 79.6px; /* top 212 of 363, 71.4 tall */
}

/* ----------------------------------------------------------------------------------------------
 * Highlights (Figma 243:10275): 32 under the hero, three items of 300 (text 247) spread evenly, top
 * aligned, with a looser description (11/18.7)
 * ------------------------------------------------------------------------------------------- */

@media (min-width: 1024px) {
	.nglv2-ipage--metrology .nglv2-lhl {
		margin-top: 32px;
	}

	.nglv2-ipage--metrology .nglv2-lhl__list {
		align-items: flex-start;
	}

	/* A width, not a basis: a one-line description would otherwise make its item narrower. */
	.nglv2-ipage--metrology .nglv2-lhl__text {
		width: 247px;
		min-width: 0;
		max-width: none;
	}
}

.nglv2-ipage--metrology .nglv2-lhl__desc {
	line-height: 18.7px;
}

/* Not drawn: three narrow columns on tablets, one item per row on phones (two columns would leave the
 * third alone). */
@media (min-width: 768px) and (max-width: 1023px) {
	.nglv2-ipage--metrology .nglv2-lhl__list--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.nglv2-ipage--metrology .nglv2-lhl__list--3 {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}
}

/* ----------------------------------------------------------------------------------------------
 * Introduction (Figma 243:10200): the title and text (740) at the inline-start, a 210px round badge
 * 138 from them
 * ------------------------------------------------------------------------------------------- */

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

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

.nglv2-mintro__row {
	display: flex;
	align-items: center;
	gap: clamp(48px, 9.5834vw, 138px);
}

.nglv2-mintro__copy {
	display: flex;
	flex: 0 1 740px;
	flex-direction: column;
	gap: 24px;
	min-width: 0;
}

/* Vazirmatn ExtraBold, as drawn (the page's other titles are IRANSansX). */
.nglv2 .nglv2-mintro__title {
	font-family: var(--nglv2-font-cta);
	font-weight: 800;
	font-size: clamp(28px, calc(12px + 1.945vw), 40px);
	line-height: 1.6;
	color: var(--nglv2-ink);
}

.nglv2 .nglv2-mintro__text {
	font-size: clamp(17px, calc(8px + 1.111vw), 24px);
	line-height: 1.6667; /* 40 */
	color: var(--nglv2-muted);
}

/* "Precise measurement — expert response": a thin green ring with a dashed one 12px inside it. Figma
 * renders that 0.8px dash as fine dots, which CSS `dotted` matches (its `dashed` draws 3px dashes). */
.nglv2 .nglv2-mintro__badge {
	position: relative;
	display: flex;
	flex: 0 0 210px;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 210px;
	border: 0.8px solid rgba(109, 190, 69, 0.5);
	border-radius: 50%;
	text-align: center;
}

.nglv2-mintro__badge::before {
	content: "";
	position: absolute;
	inset: 12px;
	border: 0.8px dotted rgba(109, 190, 69, 0.3);
	border-radius: 50%;
	pointer-events: none;
}

.nglv2 .nglv2-mintro__badge .nglv2-icon {
	width: 40px;
	height: 40px;
	margin-bottom: 12px;
	color: var(--nglv2-accent);
}

.nglv2-mintro__badge-title {
	font-size: 13px;
	line-height: 19.5px;
	color: var(--nglv2-ink);
}

.nglv2-mintro__badge-text {
	padding-top: 4px;
	font-size: 8px;
	line-height: 12px;
	color: rgba(25, 36, 49, 0.45);
}

@media (max-width: 1023px) {
	.nglv2 .nglv2-mintro__badge {
		flex-basis: 168px;
		height: 168px;
	}

	.nglv2-mintro__badge::before {
		inset: 10px;
	}

	.nglv2 .nglv2-mintro__badge .nglv2-icon {
		width: 32px;
		height: 32px;
		margin-bottom: 8px;
	}
}

/* Phones: the text alone (the badge is decoration). */
@media (max-width: 639px) {
	.nglv2 .nglv2-mintro__badge {
		display: none;
	}
}

/* ----------------------------------------------------------------------------------------------
 * Who the service is for (Figma 243:10350): cells of 260 in two columns, ruled with 2px light green
 * lines; the icon at the top, the title and text at the bottom
 * ------------------------------------------------------------------------------------------- */

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

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

/* The grid draws its inline-start line; each cell its bottom and inline-end ones, and the first row
 * its top one (cells are 260 tall with their lines, as drawn). An odd last cell is still closed on
 * every side. The columns are 598 and 600 wide: the middle line falls where it is drawn. */
.nglv2 .nglv2-muses__grid {
	display: grid;
	grid-template-columns: minmax(0, 598fr) minmax(0, 600fr);
	border-inline-start: 2px solid var(--nglv2-metro-rule);
}

.nglv2-muses__cell {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 24px;
	min-width: 0;
	min-height: 260px;
	padding: 24px 32px;
	border-bottom: 2px solid var(--nglv2-metro-rule);
	border-inline-end: 2px solid var(--nglv2-metro-rule);
}

.nglv2-muses__cell:nth-child(-n + 2) {
	border-top: 2px solid var(--nglv2-metro-rule);
}

.nglv2-muses__icon {
	display: flex;
	align-items: center;
	height: 32px;
	color: #5c9f41;
}

.nglv2 .nglv2-muses__icon .nglv2-icon {
	width: 31px;
	height: 32px;
}

/* The four cards added on 2026-10-07 are drawn on a 32 box, not the 31/30 of the first four. */
.nglv2 .nglv2-muses__icon .nglv2-icon--use-plant,
.nglv2 .nglv2-muses__icon .nglv2-icon--use-livestock,
.nglv2 .nglv2-muses__icon .nglv2-icon--use-grain,
.nglv2 .nglv2-muses__icon .nglv2-icon--use-flask {
	width: 32px;
}

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

.nglv2 .nglv2-muses__title {
	font-weight: 800;
	font-size: clamp(24px, calc(17.6px + 1vw), 32px);
	line-height: 1.5;
	color: #005b4d;
}

.nglv2 .nglv2-muses__desc {
	/* The design's boxes are 377–402 wide, set per text so each breaks after chosen words; Chrome sets
	   these lines up to 1% wider than Figma, so no one width repeats all four. The texts carry the
	   design's line breaks instead (kept on desktop only, below), and this box only has to fit the
	   longest first line (402.5 in Chrome). */
	max-width: 410px;
	font-weight: 500;
	font-size: clamp(16px, calc(12.8px + 0.5vw), 20px);
	line-height: 1.815; /* 36.3 */
	color: var(--nglv2-muted);
}

@media (max-width: 1023px) {
	.nglv2-muses__cell {
		min-height: 220px;
		padding: 24px;
	}

	/* Narrower boxes wrap on their own: the design's breaks would leave short lines. */
	.nglv2-muses__desc br {
		display: none;
	}
}

@media (max-width: 767px) {
	.nglv2 .nglv2-muses__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.nglv2-muses__cell:nth-child(2) {
		border-top: 0;
	}

	.nglv2-muses__cell {
		gap: 16px;
		min-height: 0;
		padding: 20px;
	}

	.nglv2-muses__text {
		gap: 8px;
	}
}

/* ----------------------------------------------------------------------------------------------
 * Equipment (Figma 251:10535): the lab page's mosaic (inner.css) with the design's note 16 under it
 * ------------------------------------------------------------------------------------------- */

.nglv2 .nglv2-leq__note {
	margin-top: 16px;
}