/*!
 * Sarv Catalyst — Layout layer
 *
 * Structural primitives only: containers, the grid, section rhythm and page
 * regions. No colour, no typography, no decoration. Those belong to the base
 * layer or to components.
 *
 * Every rule uses logical properties, so RTL requires no duplicate stylesheet.
 *
 * @see docs/ARCHITECTURE.md — "Responsive strategy"
 */

/* ---------------------------------------------------------------------------
 * Container
 *
 * One container, three widths. Templates never hand-roll a max-width, which is
 * what keeps content and wide alignment consistent across the site and keeps
 * the editor preview honest.
 * ------------------------------------------------------------------------- */

.sc-container {
	inline-size: 100%;
	max-inline-size: var(--sc-container-wide);
	margin-inline: auto;
	padding-inline: var(--sc-container-gutter);
}

.sc-container--narrow {
	max-inline-size: var(--sc-container-narrow);
}

.sc-container--content {
	max-inline-size: calc(var(--sc-container-content) + (var(--sc-container-gutter) * 2));
}

/*
 * Bleed-to-edge container. Used by full-width bands so the background reaches
 * the viewport edge while the inner content stays on the grid.
 */
.sc-container--full {
	max-inline-size: var(--sc-container-full);
	padding-inline: 0;
}

/* ---------------------------------------------------------------------------
 * Site structure
 *
 * The page is a vertical stack. Using grid with an explicit min-height keeps
 * the footer at the foot of short pages without a positioning hack.
 * ------------------------------------------------------------------------- */

.sc-site {
	display: grid;
	grid-template-rows: auto 1fr auto;
	grid-template-columns: minmax(0, 1fr);
	min-block-size: 100vh;
	min-block-size: 100dvh; /* dynamic viewport: correct on mobile browser chrome */
}

.sc-main {
	display: block;

	/* Vertical rhythm is owned by sections, not by the main element. */
	padding-block: 0;
}

/*
 * Anchor targets must clear the sticky header, otherwise a jump link lands
 * with the heading hidden behind it.
 */
:target {
	scroll-margin-block-start: calc(var(--sc-header-height) + var(--sc-space-sm));
}

/* ---------------------------------------------------------------------------
 * Section
 *
 * The unit of vertical rhythm. Every content band is a section, which is what
 * makes spacing predictable instead of per-page guesswork.
 * ------------------------------------------------------------------------- */

.sc-section {
	padding-block: var(--sc-space-section);
}

.sc-section--compact {
	padding-block: var(--sc-space-2xl);
}

.sc-section--flush {
	padding-block: 0;
}

/* Background variants. Semantic tokens only, so contrast is guaranteed. */
.sc-section--muted {
	background-color: var(--sc-color-surface-muted);
}

.sc-section--inverse {
	background-color: var(--sc-color-surface-inverse);
	color: var(--sc-color-text-inverse);
}

.sc-section--brand {
	background-color: var(--sc-color-surface-brand);
	color: var(--sc-color-text-on-brand);
}

/* ---------------------------------------------------------------------------
 * Grid
 *
 * An auto-fit grid carries most of the layout work: it reflows without any
 * breakpoint at all, which is why the theme needs very few media queries.
 * ------------------------------------------------------------------------- */

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

/*
 * Card grids. `auto-fit` with a sensible minimum means the same declaration
 * serves phone, tablet, laptop and large desktop. This is the deliberate
 * alternative to four breakpoints of hand-tuned column counts.
 */
.sc-grid--cards {
	grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
}

.sc-grid--cards-narrow {
	grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
}

.sc-grid--cards-wide {
	grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
}

/* Editorial splits: content plus an aside. Collapses to one column on its own. */
.sc-grid--split {
	grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
	gap: var(--sc-space-xl);
	align-items: start;
}

/* Sidebar layout, used by filterable archives. */
@media (width >= 64rem) {
	.sc-grid--with-aside {
		grid-template-columns: var(--sc-sidebar-width) minmax(0, 1fr);
		gap: var(--sc-space-xl);
	}
}

/*
 * The 12-column grid exists for the rare case where a deliberate, asymmetric
 * editorial composition is required. It is not the default layout mechanism.
 */
.sc-grid--12 {
	grid-template-columns: repeat(var(--sc-grid-columns), minmax(0, 1fr));
}

.sc-grid--12 > * {
	grid-column: span 12;
}

@media (width >= 48rem) {
	.sc-grid--12 > .sc-col--half {
		grid-column: span 6;
	}

	.sc-grid--12 > .sc-col--third {
		grid-column: span 4;
	}

	.sc-grid--12 > .sc-col--two-thirds {
		grid-column: span 8;
	}

	.sc-grid--12 > .sc-col--quarter {
		grid-column: span 3;
	}
}

/* ---------------------------------------------------------------------------
 * Stack and cluster
 *
 * Two extremely small primitives that between them remove most one-off margin
 * declarations from components. `gap` is used instead of margins so that
 * collapsing and last-child edge cases cannot occur.
 * ------------------------------------------------------------------------- */

.sc-stack {
	display: flex;
	flex-direction: column;
	gap: var(--sc-space-sm);
}

.sc-stack--tight {
	gap: var(--sc-space-2xs);
}

.sc-stack--loose {
	gap: var(--sc-space-lg);
}

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

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

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

/* ---------------------------------------------------------------------------
 * Page regions
 * ------------------------------------------------------------------------- */

.sc-site-header {
	position: sticky;
	inset-block-start: 0;
	z-index: var(--sc-z-sticky);
	background-color: var(--sc-color-surface);
	border-block-end: var(--sc-border-width) solid var(--sc-color-border);
}

.sc-site-footer {
	background-color: var(--sc-color-surface-inverse);
	color: var(--sc-color-text-inverse);
}

.sc-site-footer .sc-container {
	/* Footer content uses the wide grid but keeps its own vertical rhythm. */
	padding-block: var(--sc-space-2xl);
}

/* ---------------------------------------------------------------------------
 * Entry content
 *
 * Constrains authored prose to a comfortable measure while allowing the
 * author's own wide and full alignment choices to break out, which is what
 * theme.json's align-wide support expects.
 * ------------------------------------------------------------------------- */

.sc-entry-content > * {
	max-inline-size: var(--sc-container-content);
	margin-inline: auto;
}

.sc-entry-content > .alignwide {
	max-inline-size: var(--sc-container-wide);
}

.sc-entry-content > .alignfull {
	max-inline-size: var(--sc-container-full);
}

/* Overflowing tables and long code lines scroll inside their own region. */
.sc-table-scroll {
	overflow-x: auto;
	max-inline-size: 100%;

	/* Keep the scrollbar from sitting on top of the last row. */
	padding-block-end: var(--sc-space-3xs);
}

/* ---------------------------------------------------------------------------
 * Aspect ratio helper
 *
 * Reserves space for media before it loads, which is the difference between a
 * stable page and a layout that jumps as images arrive.
 * ------------------------------------------------------------------------- */

.sc-ratio {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background-color: var(--sc-color-surface-sunken);
}

.sc-ratio--square {
	aspect-ratio: 1 / 1;
}

.sc-ratio--4-3 {
	aspect-ratio: 4 / 3;
}

.sc-ratio--3-2 {
	aspect-ratio: 3 / 2;
}

.sc-ratio > img,
.sc-ratio > picture,
.sc-ratio > video,
.sc-ratio > iframe {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

/* ---------------------------------------------------------------------------
 * Breakpoint reference
 *
 * Deliberately only three. The brief warns against dozens of arbitrary
 * breakpoints and the layout is built so it does not need them.
 *
 *   48rem  (768px)  tablet — split layouts become two columns
 *   64rem (1024px)  laptop — the sidebar layout activates, nav becomes desktop
 *   80rem (1280px)  large desktop — container reaches its maximum width
 *
 * Anything below 48rem is a single-column, mobile-first layout. It is designed
 * for a phone, not shrunk from a desktop.
 * ------------------------------------------------------------------------- */