/*
 * NOC and regulatory documents, as published on the Mandatory Disclosure page.
 *
 * Colours sit behind custom properties on `.wlsm-noc` so a theme can retint the block by
 * redefining them rather than overriding rules one by one - the same arrangement the testimonials
 * block uses. Defaults are the navy-and-gold the site's other blocks already paint.
 */
.wlsm-noc {
	--wlsm-noc-nav: #0d2149;
	--wlsm-noc-nav-rgb: 13, 33, 73;
	--wlsm-noc-gold: #e8b04b;
	--wlsm-noc-ink: #1f2937;
	--wlsm-noc-muted: #5b6b7f;
	--wlsm-noc-line: #e3e9f2;
	--wlsm-noc-card: #fff;

	padding: clamp(20px, 3vw, 34px) 0;
	color: var(--wlsm-noc-ink);
	font-family: inherit;
}

.wlsm-noc__head { margin-bottom: clamp(18px, 2.4vw, 28px); }

.wlsm-noc__title {
	position: relative;
	margin: 0 0 12px;
	padding-bottom: 12px;
	color: var(--wlsm-noc-nav);
	font-size: clamp(21px, 2.6vw, 30px);
	font-weight: 700;
	line-height: 1.25;
}

.wlsm-noc__title::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 68px;
	height: 3px;
	border-radius: 2px;
	background: var(--wlsm-noc-gold);
}

.wlsm-noc__subtitle {
	margin: 0;
	color: var(--wlsm-noc-muted);
	font-size: clamp(14px, 1.5vw, 16px);
	line-height: 1.6;
}

.wlsm-noc__items {
	display: grid;
	gap: clamp(16px, 2.2vw, 26px);
}

.wlsm-noc__item {
	padding: clamp(16px, 2vw, 24px);
	border: 1px solid var(--wlsm-noc-line);
	border-left: 4px solid var(--wlsm-noc-gold);
	border-radius: 12px;
	background: var(--wlsm-noc-card);
	box-shadow: 0 6px 18px rgba(var(--wlsm-noc-nav-rgb), .06);
}

.wlsm-noc__name {
	margin: 0 0 8px;
	color: var(--wlsm-noc-nav);
	font-size: clamp(16px, 1.9vw, 20px);
	font-weight: 700;
	line-height: 1.35;
}

.wlsm-noc__desc {
	margin: 0 0 14px;
	color: var(--wlsm-noc-muted);
	font-size: clamp(13.5px, 1.4vw, 15px);
	line-height: 1.65;
}

/*
 * The frame's height is in viewport units with a floor and a ceiling: a certificate is a portrait
 * page, so a fixed pixel height either crops it on a phone or leaves half the frame empty on a
 * desktop.
 */
/*
 * Scoped to the module's own class names. On the Mandatory
 * Disclosure page .pdf-section and .pdf-container carry that page's own CSS - all of it
 * !important - and this file must never restate their box: background, padding, border, shadow,
 * radius, width or margin. The one exception below sets text-align, which that page does not set
 * on the card itself, and is scoped with .wlsm-noc__item so it reaches only this module's blocks.
 */
.wlsm-noc__frame,
.wlsm-noc__file iframe {
	display: block;
	width: 100%;
	height: clamp(340px, 62vh, 620px);
	border: 1px solid var(--wlsm-noc-line);
	border-radius: 8px;
	background: #f7f9fc;
}

.wlsm-noc__image,
.wlsm-noc__file img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	border: 1px solid var(--wlsm-noc-line);
	border-radius: 8px;
}

/*
 * Every link state spelled out, and this is not belt and braces.
 *
 * The theme carries a bare `a:visited { color: #253b80 }`. That selector scores (0,1,1) against
 * this button's (0,1,0), so it wins on specificity whatever the load order - and #253b80 is the
 * same navy as the button's own background. The result was a "View Document" button whose text
 * vanished the moment someone had opened that certificate once, on exactly the cards they had
 * already clicked. Naming :link and :visited here takes the score to (0,2,0) and settles it.
 */
.wlsm-noc__open,
.wlsm-noc__open:link,
.wlsm-noc__open:visited {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
	padding: 8px 16px;
	border-radius: 999px;
	background: var(--wlsm-noc-nav);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: background .18s ease, transform .18s ease;
}

.wlsm-noc__open:hover,
.wlsm-noc__open:focus,
.wlsm-noc__open:visited:hover,
.wlsm-noc__open:visited:focus {
	background: var(--wlsm-noc-gold);
	color: var(--wlsm-noc-nav);
	transform: translateY(-1px);
}

/* The icon inherits, but a theme that colours `a i` separately would not be caught by the above. */
.wlsm-noc__open i,
.wlsm-noc__open:visited i {
	color: inherit;
}

/* ---------- three across, inside the disclosure page's own cards ---------- */

/*
 * The Mandatory Disclosure page styles .pdf-section as a single full-measure slab - max-width
 * 1000px, auto margins, 3rem of padding - because it used to hold a 600px PDF frame. Three of
 * those to a row needs the arrangement back: the page keeps the card's *look* (background, radius,
 * shadow, border), this file takes over its *width and spacing*. Both sides are !important there,
 * so these have to be too.
 */
.wlsm-noc__items:has(.pdf-section) {
	display: grid;
	gap: clamp(16px, 2vw, 26px);
}

.wlsm-noc__item.pdf-section {
	max-width: none !important;
	margin: 0 !important;
	padding: clamp(18px, 2vw, 28px) !important;
	/* Equal-height cards with the button sitting on the bottom edge of each. */
	display: flex !important;
	flex-direction: column !important;
	text-align: center;
}

.wlsm-noc__item.pdf-section .wlsm-noc__open {
	/* Pushed to the bottom so the buttons line up across a row of uneven descriptions. */
	margin-top: auto;
	align-self: center;
}

@media (min-width: 700px) {
	.wlsm-noc__items:has(.pdf-section) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
	.wlsm-noc__items:has(.pdf-section) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/*
 * :has() is unsupported in older browsers, which would leave the grid off and the cards stacked -
 * readable, just one per row. This repeats the columns without it so those browsers get the layout
 * too; the pair is harmless where both apply.
 */
@supports not selector(:has(*)) {
	.wlsm-noc--link .wlsm-noc__items,
	.wlsm-noc--list .wlsm-noc__items { display: grid; gap: clamp(16px, 2vw, 26px); }

	@media (min-width: 700px) {
		.wlsm-noc--link .wlsm-noc__items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	}

	@media (min-width: 1024px) {
		.wlsm-noc--link .wlsm-noc__items { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	}
}

/* The list variant drops the frames and leans on the links alone. */
.wlsm-noc--list .wlsm-noc__items { gap: clamp(10px, 1.4vw, 16px); }
.wlsm-noc--list .wlsm-noc__item { padding: clamp(12px, 1.6vw, 18px); }
.wlsm-noc--list .wlsm-noc__open { margin-top: 8px; }

@media (min-width: 900px) {
	/* Two across only in the list variant - a PDF frame needs the full measure to be readable. */
	.wlsm-noc--list .wlsm-noc__items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}