/* ==========================================================================
   BlinkShift — Layout primitives
   Containers, section rhythm, grids, header/footer shells.
   ========================================================================== */

/* ----------------------------------------------------------- containers */

.bs-container {
	width: 100%;
	max-width: calc(var(--container) + (var(--gutter) * 2));
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.bs-container--wide {
	max-width: calc(var(--container-wide) + (var(--gutter) * 2));
}

.bs-container--narrow {
	max-width: calc(var(--container-narrow) + (var(--gutter) * 2));
}

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

/* ------------------------------------------------------------- sections */

.bs-section {
	position: relative;
	padding-block: var(--section-y);
	background-color: var(--c-bg);
	color: var(--c-ink);
}

/* Spacing modifiers are an editor's explicit choice, so they must outrank any
   block-specific padding. Doubling the class raises specificity above the
   single-class rules in blocks.css, which load later. */
.bs-section.bs-section--lg { padding-block: var(--section-y-lg); }
.bs-section.bs-section--sm { padding-block: var(--section-y-sm); }
.bs-section.bs-section--flush-top { padding-block-start: 0; }
.bs-section.bs-section--flush-bottom { padding-block-end: 0; }
.bs-section.bs-section--flush { padding-block: 0; }

/* Hairline between two sections that share a background. */
.bs-section--ruled + .bs-section--ruled {
	border-top: 1px solid var(--c-line);
}

/* Decorative vertical grid lines — the "engineering drawing" motif. */
.bs-section--gridlines::before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	background-image: repeating-linear-gradient(
		to right,
		var(--c-line) 0 1px,
		transparent 1px calc(100% / 6)
	);
	opacity: 0.5;
	mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}

.bs-section > * {
	position: relative;
	z-index: 1;
}

/* --------------------------------------------------------------- stacks */

.bs-stack {
	display: flex;
	flex-direction: column;
	gap: var(--sp-6);
}

.bs-stack--sm { gap: var(--sp-3); }
.bs-stack--lg { gap: var(--sp-10); }
.bs-stack--xl { gap: var(--sp-16); }

/* ---------------------------------------------------------------- grids */

.bs-grid {
	display: grid;
	gap: var(--sp-6);
}

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

.bs-grid--gap-lg { gap: var(--sp-10); }
.bs-grid--gap-sm { gap: var(--sp-4); }

/* Cards that should never drop below a readable width. */
.bs-grid--auto {
	grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
}

@media (max-width: 1024px) {
	.bs-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bs-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
	.bs-grid--2,
	.bs-grid--3,
	.bs-grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* -------------------------------------------------------------- splits */

/* Asymmetric two-column layouts. Ratios are named after their left share. */
.bs-split {
	display: grid;
	gap: clamp(var(--sp-8), 5vw, var(--sp-20));
	align-items: start;
}

.bs-split--50 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bs-split--40 { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); }
.bs-split--60 { grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); }
.bs-split--35 { grid-template-columns: minmax(0, 35fr) minmax(0, 65fr); }
.bs-split--65 { grid-template-columns: minmax(0, 65fr) minmax(0, 35fr); }

.bs-split--center { align-items: center; }
.bs-split--end { align-items: end; }

@media (max-width: 900px) {
	.bs-split { grid-template-columns: minmax(0, 1fr); }
}

/* A sticky left rail paired with a scrolling right column. */
.bs-sticky {
	position: sticky;
	top: calc(var(--header-h) + var(--sp-8));
}

@media (max-width: 900px) {
	.bs-sticky { position: static; }
}

/* ------------------------------------------------------------ alignment */

.bs-center { text-align: center; }
.bs-center-x { margin-inline: auto; }

.bs-measure { max-width: 62ch; }
.bs-measure--tight { max-width: 48ch; }
.bs-measure--wide { max-width: 76ch; }

.bs-center .bs-measure,
.bs-center .bs-measure--tight,
.bs-center .bs-measure--wide { margin-inline: auto; }

/* ------------------------------------------------------- page structure */

.bs-page {
	display: flex;
	flex-direction: column;
	min-height: 100svh;
}

.bs-main {
	flex: 1 0 auto;
}

/* The header is fixed, so whatever sits at the top of a page has to clear it.
   Heroes and page headers already fold that offset into their own padding;
   everything else (a marquee, a stats bar, a CTA opening a page) would
   otherwise run underneath the logo and nav. */
.bs-main > :first-child:not(.bs-hero):not(.bs-pagehead) {
	padding-block-start: calc(var(--header-h) + var(--sp-6));
}

/* A flush section opening a page still needs the clearance, so re-assert it
   above the .bs-section--flush reset. */
.bs-main > .bs-section--flush:first-child:not(.bs-hero) {
	padding-block-start: calc(var(--header-h) + var(--sp-6));
}

/* Section-built pages run edge to edge; ordinary pages get a content shell. */
.bs-content-shell {
	padding-block: var(--section-y);
}

/* -------------------------------------------------------- full-bleed util */

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

/* --------------------------------------------------------------- helpers */

.bs-hide { display: none !important; }

@media (max-width: 900px) {
	.bs-hide\@md { display: none !important; }
}

@media (max-width: 720px) {
	.bs-hide\@sm { display: none !important; }
}

@media (min-width: 901px) {
	.bs-show\@md-only { display: none !important; }
}