/**
 * OSHIDA — layout primitives.
 *
 * Container, section rhythm and grid helpers. Logical properties only: this
 * file must render identically if `dir` flips, because direction is set by
 * WordPress's `language_attributes()`, not by CSS.
 *
 * Owner: work package A1.
 */

/* --------------------------------------------------------------------------
 * Containers
 *
 * @figma 1486:564 — the footer wordmark is 1235px wide inside a 1440px frame,
 * so the gutter at the design width is (1440 - 1235) / 2 = 102.5px (7.12vw).
 * @figma 2014:2632 — the accordion panel is 1168px wide at a 136px inset;
 * panels are inset further than the page container.
 * -------------------------------------------------------------------------- */

/*
 * --o-container is the CONTENT width (1235px), and --o-gutter is the space
 * outside it (102.5px each side at the 1440px design width). Under the default
 * border-box sizing, padding eats into max-inline-size — so setting
 * max-inline-size to --o-container alone yields a 1030px column, 205px short.
 * The gutters have to be added back on.
 */
.o-container {
	inline-size: 100%;
	max-inline-size: calc(var(--o-container) + var(--o-gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--o-gutter);
}

.o-container--panel {
	max-inline-size: calc(var(--o-container-panel) + var(--o-gutter-panel) * 2);
	padding-inline: var(--o-gutter-panel);
}

.o-container--flush {
	max-inline-size: var(--o-container);
	padding-inline: 0;
}

.o-container--panel.o-container--flush {
	max-inline-size: var(--o-container-panel);
}

/* --------------------------------------------------------------------------
 * Section rhythm
 * -------------------------------------------------------------------------- */

.o-section {
	padding-block: var(--o-section-gap);
}

.o-section--lg {
	padding-block: var(--o-section-gap-lg);
}

.o-section--tight {
	padding-block: var(--o-space-lg);
}

.o-section > * + * {
	margin-block-start: var(--o-space-lg);
}

/* --------------------------------------------------------------------------
 * Grids
 *
 * @figma 1598:1950 — the why-partner grid is 2 columns x 3 rows with a 30px
 * gap and 63px/58px padding.
 * -------------------------------------------------------------------------- */

.o-grid {
	display: grid;
	gap: var(--o-space-md);
}

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

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

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

/* Column count follows the available width, no breakpoint needed. */
.o-grid--auto {
	grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
}

/* --------------------------------------------------------------------------
 * Stacks and clusters
 * -------------------------------------------------------------------------- */

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

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

.o-center {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* --------------------------------------------------------------------------
 * The staggered service column
 *
 * @figma 1579:1067 / 1579:1084 — the two columns of service cards are offset
 * from each other by 165.79px at the design width, on a 400.63px pitch.
 * Below `md` the offset collapses and the cards align flush.
 * -------------------------------------------------------------------------- */

.o-stagger {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--o-space-md);
}

.o-stagger > :nth-child(even) {
	margin-block-start: var(--o-card-offset);
}

/* --------------------------------------------------------------------------
 * Collapse points
 *
 * `md` (600-899px) and below: every multi-column grid becomes one column and
 * the stagger flattens — docs/ai/design-tokens.md, "Breakpoints".
 * -------------------------------------------------------------------------- */

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

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

	.o-stagger > :nth-child(even) {
		margin-block-start: 0;
	}

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