/**
 * SignalMind — Layout
 *
 * Containers, page skeleton, grid primitives and layout utilities.
 * Structure only — no decoration.
 *
 * @package SignalMind
 */

/* ==========================================================================
   Page skeleton
   The footer is pinned to the viewport bottom on short pages.
   ========================================================================== */

.sm-site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100svh;
	isolation: isolate;
}

.sm-site__main {
	flex: 1 0 auto;
	width: 100%;
}

.sm-site__footer {
	flex-shrink: 0;
}

/* ==========================================================================
   Containers
   ========================================================================== */

.sm-container {
	width: 100%;
	max-width: var(--sm-container);
	margin-inline: auto;
	padding-inline: var(--sm-gutter);
}

.sm-container--sm {
	max-width: var(--sm-container-sm);
}

.sm-container--md {
	max-width: var(--sm-container-md);
}

.sm-container--lg {
	max-width: var(--sm-container-lg);
}

.sm-container--xl {
	max-width: var(--sm-container-xl);
}

.sm-container--2xl {
	max-width: var(--sm-container-2xl);
}

.sm-container--full {
	max-width: var(--sm-container-full);
}

.sm-container--prose {
	max-width: var(--sm-container-prose);
}

.sm-container--flush {
	padding-inline: 0;
}

/* ==========================================================================
   Sections — vertical rhythm
   ========================================================================== */

.sm-section {
	position: relative;
	padding-block: var(--sm-section-y);
}

.sm-section--sm {
	padding-block: var(--sm-section-y-sm);
}

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

.sm-section--tight {
	padding-block: var(--sm-space-10);
}

.sm-section--flush-top {
	padding-block-start: 0;
}

.sm-section--flush-bottom {
	padding-block-end: 0;
}

/* ==========================================================================
   Stack — owl-style vertical flow with a token-driven gap
   ========================================================================== */

.sm-stack > * + * {
	margin-block-start: var(--sm-stack);
}

.sm-stack--xs > * + * {
	margin-block-start: var(--sm-space-2);
}

.sm-stack--sm > * + * {
	margin-block-start: var(--sm-space-4);
}

.sm-stack--lg > * + * {
	margin-block-start: var(--sm-space-8);
}

.sm-stack--xl > * + * {
	margin-block-start: var(--sm-space-12);
}

/* ==========================================================================
   Grid
   Auto-fitting by default so column counts never need a media query.
   ========================================================================== */

.sm-grid {
	display: grid;
	gap: var(--sm-grid-gap);
}

.sm-grid--2 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.sm-grid--3 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.sm-grid--4 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}

.sm-grid--gap-lg {
	gap: var(--sm-grid-gap-lg);
}

/* Content + sidebar. Collapses to a single column below the lg breakpoint. */
.sm-layout-sidebar {
	display: grid;
	gap: var(--sm-grid-gap-lg);
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
}

@media (min-width: 1024px) {
	.sm-layout-sidebar {
		grid-template-columns: minmax(0, 1fr) 20rem;
	}

	.sm-layout-sidebar--narrow {
		grid-template-columns: minmax(0, 1fr) 17rem;
	}

	.sm-layout-sidebar__aside {
		position: sticky;
		top: calc(var(--sm-header-height) + var(--sm-space-6));
	}
}

/* ==========================================================================
   Cluster — horizontal group that wraps
   ========================================================================== */

.sm-cluster {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sm-space-3);
}

.sm-cluster--sm {
	gap: var(--sm-space-2);
}

.sm-cluster--lg {
	gap: var(--sm-space-5);
}

.sm-cluster--between {
	justify-content: space-between;
}

.sm-cluster--center {
	justify-content: center;
}

.sm-cluster--end {
	justify-content: flex-end;
}

/* ==========================================================================
   Prose — long-form content flow used by pages, posts and comments
   ========================================================================== */

.sm-prose {
	max-width: var(--sm-container-prose);
	font-size: var(--sm-text-md);
	line-height: var(--sm-leading-relaxed);
	color: var(--sm-color-text-secondary);
}

.sm-prose > * + * {
	margin-block-start: var(--sm-space-5);
}

.sm-prose > h2 {
	margin-block-start: var(--sm-space-12);
	margin-block-end: var(--sm-space-4);
}

.sm-prose > h3 {
	margin-block-start: var(--sm-space-10);
	margin-block-end: var(--sm-space-3);
}

.sm-prose > h4,
.sm-prose > h5,
.sm-prose > h6 {
	margin-block-start: var(--sm-space-8);
	margin-block-end: var(--sm-space-2);
}

.sm-prose > :first-child {
	margin-block-start: 0;
}

.sm-prose > :last-child {
	margin-block-end: 0;
}

.sm-prose > figure,
.sm-prose > pre,
.sm-prose > blockquote,
.sm-prose > table,
.sm-prose > .wp-block-image {
	margin-block: var(--sm-space-8);
}

/* Wide and full-bleed media escape the measure without breaking the flow. */
.sm-prose > .alignwide {
	width: min(100vw - (var(--sm-gutter) * 2), var(--sm-container-xl));
	max-width: none;
	margin-inline: calc(50% - min(50vw - var(--sm-gutter), var(--sm-container-xl) / 2));
}

.sm-prose > .alignfull {
	width: 100vw;
	max-width: none;
	margin-inline: calc(50% - 50vw);
	border-radius: 0;
}

/* ==========================================================================
   Decorative layers
   ========================================================================== */

.sm-backdrop {
	position: absolute;
	inset: 0;
	z-index: var(--sm-z-behind);
	pointer-events: none;
	overflow: hidden;
}

.sm-backdrop--mesh::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--sm-gradient-mesh);
}

.sm-backdrop--grid::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to right, var(--sm-pattern-grid-color) 1px, transparent 1px),
		linear-gradient(to bottom, var(--sm-pattern-grid-color) 1px, transparent 1px);
	background-size: var(--sm-pattern-grid-size) var(--sm-pattern-grid-size);
	mask-image: radial-gradient(70% 60% at 50% 0%, #000 0%, transparent 100%);
	-webkit-mask-image: radial-gradient(70% 60% at 50% 0%, #000 0%, transparent 100%);
}

/* ==========================================================================
   Utilities
   Deliberately few. Anything reused three times becomes a component instead.
   ========================================================================== */

.sm-u-visually-hidden,
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.sm-u-text-center {
	text-align: center;
}

.sm-u-text-balance {
	text-wrap: balance;
}

.sm-u-measure {
	max-width: var(--sm-measure);
}

.sm-u-measure-narrow {
	max-width: var(--sm-measure-narrow);
}

.sm-u-mx-auto {
	margin-inline: auto;
}

.sm-u-full-bleed {
	width: 100vw;
	margin-inline: calc(50% - 50vw);
}

.sm-u-no-scroll {
	overflow: hidden;
}

.sm-u-relative {
	position: relative;
}

@media (max-width: 767px) {
	.sm-u-hide-mobile {
		display: none !important;
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	.sm-u-hide-tablet {
		display: none !important;
	}
}

@media (min-width: 1024px) {
	.sm-u-hide-desktop {
		display: none !important;
	}
}

@media print {
	.sm-u-no-print,
	.sm-site__header,
	.sm-site__footer,
	.sm-nav-toggle,
	.sm-pagination {
		display: none !important;
	}
}