/**
 * BRIDGES Conference 2026 landing page.
 *
 * Page-scoped `.sb-*` styles. Everything else on the page reuses the shared
 * vocabularies already loaded alongside this file: `.erps-*` from
 * erp-stabilization.css for the hero and section heads, `.bento-*` and the
 * form/button/CTA primitives from style.css, and `.blg-*` from blog.css.
 *
 * @package KCT
 */

/* ============================================================
   CO-BRANDING LOCKUP — KCT × BRIDGES, top of the hero

   Sized so the two marks read as visually equal weight rather than one
   dominating the other. The "We're attending" label above them is load-bearing:
   KCT is an attendee, not a sponsor or partner, and the lockup must not imply
   otherwise.
   ============================================================ */

.sb-lockup {
	margin: 0 0 38px;
}

.sb-lockup-label {
	display: block;
	margin-bottom: 18px;
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
}

.sb-lockup-row {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: clamp(16px, 3vw, 30px);
}

.sb-lockup-kct {
	height: 40px;
	width: auto;
	display: block;
}

.sb-lockup-x {
	font-size: 17px;
	line-height: 1;
	color: var(--muted-2);
}

.sb-lockup-event {
	display: inline-flex;
	align-items: center;
	gap: 12px;
}

/* Starbridge's arch-and-star mark, used in its own brand colour. */
.sb-lockup-mark {
	height: 34px;
	width: auto;
	display: block;
}

.sb-lockup-word {
	height: 23px;
	width: auto;
	display: block;
}

/* White wordmark sitting on the dark closing band. */
.sb-cta-mark {
	height: 22px;
	width: auto;
	display: block;
	margin: 0 auto 22px;
	opacity: 0.75;
}

@media (max-width: 560px) {
	.sb-lockup-kct  { height: 32px; }
	.sb-lockup-mark { height: 27px; }
	.sb-lockup-word { height: 18px; }
}

/* ============================================================
   EVENT META STRIP — date / venue / booth, sits under the hero lead
   ============================================================ */

.sb-meta {
	display: flex;
	flex-wrap: wrap;
	/* The hero centres everything else via text-align, which a flex container
	   ignores — without this the pills alone hug the left edge. */
	justify-content: center;
	gap: 12px;
	/* Bottom margin matches .erps-hero-lead's 40px so the CTA below keeps the
	   hero's vertical rhythm instead of butting straight into the pills. */
	margin: 32px 0 40px;
	padding: 0;
	list-style: none;
}

.sb-meta li {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 18px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--paper);
	box-shadow: var(--shadow-sm);
	font-size: 14px;
	color: var(--ink-2);
}

.sb-meta svg {
	width: 16px;
	height: 16px;
	flex: none;
	color: var(--accent);
}

.sb-meta strong {
	font-weight: 600;
}

/* Small "live now" pulse for the days the event is actually running. */
.sb-live {
	position: relative;
	width: 8px;
	height: 8px;
	flex: none;
	border-radius: 50%;
	background: var(--accent);
}

.sb-live::after {
	content: "";
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	border: 1px solid var(--accent);
	opacity: 0.5;
	animation: sb-pulse 2s var(--ease-out) infinite;
}

@keyframes sb-pulse {
	0%   { transform: scale(0.7); opacity: 0.6; }
	70%  { transform: scale(1.4); opacity: 0; }
	100% { transform: scale(1.4); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.sb-live::after { animation: none; }
}

/* ============================================================
   WHO'S ATTENDING — two large person cards
   ============================================================ */

.sb-people {
	padding: clamp(80px, 9vw, 120px) 0;
	background: var(--bg-2);
}

.sb-people-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
	margin-top: 48px;
}

.sb-person {
	/* Three per row. Compact vertical card: a small round avatar on top, then
	   the details — short enough to keep three across without towering. */
	flex: 0 1 calc((100% - 40px) / 3);
	display: flex;
	flex-direction: column;
	align-items: center;       /* centre the avatar + name/role */
	padding: 34px 26px 26px;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--paper);
	box-shadow: var(--shadow-sm);
	transition: box-shadow 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}

.sb-person:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-md);
}

.sb-person-photo {
	position: relative;
	overflow: hidden;
	background: var(--bg-2);
	/* Small round avatar, face-cropped — compact and consistent across the
	   three differently-framed source headshots. */
	width: 112px;
	height: 112px;
	border-radius: 50%;
	flex: none;
	margin-bottom: 16px;
}

.sb-person-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 22%;   /* bias upward so the face sits in the circle */
	display: block;
	transition: transform 0.6s var(--ease-out);
}

.sb-person:hover .sb-person-photo img {
	transform: scale(1.04);
}

.sb-person-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;            /* fill remaining height so the contact block pins to the bottom */
	width: 100%;
	text-align: center;        /* centre the name + role under the avatar */
	/* Flex items default to min-width:auto, which refuses to shrink below the
	   widest unbreakable child — here, a long email address. Without this the
	   card forces itself past the container on narrow phones. */
	min-width: 0;
}

.sb-person-name {
	font-family: var(--font-display);
	font-size: 22px;
	line-height: 1.2;
	letter-spacing: -0.01em;
	margin: 0;
}

.sb-person-role {
	margin: 6px 0 0;
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--accent);
}

.sb-person-bio {
	margin: 16px 0 0;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--muted);
	text-align: left;          /* the long bio reads better left-aligned */
}

/* Contact rows — email + LinkedIn.
   Structured full-width rows replace the mismatched pills: an icon tile, a mono
   micro-label over the value, and an arrow that nudges on hover. Neutral at
   rest; the accent enters only on interaction. Shares the icon-tile + mono-label
   + nudging-arrow vocabulary with the tool cards so it reads as one system. */
.sb-person-contact {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: auto;      /* pin the block to the card's bottom edge */
	padding-top: 24px;
}

.sb-contact {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	/* Compact enough that the longest email sits on one line on desktop. */
	gap: 12px;
	padding: 11px 14px;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: var(--bg);
	color: var(--ink);
	text-decoration: none;
	transition: border-color 0.25s var(--ease-out), background 0.25s var(--ease-out),
		transform 0.18s var(--ease-out), box-shadow 0.25s var(--ease-out);
}

/* Pressable: the row scales a touch on press so it feels like it heard you. */
.sb-contact:active {
	transform: scale(0.985);
}

.sb-contact-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: var(--bg-2);
	color: var(--ink-2);
	transition: background 0.25s var(--ease-out), color 0.25s var(--ease-out);
}

.sb-contact-ico svg {
	width: 16px;
	height: 16px;
}

.sb-contact-body {
	min-width: 0;          /* lets the value shrink/wrap instead of overflowing */
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.sb-contact-label {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted-2);
}

.sb-contact-value {
	font-size: 12.5px;
	letter-spacing: -0.01em;
	line-height: 1.35;
	color: var(--ink-2);
	overflow-wrap: anywhere;   /* on narrow phones it still wraps rather than overflow */
}

.sb-contact-arrow {
	width: 16px;
	height: 16px;
	color: var(--muted-2);
	transition: transform 0.25s var(--ease-out), color 0.25s var(--ease-out);
}

/* Hover only where a real pointer exists, so taps don't leave a stuck state. */
@media (hover: hover) and (pointer: fine) {
	.sb-contact:hover {
		border-color: var(--accent);
		background: var(--paper);
		box-shadow: var(--shadow-sm);
	}

	.sb-contact:hover .sb-contact-ico {
		background: var(--accent-soft);
		color: var(--accent-strong);
	}

	.sb-contact:hover .sb-contact-arrow {
		color: var(--accent);
		transform: translateX(3px);
	}
}

/* Keep colour cues; drop the movement for motion-sensitive users. */
@media (prefers-reduced-motion: reduce) {
	.sb-contact:active { transform: none; }
	.sb-contact:hover .sb-contact-arrow { transform: none; }
}

/* ============================================================
   CASE STUDIES — three featured, reusing .cs-card from style.css

   The real index (.cs-list) is a 2-up grid; here we want a clean 3-up row to
   match the tools and blog sections, so we supply our own grid and let the
   shared .cs-card handle the card styling.
   ============================================================ */

.sb-cases {
	padding: clamp(80px, 9vw, 120px) 0;
	background: var(--bg-2);
}

.sb-cases-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-top: 48px;
}

.sb-cases-more {
	display: flex;
	justify-content: center;
	margin-top: 48px;
}

/* Solid-ink stat pills, white text — page-scoped so the real /case-studies/
   index keeps its lighter grey pills. More specific than the base rule in
   style.css, so this wins without !important. */
.sb-cases-grid .cs-card-stats li {
	background: var(--ink);
	color: #fff;
}

/* ============================================================
   TOOLS — the five calculators, linked as a card grid
   ============================================================ */

.sb-tools {
	padding: clamp(80px, 9vw, 120px) 0;
}

.sb-tools-grid {
	/* Flex, not grid, so the 5th/2-card final row centres instead of hugging
	   the left with an empty third column. Grid can't centre an orphan row. */
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
	margin-top: 48px;
}

.sb-tools-grid .sb-tool {
	/* 3-up: a third of the row minus the two 20px gaps. No grow, so a short
	   final row keeps card width and just centres. */
	flex: 0 1 calc((100% - 40px) / 3);
}

.sb-tool {
	display: flex;
	flex-direction: column;
	padding: 28px;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--paper);
	text-decoration: none;
	color: inherit;
	transition: border-color 0.4s var(--ease-out), transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}

.sb-tool:hover,
.sb-tool:focus-visible {
	transform: translateY(-3px);
	border-color: var(--accent);
	box-shadow: var(--shadow-md);
}

.sb-tool-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-bottom: 20px;
	border-radius: 12px;
	background: var(--accent-soft);
	color: var(--accent-strong);
}

.sb-tool-ico svg {
	width: 21px;
	height: 21px;
}

.sb-tool-title {
	font-family: var(--font-display);
	font-size: 18px;
	line-height: 1.3;
	margin: 0;
}

.sb-tool-desc {
	margin: 10px 0 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--muted);
}

.sb-tool-go {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid var(--line);
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--accent);
}

.sb-tool-go svg {
	width: 14px;
	height: 14px;
	transition: transform 0.3s var(--ease-out);
}

.sb-tool:hover .sb-tool-go svg {
	transform: translateX(4px);
}

/* ============================================================
   READING — latest posts
   ============================================================ */

.sb-reading {
	padding: clamp(80px, 9vw, 120px) 0;
	background: var(--bg-2);
}

.sb-reading .blg-grid {
	margin-top: 48px;
}

.sb-reading-more {
	display: flex;
	justify-content: center;
	margin-top: 48px;
}

/* ============================================================
   FORM — the contact block, narrowed on this page
   ============================================================ */

.sb-form-section {
	padding: clamp(80px, 9vw, 120px) 0;
}

.sb-form-wrap {
	max-width: 760px;
	margin: 48px auto 0;
	padding: clamp(28px, 4vw, 48px);
	border: 1px solid var(--line);
	border-radius: var(--r-xl);
	background: var(--paper);
	box-shadow: var(--shadow-md);
}

.sb-form-wrap .form-row {
	margin-bottom: 0;
}

/* ============================================================
   MOTION — hero entrance + ambient life

   The rest of the page reveals section-by-section on scroll (the shared
   .reveal system). The hero loads above the fold with nothing to trigger,
   so it gets its own pure-CSS entrance — no JS dependency, so it can never
   hide behind a failed observer. Transform/opacity only; fully disabled
   under prefers-reduced-motion.
   ============================================================ */

/* The hero content rises in on load via the shared .reveal system (see the
   reveal-group on the hero container in the markup) — same motion language as
   the rest of the page, and transition-based so it fires reliably. */

/* Concentric rings breathe gently. Different periods so they drift out of
   sync — organic, not mechanical. The keyframe keeps the centring translate
   so positioning is preserved. */
@keyframes sb-ripple-breathe {
	0%, 100% { transform: translate(-50%, -50%) scale(1); }
	50%      { transform: translate(-50%, -50%) scale(1.035); }
}
.sb-conf .erps-hero-ripple {
	animation: sb-ripple-breathe 7s var(--ease-in-out) infinite;
	will-change: transform;
}
.sb-conf .erps-hero-ripple.r2 { animation-duration: 8.5s; }
.sb-conf .erps-hero-ripple.r3 { animation-duration: 10.5s; }

@media (prefers-reduced-motion: reduce) {
	.sb-conf .erps-hero-ripple {
		animation: none;
	}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
	.sb-tools-grid .sb-tool { flex-basis: calc((100% - 20px) / 2); }
	.sb-cases-grid { grid-template-columns: repeat(2, 1fr); }
	/* People stay three across — the cards shrink to fit rather than reflow. */
}

@media (max-width: 720px) {
	.sb-tools-grid .sb-tool { flex-basis: 100%; }
	.sb-cases-grid { grid-template-columns: 1fr; }
	/* Phones: the three cards stack full-width. */
	.sb-person { flex-basis: 100%; }
	.sb-meta li { width: 100%; }
}