/**
 * Leadership page (/leadership/, template "full-width", os/leadership-* patterns; client brief
 * client-html/Leadership_Listing_Content.pdf). The hero, tab chips, insights carousel and contact
 * section all reuse existing components (os-industry-list.css, os-tabs.css, os-carousel.css,
 * os-blog.css, os-service-detail.css) — only the leader card is new. Loads where a block with an
 * "os-leadership" class renders (os_interactive_styles).
 *
 * Section rhythm = Industries / Services: 48px above and below (24 on phones), 32px head → content.
 */

.os-leadership-tabs-section {
	padding-top: 48px;
	padding-bottom: 48px;
	background: var(--wp--preset--color--white);
}
.os-leadership-tabs-section > * { margin-block: 0; }
/* Both white under the OS Banner (No Image): its bottom padding alone is the description → tabs
   gap (48px, 32 ≤768; user, 2026-10-19: "reduce the space between description and tabs"). */
.os-banner-no-image + .os-leadership-tabs-section { padding-top: 0; }
/* The banner and the tabs share one Aurora gradient (user, 2026-10-19): a full-width Group
   ("Banner + Leaders background") wraps both, so this section is see-through inside it. */
.has-background > .os-leadership-tabs-section { background: none; }
/* Aurora's two glows reach ~1,500px down; the Leadership tab (21 cards) makes this area ~3,150px
   tall, so the same pair repeats lower. Placed too low to reach the short Founders/Board tabs.
   Only while the Group still has Aurora (core's preset class is !important, so this one is too). */
.os-leadership-glow.has-aurora-gradient-background {
	background:
		radial-gradient(ellipse 1514px 1332px at 115px 2000px, rgba(20, 199, 180, 0.12), rgba(20, 199, 180, 0) 70%),
		radial-gradient(ellipse 1551px 1365px at calc(100% - 72px) 2900px, rgba(23, 72, 232, 0.14), rgba(23, 72, 232, 0) 70%),
		var(--wp--preset--gradient--aurora) !important;
}

/* ---------- Thought Leadership (os/leadership-insights) head → cards gap ---------- */
/* Every other os-industry-list-stories section (Industries, Services, Partners, Platforms)
   wraps its carousel in OS Tabs, whose tab-list margin-bottom (32px) supplies the visible gap
   under the head while the carousel's own -12px (os-industry-list.css, !important: room for its
   shadow/hover lift) merely cancels its own top padding. This section has no tabs, so that -12px
   ate straight into the head's 32px margin-top rule, leaving the cards almost touching the H2.
   Same fix as the compact-carousel case just below it: the desired gap (32px / 24px on phones)
   minus the carousel's built-in -12px. */
.os-leadership-insights > .os-industry-list__head + .os-case-carousel.is-style-os-carousel {
	margin-top: 20px !important;
}
@media (max-width: 768px) {
	.os-leadership-insights > .os-industry-list__head + .os-case-carousel.is-style-os-carousel {
		margin-top: 12px !important;
	}
}

/* ---------- Thought Leadership cards → carousel controls gap ---------- */
/* Same cause, the other end of the carousel: os-industry-list.css's blanket reset
   (":is(…os-industry-list-stories…) > * { margin-block: 0 }") strips the OS Carousel's own
   "margin-top: 24px" on .os-carousel__controls (os-carousel.css) whenever the controls are a
   *direct* child of the section — true here (no tabs in the way), but never true on the tabbed
   pages, where the controls sit one level deeper inside the tab panel and the reset never
   reaches them. Measured: Services/Platforms show a 24px gap there; this section showed 0
   before this rule. A plain declaration is enough (two classes beats the reset's one). */
.os-leadership-insights > .os-carousel__controls {
	margin-top: 24px;
}

/* ---------- Leader cards (Founders / Leadership / Board of Advisors) ---------- */
.os-leader-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
}
.os-leader-grid > * { margin: 0; }
.os-leader-grid--featured {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	max-width: 620px;
	margin-inline: auto;
}
/* A grid with fewer cards than columns (Board of Advisors, 3) is centred like Founders (user,
   2026-10-19): auto-fit tracks at the 4-up card width, the empty ones collapse. */
@media (min-width: 1101px) {
	.os-leader-grid:not(.os-leader-grid--featured):not(:has(> :nth-child(4))) {
		grid-template-columns: repeat(auto-fit, calc((100% - 72px) / 4));
		justify-content: center;
	}
}

/* Card design = the Home "OS Platforms" block (os/platforms, section "AI-native platforms that
   scale reliability", os-theme.css): a 1.5px TechnIQk-gradient frame (26px radius, set as block
   attributes in the pattern, not here) around a white card (24.5px radius). Own classes
   (os-leader-card-frame / os-leader-card), not the shared os-platform / os-platform-card, so the
   Home section's :nth-child(2) rules (sized for its fixed two-card layout) can't leak into a
   26-card grid; the hover/focus mechanic and numbers are copied exactly (inner card lifts 8px,
   frame stays put, same brand-tinted shadow). Grid stays this page's own (4/3/2/1 — the Home
   section is permanently 2 cards and has no equivalent). */
/* The grid stretches every frame to the row's tallest card (CSS Grid's default
   align-items: stretch), but a plain block child doesn't follow — it sat at its own content
   height, leaving the gradient exposed as a thick band under shorter cards (e.g. Board of
   Advisors' one-line "Board Advisor" role next to a two-line one). Flex the frame and let the
   white card grow to fill it, so only the intended 1.5px frame edge ever shows. */
.os-leader-card-frame {
	position: relative;
	display: flex;
	flex-direction: column;
}
.os-leader-card {
	position: relative;
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: transform var(--os-base) var(--os-ease), box-shadow var(--os-base) var(--os-ease);
}
.os-leader-card-frame:hover > .os-leader-card,
.os-leader-card-frame:focus-within > .os-leader-card {
	transform: translateY(-8px);
	box-shadow: 0 32px 64px rgb(23 72 232 / 0.14);
}
@media (prefers-reduced-motion: reduce) {
	.os-leader-card-frame:hover > .os-leader-card,
	.os-leader-card-frame:focus-within > .os-leader-card { transform: none; }
}
.os-leader-card > .os-leader-card__photo {
	margin: 0;
	aspect-ratio: 1 / 1;
	background: var(--wp--preset--color--ice);
}
.os-leader-card > .os-leader-card__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
}
.os-leader-card--featured > .os-leader-card__photo { aspect-ratio: 4 / 5; }
.os-leader-card > .os-leader-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 20px 24px 24px;
	margin: 0;
}
.os-leader-card__body > * { margin: 0; }
/* Name/role reuse the Platform card's tag/text type scale (large/500/normal, small/500) — only
   the role's line-height is tightened from the Platform card's 1.65 (tuned for a 2-line
   description paragraph) since a one-line job title doesn't need that much air. */
.os-leader-card__name { color: var(--wp--preset--color--ink-deep); }
.os-leader-card--featured .os-leader-card__name { font-size: var(--wp--preset--font-size--x-large); }
.os-leader-card__role { margin-top: 4px; color: var(--wp--preset--color--ink-soft); }
/* Read More + the LinkedIn icon share a row (Read More left, LinkedIn right), pinned to the
   card's bottom. */
.os-leader-card__actions { margin-top: auto; padding-top: 16px; }
.os-leader-card__link { margin: 0; }
/* The whole card is the link (as the Partners strategic cards): Read More stretched over it. */
.os-leader-card__link a::before { content: ""; position: absolute; inset: 0; z-index: 1; }
.os-leader-card-frame:has(.os-leader-card__link a:focus-visible) { outline: 2px solid var(--wp--preset--color--brand); outline-offset: 3px; }
.os-leader-card__link a:focus-visible { outline: 0; }
/* Not in the editor, where the stretched link would cover the card's blocks. */
.is-root-container .os-leader-card__link a::before { content: none; }

/* LinkedIn icon: plain glyph (is-style-logos-only drops the circular background), raised above
   the stretched Read-More overlay (z-index 1) so it stays its own, separately clickable target —
   opens the profile in a new tab instead of the bio page. */
.os-leader-card__linkedin.wp-block-social-links {
	position: relative;
	z-index: 2;
	margin: 0;
}
.os-leader-card__linkedin .wp-social-link { margin: 0; color: var(--wp--preset--color--ink-soft); }
.os-leader-card__linkedin .wp-social-link a { padding: 0; }
.os-leader-card__linkedin .wp-social-link svg { width: 18px; height: 18px; }
.os-leader-card__linkedin .wp-social-link a:hover { color: var(--wp--preset--color--brand); }
.os-leader-card__linkedin .wp-social-link a:focus-visible { outline: 2px solid var(--wp--preset--color--brand); outline-offset: 2px; }

@media (max-width: 1100px) {
	.os-leader-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
	.os-leadership-tabs-section { padding-top: calc(var(--wp--preset--spacing--90) * 0.6); padding-bottom: calc(var(--wp--preset--spacing--90) * 0.6); }
	.os-leader-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
	.os-leader-grid--featured { grid-template-columns: 1fr; max-width: 320px; }
	/* Two across: the odd card left over in a short grid sits centred under the others. */
	.os-leader-grid:not(.os-leader-grid--featured):not(:has(> :nth-child(4))) > :last-child:nth-child(odd) {
		grid-column: 1 / -1;
		justify-self: center;
		width: calc(50% - 8px);
	}
}
@media (max-width: 540px) {
	.os-leader-grid { grid-template-columns: 1fr; }
	.os-leader-grid:not(.os-leader-grid--featured):not(:has(> :nth-child(4))) > :last-child:nth-child(odd) { justify-self: stretch; width: auto; }
}