/**
 * Certification Help partner cards  ([blg_cert_partners], inc/cert-help.php)
 *
 * NOT a patterns/*.php file — this styles server-rendered BEM markup emitted
 * by the shortcode, same arrangement as member-grid.css / board-grid.css.
 *
 * Card anatomy deliberately mirrors the member directory card (member-grid.css):
 * neutral-100 logo well with the logo contained (never cropped, never
 * distorted, any source aspect ratio), org name below, whole card is the link
 * when the org has a URL. Reusing that language rather than inventing a second
 * card shape — a visitor sees the same object on /members/ and here.
 *
 * Groups: one <section> per help category (Consultants, Colleges &
 * Universities), each with its own H3.
 *
 * Auto-enqueued by inc/enqueue.php glob over assets/css/patterns/*.css.
 */

.blg-cert-partners {
	display: flex;
	flex-direction: column;
	gap: var(--blg-space-xl); /* 64px between category groups */
}

.blg-cert-partners__group-title {
	font-family: var(--blg-font-heading);
	font-weight: var(--blg-fw-heading);
	font-size: clamp(1.25rem, 2vw, 1.5rem); /* 20 → 24px */
	line-height: 1.3;
	color: var(--blg-color-contrast);
	margin: 0 0 var(--blg-space-md); /* 24px title → grid */
}

.blg-cert-partners__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--blg-space-md); /* 24px */
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Card — white, radius 16, member-card shadow language. Redefined locally per
   the same convention member-grid.css uses for its own shadow token. */
:root {
	--blg-cert-card-shadow:
		0 1px 3px color-mix(in srgb, var(--blg-color-contrast) 12%, transparent),
		0 1px 2px color-mix(in srgb, var(--blg-color-contrast) 7%, transparent);
	--blg-cert-card-shadow-hover:
		0 8px 24px
			color-mix(in srgb, var(--blg-color-contrast) 16%, transparent),
		0 2px 6px color-mix(in srgb, var(--blg-color-contrast) 10%, transparent);
}

.blg-cert-partners__card {
	position: relative; /* stretched-link containing block */
	display: flex;
	flex-direction: column;
	background-color: var(--blg-color-base);
	border-radius: var(--blg-radius-card); /* 16px */
	padding: var(--blg-space-md); /* 24px */
	box-shadow: var(--blg-cert-card-shadow);
	transition: box-shadow var(--blg-transition-fast);
}

/* Hover lift ONLY for cards that actually link out — an unlinked card must not
   imply a click affordance it doesn't have. Same :has() idiom as
   member-grid.css's .blg-members__card. */
.blg-cert-partners__card--linked:hover,
.blg-cert-partners__card--linked:focus-within {
	box-shadow: var(--blg-cert-card-shadow-hover);
}

/* Logo well — fixed-height band, logo contained with padding so any source
   aspect ratio sits centred without distortion or cropping. Height matches the
   member card's well (100px) so the two card types read as one family. */
.blg-cert-partners__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 6.25rem; /* 100px */
	margin: 0 0 var(--blg-space-md);
	background-color: var(--blg-color-neutral-100);
	border-radius: var(--blg-radius-md);
	padding: var(--blg-space-sm); /* 16px inner air */
	overflow: hidden;
}

.blg-cert-partners__logo img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* No-logo fallback — neutral-700, not neutral-500: on neutral-100 that
   measures ~4.08:1, under the 4.5:1 text threshold (same AA fix already
   applied to .blg-members__logo-fallback). */
.blg-cert-partners__fallback {
	font-family: var(--blg-font-body);
	font-size: var(--blg-size-body);
	font-weight: 600;
	color: var(--blg-color-neutral-700);
	text-align: center;
}

.blg-cert-partners__name {
	font-family: var(--blg-font-heading);
	font-weight: 700;
	font-size: var(--blg-size-body-lg); /* 18px */
	line-height: 1.35;
	color: var(--blg-color-contrast);
}

/* Whole-card link. The anchor wraps only the name, so it gets stretched over
   the card — the established idiom in card-grid.css / events-archive.css.
   Keeping the anchor around real text (not an empty <a>) is what makes the
   accessible name and the focus ring land somewhere sensible. */
.blg-cert-partners__link {
	text-decoration: none;
	color: inherit;
}

.blg-cert-partners__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--blg-radius-card);
}

.blg-cert-partners__card--linked:hover .blg-cert-partners__name {
	color: var(--blg-color-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Focus ring on the CARD, not the inline anchor — the anchor's own box is just
   the text, so the default ring would trace the name and not the thing the
   user is about to activate. */
.blg-cert-partners__card--linked:focus-within {
	outline: 2px solid var(--blg-color-primary);
	outline-offset: 3px;
}

.blg-cert-partners__link:focus-visible {
	outline: none; /* moved to the card, above */
}

/* ── Tablet (≤1024px) — 2 cols ────────────────────────────────────────────── */
@media (max-width: 1024px) {
	.blg-cert-partners__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ── Mobile (≤768px) — 1 col, matching the member grid's mobile step ─────── */
@media (max-width: 768px) {
	.blg-cert-partners {
		gap: var(--blg-space-lg); /* 40px */
	}

	.blg-cert-partners__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ── Page section wrappers (page-content/certification-help.html) ──────────
   .kd-section zeroes padding-block by design (global.css), so both sections
   rely on the section-rhythm owl for their spacing like every other section.

   The intro needs its measure PINNED LEFT. Its block carries
   contentSize:"42rem" for a readable line length, and WP's constrained layout
   centres anything narrower than its container — which put the intro at
   x=384 while the hero H1, the category headings and every card sit at x=110.
   One page, two left edges. Same defect (and same fix) as the event single's
   prose column; !important because WP's :where() layout rule sets
   margin-left/right:auto !important on every constrained child. */
.blg-cert-intro > * {
	margin-inline: 0 auto !important;
}

/* The intro eyebrow needs no rule here any more: `.kd-eyebrow` now carries the
   shared type spec globally (global.css), which is where it always belonged —
   this partial briefly duplicated those three declarations before the global
   rule existed. */