/**
 * SignalMind — Layout system & utilities
 *
 * The composable half of the design system: containers, section rhythm, an
 * explicit responsive grid, flex helpers and the reveal animation variants.
 *
 * Mobile-first. A bare utility applies at every width; a `-md-` / `-lg-` /
 * `-xl-` variant takes over from that breakpoint up.
 *
 *   sm 480 · md 768 · lg 1024 · xl 1280
 *
 * Extends layout.css; nothing here redefines anything declared there.
 *
 * @package SignalMind
 */

/* ==========================================================================
   Containers — the four widths every section chooses between
   ========================================================================== */

/* Hero: the widest reading frame, sitting under the sticky header. */
.sm-container--hero {
	max-width: var(--sm-container-2xl);
}

/* Narrow: single-column reading, forms, legal copy. */
.sm-container--narrow {
	max-width: var(--sm-container-sm);
}

/* Wide: dashboards, comparison tables, anything that needs the full frame. */
.sm-container--wide {
	max-width: var(--sm-container-full);
}

/* ==========================================================================
   Hero section
   ========================================================================== */

.sm-hero {
	position: relative;
	display: flex;
	align-items: center;
	/* Pulls the hero up under the transparent header without a negative margin,
	   so the backdrop reaches the top of the viewport. */
	padding-block: calc(var(--sm-header-height) + var(--sm-section-y)) var(--sm-section-y);
	overflow: hidden;
	isolation: isolate;
}

.sm-hero--tall {
	min-height: 88vh;
	min-height: 88svh;
}

.sm-hero--full {
	min-height: 100vh;
	min-height: 100svh;
}

.sm-hero__inner {
	position: relative;
	z-index: var(--sm-z-raised);
	width: 100%;
}

.sm-hero__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sm-space-6);
	max-width: 46rem;
}

.sm-hero--center .sm-hero__content {
	align-items: center;
	margin-inline: auto;
	text-align: center;
}

/* ==========================================================================
   Section rhythm
   ========================================================================== */

.sm-py-0 { padding-block: 0; }
.sm-py-sm { padding-block: var(--sm-section-y-sm); }
.sm-py-md { padding-block: var(--sm-section-y); }
.sm-py-lg { padding-block: var(--sm-section-y-lg); }

.sm-pt-0 { padding-block-start: 0; }
.sm-pb-0 { padding-block-end: 0; }

.sm-mt-0 { margin-block-start: 0; }
.sm-mt-2 { margin-block-start: var(--sm-space-2); }
.sm-mt-4 { margin-block-start: var(--sm-space-4); }
.sm-mt-6 { margin-block-start: var(--sm-space-6); }
.sm-mt-8 { margin-block-start: var(--sm-space-8); }
.sm-mt-12 { margin-block-start: var(--sm-space-12); }
.sm-mt-16 { margin-block-start: var(--sm-space-16); }

.sm-mb-0 { margin-block-end: 0; }
.sm-mb-4 { margin-block-end: var(--sm-space-4); }
.sm-mb-8 { margin-block-end: var(--sm-space-8); }
.sm-mb-12 { margin-block-end: var(--sm-space-12); }

/* Alternating section surface, for breaking up a long page. */
.sm-surface-alt {
	background-color: var(--sm-color-bg-alt);
	border-block: var(--sm-border-width) solid var(--sm-color-border-subtle);
}

.sm-surface-raised {
	background-color: var(--sm-color-surface);
}

/* ==========================================================================
   Explicit grid
   `.sm-cols-*` sets a fixed column count; layout.css's `.sm-grid--2/3/4`
   remains the auto-fitting option for content of unknown length.
   ========================================================================== */

.sm-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.sm-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sm-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sm-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sm-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.sm-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* Asymmetric splits for feature rows. */
.sm-cols-1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.sm-cols-2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }

.sm-col-span-2 { grid-column: span 2; }
.sm-col-span-3 { grid-column: span 3; }
.sm-col-full { grid-column: 1 / -1; }

.sm-gap-0 { gap: 0; }
.sm-gap-2 { gap: var(--sm-space-2); }
.sm-gap-3 { gap: var(--sm-space-3); }
.sm-gap-4 { gap: var(--sm-space-4); }
.sm-gap-6 { gap: var(--sm-space-6); }
.sm-gap-8 { gap: var(--sm-space-8); }
.sm-gap-12 { gap: var(--sm-space-12); }

@media (min-width: 768px) {
	.sm-cols-md-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
	.sm-cols-md-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sm-cols-md-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.sm-cols-md-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.sm-cols-md-1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
	.sm-cols-md-2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}

@media (min-width: 1024px) {
	.sm-cols-lg-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
	.sm-cols-lg-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sm-cols-lg-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.sm-cols-lg-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.sm-cols-lg-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.sm-cols-lg-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (min-width: 1280px) {
	.sm-cols-xl-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.sm-cols-xl-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ==========================================================================
   Flex
   ========================================================================== */

.sm-flex { display: flex; }
.sm-inline-flex { display: inline-flex; }
.sm-flex-col { flex-direction: column; }
.sm-flex-row { flex-direction: row; }
.sm-flex-wrap { flex-wrap: wrap; }
.sm-flex-nowrap { flex-wrap: nowrap; }
.sm-flex-1 { flex: 1 1 0%; }
.sm-flex-none { flex: none; }

.sm-items-start { align-items: flex-start; }
.sm-items-center { align-items: center; }
.sm-items-end { align-items: flex-end; }
.sm-items-stretch { align-items: stretch; }
.sm-items-baseline { align-items: baseline; }

.sm-justify-start { justify-content: flex-start; }
.sm-justify-center { justify-content: center; }
.sm-justify-end { justify-content: flex-end; }
.sm-justify-between { justify-content: space-between; }

.sm-self-start { align-self: flex-start; }
.sm-self-center { align-self: center; }
.sm-self-end { align-self: flex-end; }

.sm-order-first { order: -1; }
.sm-order-last { order: 1; }

@media (min-width: 768px) {
	.sm-flex-md-row { flex-direction: row; }
	.sm-flex-md-col { flex-direction: column; }
	.sm-order-md-first { order: -1; }
	.sm-order-md-last { order: 1; }
}

/* ==========================================================================
   Text & sizing
   ========================================================================== */

.sm-text-left { text-align: left; }
.sm-text-center { text-align: center; }
.sm-text-right { text-align: right; }

.sm-text-muted { color: var(--sm-color-text-muted); }
.sm-text-subtle { color: var(--sm-color-text-subtle); }
.sm-text-brand { color: var(--sm-color-primary); }

/* The one place a gradient is allowed on type: a single hero word or phrase. */
.sm-text-gradient {
	background-image: var(--sm-gradient-text);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.sm-w-full { width: 100%; }
.sm-h-full { height: 100%; }
.sm-max-w-none { max-width: none; }

/* ==========================================================================
   Responsive visibility
   ========================================================================== */

.sm-show-mobile { display: none; }

@media (max-width: 767px) {
	.sm-show-mobile { display: revert; }
	.sm-text-mobile-center { text-align: center; }
	.sm-cols-mobile-1 { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 1024px) {
	.sm-show-desktop-flex { display: flex; }
}

/* ==========================================================================
   Reveal animation variants
   The base state lives in components.css; these add direction. Gated on the
   same (scripting: enabled) query so content is never hidden without JS.
   ========================================================================== */

@media (scripting: enabled) {
	[data-sm-reveal="fade"] {
		transform: none;
	}

	[data-sm-reveal="fade-down"] {
		transform: translateY(calc(-1 * var(--sm-space-4)));
	}

	[data-sm-reveal="slide-left"] {
		transform: translateX(var(--sm-space-8));
	}

	[data-sm-reveal="slide-right"] {
		transform: translateX(calc(-1 * var(--sm-space-8)));
	}

	[data-sm-reveal="scale"] {
		transform: scale(0.96);
	}

	[data-sm-reveal="blur"] {
		filter: blur(6px);
		transform: none;
	}

	[data-sm-reveal].is-revealed {
		filter: none;
	}
}

/* ==========================================================================
   Hover affordances
   ========================================================================== */

.sm-hover-lift {
	transition: transform var(--sm-duration-base) var(--sm-ease-out),
		box-shadow var(--sm-duration-base) var(--sm-ease-standard);
}

.sm-hover-lift:hover {
	transform: translateY(-3px);
	box-shadow: var(--sm-shadow-lg);
}

.sm-hover-glow {
	transition: var(--sm-transition-shadow);
}

.sm-hover-glow:hover {
	box-shadow: var(--sm-glow-soft);
}