/**
 * Interaction states theme.json can't express: hover, focus, motion.
 *
 * Discipline carried over from the tempo.xyz audit — every transition
 * here is a property change (background / border-color / a small
 * translate on an arrow glyph) at 150–200ms. No scale, no shadow-lift,
 * no bounce easing. Class names are prefixed `ali-` and only apply
 * inside our own block patterns, so they never fight core block markup.
 */

:where(a, button, input, .wp-block-button__link):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* ── Sticky site header ─────────────────────────────────────────── */
.ali-site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--wp--preset--color--header);
	border-bottom: 1px solid var(--wp--preset--color--border);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--50);
}
.ali-site-logo img {
	display: block;
	width: auto;
	max-height: 64px;
}

/* ── Affiliation carousel: dark chips auto-scrolling, pause on hover ── */
.ali-logo-strip {
	padding-block: var(--wp--preset--spacing--60);
	border-top: 1px solid var(--wp--preset--color--border);
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.ali-logo-carousel {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
	mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
}
.ali-logo-track {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	width: max-content;
	animation: ali-marquee 28s linear infinite;
}
.ali-logo-carousel:hover .ali-logo-track {
	animation-play-state: paused;
}
.ali-logo-chip {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	height: 72px;
	padding-inline: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--ink);
	border-radius: var(--wp--custom--radius--sm);
}
.ali-logo-chip img {
	display: block;
	height: 32px;
	width: auto;
}
@keyframes ali-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.ali-logo-track {
		animation: none;
	}
}

/* ── Numbered feature links: pop up + aqua glow on hover, arrow nudges ── */
.ali-feature-link {
	--aqua: #22d3ee;
	color: inherit;
	text-decoration: none;
	border-radius: var(--wp--custom--radius--md);
	background: transparent;
	transform: translateY(0);
	box-shadow: 0 0 0 0 transparent;
	transition: transform 200ms ease, box-shadow 200ms ease, background-color 200ms ease;
}
.ali-feature-link:hover,
.ali-feature-link:focus-visible {
	background: var(--wp--preset--color--white);
	transform: translateY(-4px);
	box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.4), 0 0 28px 4px rgba(34, 211, 238, 0.35);
}
.ali-feature-arrow {
	display: inline-block;
	transition: transform 200ms ease-in-out;
}
.ali-feature-link:hover .ali-feature-arrow {
	transform: translate(3px, -3px);
}

/* ── Status / nav pill (mono label + dot) ───────────────────────── */
.ali-pill {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--10);
	padding: 8px var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--border-strong);
	border-radius: var(--wp--custom--radius--pill);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	color: var(--wp--preset--color--ink-soft);
	text-decoration: none;
	transition: border-color 150ms ease, background-color 150ms ease;
}
.ali-pill:hover {
	border-color: var(--wp--preset--color--border-strong);
	background: var(--wp--preset--color--white);
}
.ali-pill-dot {
	width: 7px;
	height: 7px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
}

/* ── Secondary (outline) button, for pairs next to the filled one ── */
.ali-btn-secondary {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--10);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	background: transparent;
	color: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--border-strong);
	border-radius: var(--wp--custom--radius--sm);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.01em;
	text-decoration: none;
	transition: background-color 150ms ease, border-color 150ms ease;
}
.ali-btn-secondary:hover {
	border-color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--white);
}

/* ── Hero: two columns (copy + wireframe object) on desktop, stacked
   single column below 1024px — the object is desktop-only (see
   hero-object.js), so its wrapper collapses out below that width
   instead of leaving dead space. ─────────────────────────────────── */
.ali-hero {
	min-height: min(82svh, 720px);
	display: flex;
	align-items: center;
}
.ali-hero h1 {
	text-wrap: balance;
}
.ali-hero-row {
	width: 100%;
}
.ali-hero-visual {
	position: relative;
	flex: 1 1 420px;
	align-self: stretch;
	min-height: 420px;
}
.ali-wireframe-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}
@media (max-width: 1023px) {
	.ali-hero-row {
		flex-direction: column;
	}
	.ali-hero-visual {
		display: none;
	}
}

/* ── Main content top offset — real CSS instead of the broken
   style.spacing.padding block support (see .ali-row note above). Halved
   per feedback: the JSON value never actually rendered, so what
   "too much space" was actually seeing was uncontrolled browser default
   spacing, not our intended 64px. ───────────────────────────────────── */
.ali-main {
	padding-top: var(--wp--preset--spacing--20);
	padding-bottom: var(--wp--preset--spacing--80);
}

/* ── Interior pages: same motif, smaller — a compact wireframe beside
   the title, plus the dot-grid band Tempo actually uses further down
   its interior pages (their equivalent doesn't repeat the hero object
   verbatim there; ours takes the same cue). ──────────────────────── */
.ali-page-header-row {
	width: 100%;
	align-items: flex-start;
}
.ali-page-header-row h1 {
	flex: 1 1 auto;
}
.ali-page-visual {
	position: relative;
	flex: 0 0 120px;
	height: 120px;
}
.ali-page-visual .ali-wireframe-canvas {
	opacity: 0.8;
}
@media (max-width: 1023px) {
	.ali-page-header-row {
		flex-direction: column;
	}
	.ali-page-visual {
		display: none;
	}
}

/* ── About page: Turing portrait in a round frame ────────────────── */
.ali-turing-row {
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	margin-bottom: 28px;
}
.ali-turing-portrait {
	width: 105px;
	height: 105px;
	flex-shrink: 0;
	border-radius: 50%;
	object-fit: cover;
	border: 1px solid var(--wp--preset--color--border);
}
.ali-turing-row blockquote {
	margin: 0;
	border: none;
	padding: 0;
}
.ali-turing-row blockquote p {
	font-style: italic;
}
@media (max-width: 600px) {
	.ali-turing-row {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ── About page: team photo lightbox — desktop only. WP's native
   click-to-zoom broke on mobile (previously removed entirely to fix
   that); restored here, but disabled specifically below 600px instead
   of site-wide. pointer-events:none on the container is inherited by
   whatever trigger element WP's lightbox script injects into it, so
   this holds regardless of the exact DOM it adds at runtime. ──────── */
@media (max-width: 600px) {
	.ali-team-photo.wp-lightbox-container {
		pointer-events: none;
	}
}

/* ── Row divider — plain CSS instead of block-support style.border /
   style.spacing.padding, which this WP install silently drops (no
   inline style, no stylesheet rule, reproduced in isolation via
   `wp eval`). Used for stacked list rows: podcast episodes, research
   projects, numbered feature links. ─────────────────────────────── */
.ali-row {
	padding-block: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--border);
}
.ali-row:last-child {
	border-bottom: 1px solid var(--wp--preset--color--border);
}

/* ── SoundCloud embeds on the Podcast page — real public tracks, just
   framed to match our system instead of floating loose on the page. */
.ali-soundcloud {
	display: block;
	margin-top: var(--wp--preset--spacing--20);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--sm);
}

/* ── Click-to-play video embeds — poster art shown until clicked, native
   controls take over after. aspect-ratio keeps width/height locked
   together at any viewport, so it scales the same way every other
   section on the page does instead of a fixed pixel height. ────────── */
.ali-click-video {
	position: relative;
	aspect-ratio: 16 / 9;
	width: 100%;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--ink);
}
.ali-click-video video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.ali-click-video-play {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	appearance: none;
}
.ali-click-video-play:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: -2px;
}

/* ── Research project cards ──────────────────────────────────────── */
/* WP's native alignwide breakout wasn't taking effect here (wrapper stayed
   at the 720px content width despite --wp--style--global--wide-size being
   correctly defined — another instance of this install's block-support
   quirks). The first fix (fixed -240px/+480px margin math, assuming the
   wrapper sat perfectly centered in a 720px column) turned out wrong on
   this page specifically — the assumption didn't hold, so the grid came
   out visibly off-center instead of matching the H1/paragraph above it.
   Centering directly against the viewport instead removes that
   assumption entirely: it no longer matters what the parent is doing. */
@media (min-width: 960px) {
	.ali-card-grid-wrap {
		position: relative;
		left: 50%;
		transform: translateX(-50%);
		width: min(1200px, calc(100vw - 48px));
		max-width: none;
		margin-inline: 0;
	}
}
.ali-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(440px, 1fr));
	gap: var(--wp--preset--spacing--40);
}
.ali-card {
	--glow: var(--wp--preset--color--accent);
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--white);
	overflow: hidden;
	transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.ali-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--glow);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 250ms ease;
}
.ali-card:hover,
.ali-card:focus-within {
	border-color: var(--glow);
	transform: translateY(-4px);
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--glow) 45%, transparent), 0 10px 32px -4px color-mix(in srgb, var(--glow) 55%, transparent);
}
.ali-card:hover::before,
.ali-card:focus-within::before {
	transform: scaleX(1);
}
.ali-card--featured {
	border-color: var(--glow);
}
.ali-card--featured::before {
	transform: scaleX(1);
}
.ali-card-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--20);
}
.ali-card-badge {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-ink);
	background: var(--wp--preset--color--accent-soft);
	padding: 3px 10px;
	border-radius: var(--wp--custom--radius--pill);
}
.ali-card-icon {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--sm);
	color: var(--wp--preset--color--ink-soft);
}
.ali-card-icon svg {
	width: 20px;
	height: 20px;
}
.ali-card h3 {
	margin: 0;
}
.ali-card p {
	margin: 0;
	flex-grow: 1;
}
.ali-card-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--10);
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	border-top: 1px solid var(--wp--preset--color--border);
}
/* Stretched link: the whole card is clickable/hoverable to the project's
   page, not just this small text+arrow row — the link itself gains an
   invisible full-card overlay instead of moving the href, so the visual
   button stays exactly where it was. */
.ali-card-btn::after {
	content: "";
	position: absolute;
	inset: 0;
}
.ali-card-btn svg {
	width: 14px;
	height: 14px;
	transition: transform 200ms ease-in-out;
}
.ali-card-btn:hover svg {
	transform: translateX(3px);
}

.ali-dot-grid {
	--dot: var(--wp--preset--color--border-strong);
	height: 64px;
	width: 100%;
	background-image: radial-gradient(var(--dot) 1px, transparent 1px);
	background-size: 22px 22px;
	background-position: 0 0;
	-webkit-mask-image: linear-gradient(to bottom, transparent, black 30%, black 70%, transparent);
	mask-image: linear-gradient(to bottom, transparent, black 30%, black 70%, transparent);
	opacity: 0.6;
}

/* ── Footer app-links icon row ───────────────────────────────────── */
.ali-app-links {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	list-style: none;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}
.ali-app-links a {
	display: inline-flex;
	color: var(--wp--preset--color--ink-soft);
	transition: color 150ms ease;
}
.ali-app-links a:hover {
	color: var(--wp--preset--color--ink);
}
.ali-app-links svg {
	width: 22px;
	height: 22px;
}

/* ── Mobile: the type scale in theme.json is static (no fluid clamp
   sizing yet), so H1/H2 need an explicit step-down below phone width —
   60px/40px reads oversized on a 375–430px screen. Header also tightens
   up since the nav collapses to a hamburger (core's overlayMenu:"mobile")
   but the logo + Contact button stay inline beside it. ─────────────── */
@media (max-width: 600px) {
	h1, .has-heading-1-font-size { font-size: 40px !important; }
	h2, .has-heading-2-font-size { font-size: 28px !important; }
	.ali-site-header {
		padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--30);
	}
	.ali-card-grid {
		grid-template-columns: 1fr;
	}
}

/* ── Respect reduced-motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.ali-feature-arrow,
	.ali-feature-link,
	.ali-logo-strip img,
	.ali-pill,
	.ali-btn-secondary,
	.ali-card,
	.ali-card::before {
		transition: none;
	}
	.ali-card:hover,
	.ali-card:focus-within,
	.ali-feature-link:hover,
	.ali-feature-link:focus-visible {
		transform: none;
	}
}