/* =========================================================================
   Billi media page.
   Scoped to .md — mobile-first, min-width media queries only.
   2px buttons, 4px imagery (sharper-corner direction, Aug 2026).

   Mirrors the structure of .hp / .sn / .sc / .ct / .fq / .cs: navy hero,
   filter chips, card grid, navy CTA panel.
   ========================================================================= */

.md {
	--md-navy: #181d46;
	--md-lightblue: #90cdeb;
	--md-band-grey: #f5f5f5;
	--md-band-blue: #f1f5f5;
	--md-text: #1a1a1a;
	--md-muted: #59607a;
	--md-line: #e2e6ee;
	--md-gutter: 20px;

	font-family: 'FFDINStd', Arial, sans-serif;
	color: var(--md-text);
	line-height: 1.5;
}

@media (min-width: 900px) {
	.md { --md-gutter: 40px; }
}

.md *,
.md *::before,
.md *::after { box-sizing: border-box; }

.md-container {
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 var(--md-gutter);
}

/* desktop.css fades every link on hover theme-wide and sets them all to 600.
   Neither suits a card-sized link. */
.md a:hover { opacity: 1; }

/* framework.css removes the focus outline sitewide with no replacement. */
.md a:focus-visible,
.md button:focus-visible {
	outline: 3px solid var(--md-navy);
	outline-offset: 2px;
}

.md-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* The filter hides cards with the `hidden` attribute. The UA rule that backs it
   is weak enough for any display declaration to beat it, so state it here. */
.md [hidden] { display: none !important; }

/* ---- Shared ------------------------------------------------------------- */

/* framework.css flattens every heading to inherit size and weight, so these
   need stating outright or they read as body copy. The .md prefix carries the
   weight to beat the theme's element-level heading rules. */
.md .md-section-heading {
	margin: 0;
	color: var(--md-navy);
	font-size: 26px;
	font-weight: 600;
	line-height: 1.2;
}

@media (min-width: 900px) {
	.md .md-section-heading { font-size: 32px; }
}

.md-icon {
	width: 1em;
	height: 1em;
	flex: 0 0 auto;
}

/* ---- Buttons ------------------------------------------------------------ */

.md .md-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 12px 28px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	border: 0;
	border-radius: 2px;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.md .md-btn:hover { opacity: 1; }

.md .md-btn--light { background: var(--md-lightblue); color: var(--md-navy); }
.md .md-btn--light:hover { background: #fff; }

.md .md-btn--ghost {
	background: transparent;
	color: #fff;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}

.md .md-btn--ghost:hover { background: #fff; color: var(--md-navy); box-shadow: inset 0 0 0 1px #fff; }

/* The ring follows the ground the button sits on: navy is invisible on navy. */
.md-cta .md-btn:focus-visible { outline-color: #fff; }

/* ---- Hero --------------------------------------------------------------- */

/* The old hero was a background-image band with the page title over it. The
   photograph was anchored so that most of it sat outside the band, and the
   title rendered in forced capitals. */
.md-hero {
	background: var(--md-navy);
	color: #fff;
}

.md-hero__inner {
	padding-top: 48px;
	padding-bottom: 48px;
}

.md-hero__eyebrow {
	margin: 0 0 14px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--md-lightblue);
}

/* The title is an h1, so typography.css sets it in DM Serif Display at 400.
   No font-weight here: the serif has no bold cut, and the 600 this rule
   carried from the DIN era made browsers synthesise one. */
.md .md-hero__title {
	margin: 0;
	font-size: 34px;
	line-height: 1.1;
	color: #fff;
	text-wrap: balance;
}

.md-hero__intro {
	margin-top: 18px;
	font-size: 18px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.85);
	max-width: 62ch;
}

.md-hero__intro p { margin: 0 0 0.7em; }
.md-hero__intro p:last-child { margin-bottom: 0; }

/* The intro is a WYSIWYG; an editor may put a heading in it. */
.md-hero__intro :is(h1, h2, h3, h4, h5, h6) {
	margin: 0 0 0.5em;
	font-size: inherit;
	font-weight: 600;
	color: #fff;
}

.md .md-hero__intro a {
	color: #fff;
	text-decoration: underline;
	text-decoration-color: var(--md-lightblue);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.md-hero .md-hero__intro a:focus-visible { outline-color: #fff; }

@media (min-width: 900px) {
	.md-hero__inner { padding-top: 72px; padding-bottom: 72px; }
	.md .md-hero__title { font-size: 46px; }
	.md-hero__intro { font-size: 19px; }
}

/* ---- Videos ------------------------------------------------------------- */

.md-videos { padding: 48px 0; }

.md-videos__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 14px;
	margin-bottom: 20px;
}

.md-count {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--md-muted);
}

@media (min-width: 900px) {
	.md-videos { padding: 72px 0; }
	.md-videos__head { margin-bottom: 24px; }
}

/* ---- Filter chips ------------------------------------------------------- */

/* The row scrolls sideways rather than wrapping on narrow screens, and bleeds
   into the gutter so the last chip is visibly cut off — the cue that there is
   more to the right. */
.md-chips {
	display: flex;
	gap: 8px;
	margin: 0 calc(var(--md-gutter) * -1) 28px;
	padding: 2px var(--md-gutter);
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.md-chips::-webkit-scrollbar { display: none; }

.md .md-chip {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 7px;
	min-height: 38px;
	padding: 8px 16px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--md-navy);
	white-space: nowrap;
	background: var(--md-band-grey);
	border: 1px solid transparent;
	border-radius: 2px;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.md .md-chip:hover { border-color: var(--md-navy); opacity: 1; }

.md .md-chip.is-active {
	color: #fff;
	background: var(--md-navy);
	border-color: var(--md-navy);
}

.md-chip__n {
	font-size: 13px;
	color: var(--md-muted);
	transition: color 0.2s ease;
}

.md .md-chip.is-active .md-chip__n { color: var(--md-lightblue); }

@media (min-width: 900px) {
	.md-chips { margin-bottom: 36px; }
}

/* ---- Video grid --------------------------------------------------------- */

/* A grid, not a carousel. The FlexSlider showed three of nine and clipped the
   outer two at the viewport edge, so six videos had no way of being seen
   except by pressing an arrow that gave no sign of how much was behind it. */
.md-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* min-width: 0 because a grid item's automatic minimum size is its content's
   min-content width, and the blocked-embed placeholder reports a wider one than
   the track. Without this the item grows past its column. */
.md-grid__item { margin: 0; min-width: 0; }

.md-video__frame-wrap {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 4px;
	background: var(--md-navy);
}

/* Covers the iframe and whatever the consent placeholder puts in its place —
   Complianz swaps the embed for its own markup until marketing cookies are
   accepted, and that has to fill the same box. */
.md-video__frame-wrap > * {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.md-video__frame-wrap img {
	object-fit: cover;
}

/* Until a visitor accepts marketing cookies — which is the state most of them
   arrive in — Complianz replaces the embed with its own placeholder. It hangs a
   .cmplz-placeholder-N class on THIS element and injects a stylesheet rule
   giving it a hardcoded pixel height worked out from whichever thumbnail
   YouTube generated for that video: 188px where there is a 16:9 maxresdefault,
   251px where it falls back to a 4:3 hqdefault. Left alone that produces a grid
   of ragged, mismatched tiles that tidies itself up only after consent.
   Specificity here is (0,3,0) against its (0,1,0), so the box keeps its ratio
   without needing !important. */
.md .md-grid__item .md-video__frame-wrap[class*="cmplz-placeholder-"] {
	height: auto;
	min-height: 0;
	aspect-ratio: 16 / 9;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.md .md-video__title {
	margin: 16px 0 0;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--md-navy);
	text-wrap: balance;
}

.md-video__text {
	margin: 8px 0 0;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.45;
	color: var(--md-muted);
}

.md-empty {
	margin: 8px 0 0;
	font-size: 17px;
	color: var(--md-muted);
}

@media (min-width: 640px) {
	.md-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1100px) {
	.md-grid { grid-template-columns: repeat(3, 1fr); gap: 40px 32px; }
}

/* ---- News --------------------------------------------------------------- */

.md-news {
	padding: 48px 0;
	background: var(--md-band-grey);
}

.md-news__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 28px;
}

.md .md-more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 16px;
	font-weight: 600;
	color: var(--md-navy);
	text-decoration: none;
	border-bottom: 2px solid var(--md-lightblue);
	padding-bottom: 2px;
	transition: border-color 0.2s ease;
}

.md .md-more:hover { border-bottom-color: var(--md-navy); }

.md-icon--arrow { transition: transform 0.2s ease; }
.md .md-more:hover .md-icon--arrow { transform: translateX(3px); }

.md-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px 24px;
}

.md-cards > * { min-width: 0; }

.md .md-card__link { display: block; text-decoration: none; color: inherit; }

.md-card__media {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 4px;
	background: var(--md-band-blue);
}

.md-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
}

.md .md-card__link:hover .md-card__media img { transform: scale(1.03); }

.md .md-card__title {
	margin: 16px 0 0;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--md-navy);
	text-wrap: balance;
}

/* The whole card is a link and desktop.css sets `a { font-weight: 600 }`
   globally, so the summary inherits semi-bold without this. */
.md-card__text {
	margin: 8px 0 0;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.45;
	color: var(--md-muted);
}

@media (min-width: 640px) {
	.md-news__head {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

/* The row holds three articles, so it goes straight from one column to three:
   a two-column step would leave the third card orphaned on its own row. It
   waits until 900px because three cards inside a 768px tablet are 221px wide,
   which turns a twenty-word summary into six short lines. */
@media (min-width: 900px) {
	.md-news { padding: 72px 0; }
	.md-news__head { margin-bottom: 40px; }
	.md-cards { grid-template-columns: repeat(3, 1fr); gap: 40px 32px; }
}

/* ---- CTA ---------------------------------------------------------------- */

.md-cta { padding: 48px 0; }

.md-cta__panel {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 32px 24px;
	background: var(--md-navy);
	border-radius: 4px;
	color: #fff;
}

.md .md-cta__heading {
	margin: 0 0 8px;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.2;
	color: #fff;
}

.md-cta__text {
	margin: 0;
	font-size: 16px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.85);
	max-width: 52ch;
}

.md-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }

@media (min-width: 768px) {
	.md-cta__panel {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 40px;
	}
	.md-cta__actions { flex: 0 0 auto; }
}

@media (min-width: 900px) {
	.md-cta { padding: 72px 0; }
}