/* ==========================================================================
   Blue Mar Basins 2026 — filtration.css
   Filtration page (page-filtration.php), built from the client mockup
   "2026.10.30_BMB Update_Filters.pdf" — a 2545px-wide browser capture, so
   every "Comp:" figure below is a CSS px measurement off that capture at a
   2545px viewport (container 613–1933, page y measured from the top of the
   page, header included). Loaded only on this template (functions.php).
   Depends on tokens/utilities declared in base.css.
   ========================================================================== */

.bmb-filtration {
	position: relative;
	/* Comp: 1px rules and the Blue Renew divider. */
	--bmb-filtration-rule: rgba(0, 23, 56, .5);
	--bmb-filtration-stripe: #EBF8FD;
	--bmb-filtration-divider: #0AA8D0;
	overflow: hidden;
}

/* Honeycomb page background, fading to white left to right (client brief).
   Comp geometry, measured off the 2x render: pointy-top hexagons R=22.3
   (38.6px column pitch) in two touching rows per 111.5px (5R) period, every
   other cell holding a hexagon of R=12.9, with a row of free-standing small
   hexagons on the column lines in the 1R gap between periods. This is a
   different lattice from the homepage hexband's, so it has its own tile.
   Stroke #82D8ED at 1.05px (a single 1px line at the 1x comp); the fade was sampled every 50px across the 2545px comp
   and is set in % so narrower screens keep the same proportions (gone by
   ~45%). Phase: first row centre 15px below the header, first column 22px
   in. The navy Blue Renew band paints over it. */
.bmb-filtration::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2077.249%20111.5'%3E%3Cpath%20fill='none'%20stroke='%2382D8ED'%20stroke-width='1.05'%20d='M0,-22.3L19.31,-11.15L19.31,11.15L0,22.3L-19.31,11.15L-19.31,-11.15ZM38.62,-22.3L57.94,-11.15L57.94,11.15L38.62,22.3L19.31,11.15L19.31,-11.15ZM38.62,-12.9L49.8,-6.45L49.8,6.45L38.62,12.9L27.45,6.45L27.45,-6.45ZM0,44.6L19.31,55.75L19.31,78.05L0,89.2L-19.31,78.05L-19.31,55.75ZM0,54L11.17,60.45L11.17,73.35L0,79.8L-11.17,73.35L-11.17,60.45ZM38.62,44.6L57.94,55.75L57.94,78.05L38.62,89.2L19.31,78.05L19.31,55.75ZM19.31,20.55L30.48,27L30.48,39.9L19.31,46.35L8.14,39.9L8.14,27ZM57.94,20.55L69.11,27L69.11,39.9L57.94,46.35L46.77,39.9L46.77,27ZM77.25,-22.3L96.56,-11.15L96.56,11.15L77.25,22.3L57.94,11.15L57.94,-11.15ZM77.25,44.6L96.56,55.75L96.56,78.05L77.25,89.2L57.94,78.05L57.94,55.75ZM77.25,54L88.42,60.45L88.42,73.35L77.25,79.8L66.08,73.35L66.08,60.45ZM0,89.2L19.31,100.35L19.31,122.65L0,133.8L-19.31,122.65L-19.31,100.35ZM38.62,89.2L57.94,100.35L57.94,122.65L38.62,133.8L19.31,122.65L19.31,100.35ZM38.62,98.6L49.8,105.05L49.8,117.95L38.62,124.4L27.45,117.95L27.45,105.05ZM77.25,89.2L96.56,100.35L96.56,122.65L77.25,133.8L57.94,122.65L57.94,100.35Z'/%3E%3C/svg%3E");
	background-repeat: repeat;
	background-size: 77.249px 111.5px;
	background-position: 22.5px 15px;
	-webkit-mask-image: linear-gradient(to right, #000 0%, rgba(0, 0, 0, .85) 2%, rgba(0, 0, 0, .76) 3.9%, rgba(0, 0, 0, .6) 7.9%, rgba(0, 0, 0, .49) 11.8%, rgba(0, 0, 0, .35) 15.7%, rgba(0, 0, 0, .26) 19.6%, rgba(0, 0, 0, .18) 23.6%, rgba(0, 0, 0, .11) 27.5%, rgba(0, 0, 0, .08) 31.4%, rgba(0, 0, 0, .045) 35.4%, rgba(0, 0, 0, .02) 39.3%, rgba(0, 0, 0, 0) 45.2%);
	mask-image: linear-gradient(to right, #000 0%, rgba(0, 0, 0, .85) 2%, rgba(0, 0, 0, .76) 3.9%, rgba(0, 0, 0, .6) 7.9%, rgba(0, 0, 0, .49) 11.8%, rgba(0, 0, 0, .35) 15.7%, rgba(0, 0, 0, .26) 19.6%, rgba(0, 0, 0, .18) 23.6%, rgba(0, 0, 0, .11) 27.5%, rgba(0, 0, 0, .08) 31.4%, rgba(0, 0, 0, .045) 35.4%, rgba(0, 0, 0, .02) 39.3%, rgba(0, 0, 0, 0) 45.2%);
	pointer-events: none;
}

.bmb-filtration > * {
	position: relative;
	z-index: 1;
}

/* Intro ------------------------------------------------------------------ */
.bmb-filtration__intro-inner {
	display: grid;
	grid-template-columns: minmax(0, 640px) minmax(0, 1fr);
	align-items: start;
}

.bmb-filtration__intro-copy {
	/* Comp: "Filtration" ink top 117px below the header. */
	padding-top: 101px;
}

.bmb-filtration__title {
	/* Comp sets this in Geomanist Thin, which we don't self-host; ExtraLight
	   at the comp's ink size (360 x 79 for the word) is the closest match. */
	font-weight: 200;
	font-size: 108px;
	line-height: 1;
	/* Pull the F's side bearing back onto the container edge (comp x=613). */
	margin-left: -.09em;
	/* Thin's strokes measure ~25% heavier than ExtraLight's at this size;
	   a hairline outline makes up the difference. */
	-webkit-text-stroke: .5px currentColor;
	color: var(--bmb-navy);
	/* Comp: title baseline to first paragraph line, 61px of ink gap. */
	margin-bottom: 43px;
}

.bmb-filtration__intro-copy p {
	/* Comp: 18px on a 21.5px pitch, 22px between paragraphs, 629px measure. */
	font-size: 18px;
	line-height: 1.2;
	color: var(--bmb-navy);
}

.bmb-filtration__intro-copy p + p {
	margin-top: 22px;
}

.bmb-filtration__hero {
	/* Comp: render ink 1405–1730 x 126–614 — 56px under the header and
	   203px in from the container's right edge. */
	justify-self: end;
	width: 326px;
	height: auto;
	margin-top: 56px;
	margin-right: 203px;
}

/* Spec tables -------------------------------------------------------------- */
.bmb-filtration__lines-inner {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	/* Comp: tables 613–1247 and 1299–1933. */
	column-gap: 52px;
	/* Comp: last intro line ends y=578, "Standard" cap-line at y=650. */
	padding-top: 32px;
}

.bmb-filtration__line-heading {
	/* Comp: cyan bold, cap height 22px, inset 16px, baseline 14px above
	   the table. */
	padding-left: 16px;
	margin-bottom: 9px;
	font-weight: 700;
	font-size: 30px;
	line-height: 1;
	letter-spacing: -.02em;
	color: var(--bmb-cyan);
}

.bmb-filtration__card {
	border: 1px solid var(--bmb-navy);
	background: var(--bmb-navy);
}

.bmb-filtration__table-wrap {
	overflow-x: auto;
	background: var(--bmb-white);
}

.bmb-filtration__table-wrap:focus-visible {
	outline: 2px solid var(--bmb-blue-deep);
	outline-offset: 2px;
}

.bmb-filtration__table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
	font-size: 18px;
	color: var(--bmb-navy);
	text-align: center;
}

/* Comp column centres (std / short): 194/200, 315/319, 433/435, 568/568px
   from the table's left edge; the model column is left-aligned 16px in. */
.bmb-filtration__col--model { width: 20%; }
.bmb-filtration__col--flow { width: 22%; }
.bmb-filtration__col--height { width: 15.8%; }
.bmb-filtration__col--diameter { width: 21.1%; }
.bmb-filtration__col--connection { width: 21.1%; }

.bmb-filtration__table th,
.bmb-filtration__table td {
	padding: 0 6px;
	vertical-align: middle;
}

.bmb-filtration__table th:first-child {
	padding-left: 16px;
	text-align: left;
}

/* Comp: model numbers start 2px left of the header labels. */
.bmb-filtration__table tbody th:first-child {
	padding-left: 14px;
}

.bmb-filtration__table thead th {
	/* Comp: 72px header row, two 22px lines, regular weight. */
	height: 72px;
	padding-top: 4px;
	font-weight: 400;
	line-height: 22px;
	border-bottom: 1px solid var(--bmb-navy);
}

.bmb-filtration__table tbody th,
.bmb-filtration__table td {
	/* Comp: cell text on a 42.6px pitch (ink tops 778/821/863/906/948/991);
	   the last row takes the comp's extra 8.4px. Medium weight, striped
	   from the first row. */
	height: 42.6px;
	padding-top: 12px;
	font-weight: 500;
	line-height: 1.2;
}

.bmb-filtration__table tbody tr:nth-child(odd) {
	background: var(--bmb-filtration-stripe);
}

@media (min-width: 601px) {
	.bmb-filtration__table tbody tr:last-child th,
	.bmb-filtration__table tbody tr:last-child td {
		height: 51px;
		padding-bottom: 8.4px;
	}

	/* Comp: the Short table's figures sit ~3.5px right of the Standard's.
	   Longhands only, so the cells' padding-top survives. */
	.bmb-filtration__line--short .bmb-filtration__table td,
	.bmb-filtration__line--short .bmb-filtration__table thead th:not(:first-child) {
		padding-left: 10px;
		padding-right: 3px;
	}
}

.bmb-filtration__file {
	color: var(--bmb-blue-deep);
	text-decoration: underline;
}

.bmb-filtration__lineup {
	/* Comp: the lineup fills a 169px navy panel edge to edge — the render's
	   own navy backdrop is the panel. */
	display: block;
	width: 100%;
	height: auto;
}

/* High Efficiency ------------------------------------------------------------ */
.bmb-filtration__efficiency {
	/* Comp: card bottom y=1193, heading cap-line y=1272. */
	padding-top: 77px;
}

.bmb-filtration__efficiency-heading {
	font-weight: 700;
	font-size: 30px;
	line-height: 1;
	letter-spacing: -.01em;
	color: var(--bmb-cyan);
	/* Comp: 2px rule at y=1305, ~7px under the descenders. */
	padding-bottom: 6px;
	border-bottom: 2px solid var(--bmb-filtration-rule);
}

.bmb-filtration__efficiency-copy {
	/* Comp: copy ink 1333–1348, closing 1px rule at y=1374. */
	padding: 22px 0 24px;
	border-bottom: 1px solid var(--bmb-navy);
	font-size: 18px;
	line-height: 1.2;
	color: var(--bmb-navy);
}

.bmb-filtration__efficiency-copy a {
	color: var(--bmb-blue-deep);
	/* Underlined at rest: colour alone is only 2.76:1 against the copy. */
	text-decoration: underline;
	text-underline-offset: .15em;
	/* Lets the long address wrap on narrow screens with text spacing on. */
	overflow-wrap: anywhere;
}

.bmb-filtration__efficiency-copy a:hover,
.bmb-filtration__efficiency-copy a:focus-visible {
	text-decoration-thickness: 2px;
}

/* Blue Renew band --------------------------------------------------------- */
.bmb-filtration__renew {
	/* Comp: navy band y=1479–1794 (316px), 105px under the closing rule. */
	margin-top: 104px;
	background: var(--bmb-navy);
	color: var(--bmb-white);
}

.bmb-filtration__renew-inner {
	display: grid;
	/* Same two columns as the spec tables: the divider sits on the left
	   column's right edge (x=1247), the copy starts with the right one. */
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 52px;
	align-items: center;
	/* Comp: divider runs y=1504–1762 — 25px in from the top, 32px from the
	   bottom; the band itself is 316px tall. */
	padding-block: 25px 32px;
}

.bmb-filtration__renew-brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	align-self: stretch;
	min-height: 259px;
	/* Comp: the lockup centres ~17px left of and 8px above the column's
	   centre; the -1px puts the divider on x=1247. */
	padding: 0 34px 16px 0;
	margin-right: -1px;
	border-right: 1px solid var(--bmb-filtration-divider);
}

.bmb-filtration__renew-kicker {
	/* Comp: "Balanced with" ink 848–956, 15px above the logo crop. */
	margin-bottom: 10px;
	margin-right: 22px;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.2;
}

.bmb-filtration__renew-brand img {
	width: 566px;
	max-width: 100%;
	height: auto;
}

.bmb-filtration__renew-copy {
	/* Comp: copy 1300–1811 (512px measure), white 18px on a 21.5px pitch. */
	max-width: 520px;
	font-size: 18px;
	line-height: 1.2;
}

.bmb-filtration__renew-copy p + p {
	margin-top: 21px;
}

/* Visible stand-in until the client's Blue Renew paragraph arrives. */
.bmb-filtration__pending {
	padding: 24px;
	border: 2px dashed var(--bmb-cyan);
	border-radius: var(--bmb-radius-sm);
	color: var(--bmb-sky);
	font-size: 16px;
	text-align: center;
}

/* NSF ------------------------------------------------------------------------ */
.bmb-filtration__nsf {
	/* Comp: mark top 94px under the band. */
	padding-block: 87px 110px;
}

.bmb-filtration__nsf-figure {
	/* Comp: mark and line both start ~43px in from the container edge. */
	margin-left: 38px;
}

.bmb-filtration__nsf-figure img {
	width: 120px;
	height: auto;
}

.bmb-filtration__nsf-figure figcaption {
	/* Comp: mark bottom y=2031, line ink top y=2051. */
	margin-top: 8px;
	/* Comp: the line starts 5px right of the mark's box. */
	margin-left: 5px;
	font-size: 18px;
	line-height: 1.2;
	color: var(--bmb-navy);
}

/* Responsive ------------------------------------------------------------- */

/* The comp only exists at desktop width; below it the render pulls in
   before the copy column has to give way. */
@media (max-width: 1280px) {
	/* The copy column gives way to the render instead of running under it. */
	.bmb-filtration__intro-inner {
		grid-template-columns: minmax(0, 640px) auto;
		justify-content: space-between;
		column-gap: 40px;
	}

	.bmb-filtration__hero {
		width: clamp(240px, 27vw, 326px);
		margin-right: clamp(0px, 8vw, 120px);
	}
}

/* Two tables side by side stop fitting their five columns at 18px. */
@media (max-width: 1100px) {
	.bmb-filtration__lines-inner {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 56px;
	}

	.bmb-filtration__renew-inner {
		column-gap: 40px;
	}

	.bmb-filtration__renew-brand {
		padding-right: 40px;
	}
}

/* Side-by-side tables just above the stacking point: keep model numbers on
   one line. */
@media (min-width: 1101px) and (max-width: 1290px) {
	.bmb-filtration__table {
		font-size: 16px;
	}

	.bmb-filtration__table tbody th {
		white-space: nowrap;
	}
}

@media (max-width: 900px) {
	.bmb-filtration__intro-inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.bmb-filtration__intro-copy {
		padding-top: 48px;
	}

	.bmb-filtration__title {
		font-size: clamp(56px, 14vw, 96px);
		margin-bottom: 28px;
	}

	.bmb-filtration__hero {
		justify-self: center;
		width: min(260px, 70%);
		margin: 32px 0 0;
	}

	.bmb-filtration__lines-inner {
		padding-top: 56px;
	}

	.bmb-filtration__efficiency {
		padding-top: 64px;
	}

	.bmb-filtration__renew {
		margin-top: 72px;
	}

	/* The divider turns horizontal between the stacked logo and copy. */
	.bmb-filtration__renew-inner {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 32px;
		padding-block: 48px;
	}

	.bmb-filtration__renew-brand {
		min-height: 0;
		padding: 0 0 32px;
		border-right: 0;
		border-bottom: 1px solid var(--bmb-filtration-divider);
	}

	.bmb-filtration__renew-kicker {
		margin-right: 0;
	}

	.bmb-filtration__renew-copy {
		max-width: none;
	}

	.bmb-filtration__nsf {
		padding-block: 64px 80px;
	}

	.bmb-filtration__nsf-figure {
		margin-left: 0;
	}
}

/* Just above the phone layout the model numbers would wrap at 18px. */
@media (min-width: 601px) and (max-width: 640px) {
	.bmb-filtration__table {
		font-size: 16px;
	}
}

@media (max-width: 600px) {
	.bmb-filtration__intro-copy p,
	.bmb-filtration__efficiency-copy,
	.bmb-filtration__renew-copy,
	.bmb-filtration__nsf-figure figcaption {
		font-size: 16px;
		line-height: 1.35;
	}

	.bmb-filtration__line-heading,
	.bmb-filtration__efficiency-heading {
		font-size: 26px;
	}

	.bmb-filtration__line-heading {
		padding-left: 8px;
	}

	/* Five columns squeezed onto a phone: smaller type and padding; the
	   wrapper scrolls sideways if a value still will not fit. */
	.bmb-filtration__table {
		min-width: 320px;
		font-size: 12.5px;
	}

	.bmb-filtration__table th,
	.bmb-filtration__table td {
		padding: 0 2px;
	}

	.bmb-filtration__table th:first-child {
		padding-left: 8px;
	}

	.bmb-filtration__table thead th {
		height: 56px;
		line-height: 16px;
	}

	.bmb-filtration__table tbody th,
	.bmb-filtration__table td {
		height: 36px;
		padding-top: 10px;
	}

	.bmb-filtration__col--model { width: 26%; }
	.bmb-filtration__col--flow { width: 21%; }
	.bmb-filtration__col--height { width: 15%; }
	.bmb-filtration__col--diameter { width: 18%; }
	.bmb-filtration__col--connection { width: 20%; }

	.bmb-filtration__renew-brand img {
		width: 300px;
	}

	.bmb-filtration__pending {
		padding: 16px;
		font-size: 15px;
	}
}