/**
 * mx-theme front-page.css — v0.3.0
 * Loaded only on the front page. Tokens only — no raw hex.
 */

/* ---------- mx-insights token bridge ----------
 * The plugin ships light-mode defaults + a .mxi-dark variant; overriding
 * its custom properties from the theme layer makes both shortcode themes
 * track data-theme automatically. `html .mxi` outranks the plugin's
 * single-class selectors without touching its rules. */

html .mxi {
	--mxi-up: var(--mx-compliant);
	--mxi-down: var(--mx-noncompliant);
	--mxi-flat: var(--mx-nav-inactive);
	--mxi-accent: var(--mx-link);
	--mxi-muted: var(--mx-text-2);
	--mxi-border: var(--mx-divider);
	margin: 0;
}

/* ---------- Shared layout ---------- */

.mx-front { padding-top: var(--mx-space-sm); }

.mx-front-section { margin-top: var(--mx-space-xxl); }

.mx-front-section__title {
	font-size: var(--mx-type-title);
	line-height: var(--mx-type-title-lh);
	margin-bottom: var(--mx-space-lg);
}

.mx-front-grid2,
.mx-front-grid3,
.mx-front-grid4 {
	display: grid;
	gap: var(--mx-space-lg);
}

.mx-front-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mx-front-grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mx-front-grid4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.mx-front-grid2 > .mx-card + .mx-front-insight,
.mx-front-insight { min-width: 0; }

@media (max-width: 900px) {
	.mx-front-grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mx-front-grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
	.mx-front-grid2,
	.mx-front-grid3 { grid-template-columns: 1fr; }
}

/* ---------- Search trigger (looks like a field, opens the overlay) ---------- */

.mx-front-search {
	display: flex;
	align-items: center;
	gap: var(--mx-space-md);
	width: 100%;
	max-width: 560px;
	padding: 13px var(--mx-space-lg);
	background: var(--mx-card-elevated);
	color: var(--mx-text-2);
	border: var(--mx-hairline) solid var(--mx-divider);
	border-radius: var(--mx-radius-card);
	font-family: var(--mx-font);
	font-size: var(--mx-type-body);
	text-align: left;
	cursor: pointer;
}

.mx-front-search:hover {
	border-color: var(--mx-brand);
	text-decoration: none;
}

.mx-front-search svg { width: 18px; height: 18px; flex: 0 0 auto; }

.mx-front-search span { flex: 1 1 auto; }

.mx-front-search__kbd {
	font-family: var(--mx-font);
	font-size: var(--mx-type-caption);
	color: var(--mx-text-2);
	border: var(--mx-hairline) solid var(--mx-divider);
	border-radius: 6px;
	padding: 1px 6px;
}

@media (max-width: 900px) {
	.mx-front-search__kbd { display: none; }
}

/* ---------- Hero ---------- */

.mx-front-hero {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: var(--mx-space-xxl);
	align-items: center;
	padding: var(--mx-space-xxl) 0;
}

.mx-front-hero__copy h1 {
	font-size: var(--mx-type-display);
	line-height: var(--mx-type-display-lh);
	margin-bottom: var(--mx-space-md);
}

.mx-front-hero__sub {
	color: var(--mx-text-2);
	max-width: 46ch;
	margin-bottom: var(--mx-space-xl);
}

.mx-front-hero__ctas {
	display: flex;
	gap: var(--mx-space-md);
	margin: var(--mx-space-xl) 0 0;
}

.mx-front-hero__story .mx-front-insight { padding: var(--mx-space-xl); }

@media (max-width: 900px) {
	.mx-front-hero { grid-template-columns: 1fr; gap: var(--mx-space-xl); padding: var(--mx-space-xl) 0; }
}

/* ---------- Trust strip: consolidated in theme.css (0.11.0) ---------- */

/* ---------- Features ---------- */

.mx-front-feature svg {
	width: 26px;
	height: 26px;
	color: var(--mx-brand-text);
	margin-bottom: var(--mx-space-md);
}

[data-theme="dark"] .mx-front-feature svg { color: var(--mx-brand); }

.mx-front-feature h3 {
	font-size: var(--mx-type-heading);
	margin-bottom: var(--mx-space-xs);
}

.mx-front-feature p {
	color: var(--mx-text-2);
	margin: 0;
	font-size: var(--mx-type-label);
	line-height: var(--mx-type-label-lh);
}

/* ---------- App band + CTA band ---------- */

.mx-front-appband {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--mx-space-xl);
}

.mx-front-appband h2 { margin-bottom: var(--mx-space-xs); }

.mx-front-appband .mx-front-hero__sub { margin-bottom: 0; }

.mx-front-appband__btns {
	display: flex;
	gap: var(--mx-space-md);
	margin: 0;
}

.mx-front-appband__btns svg { width: 18px; height: 18px; }

.mx-front-ctaband {
	text-align: center;
	padding: var(--mx-space-xxl) 0;
	margin-top: var(--mx-space-xxl);
	border-top: var(--mx-hairline) solid var(--mx-divider);
}

.mx-front-ctaband h2 {
	font-size: var(--mx-type-title);
	margin-bottom: var(--mx-space-sm);
}

.mx-front-ctaband .mx-front-hero__sub {
	max-width: none;
	margin-bottom: var(--mx-space-lg);
}

/* ---------- Member version ---------- */

.mx-front-greeting {
	font-size: var(--mx-type-title);
	line-height: var(--mx-type-title-lh);
	margin: var(--mx-space-lg) 0 var(--mx-space-lg);
}

.mx-front-member-insights { margin-top: var(--mx-space-xl); }

.mx-front-tile {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--mx-space-sm);
	color: var(--mx-text);
	font-weight: var(--mx-w-medium);
}

.mx-front-tile:hover {
	text-decoration: none;
	border-color: var(--mx-brand);
}

.mx-front-tile svg {
	width: 22px;
	height: 22px;
	color: var(--mx-brand-text);
}

[data-theme="dark"] .mx-front-tile svg { color: var(--mx-brand); }

.mx-front-grid4 { margin: var(--mx-space-lg) 0; }