/**
 * Layout — container, grid system, section rhythm.
 * Breakpoints (Phase 04 §27): mobile <768, tablet 768-1023, desktop >=1024, large >=1280.
 */

.rt-container {
	width: 100%;
	max-width: var(--rt-container);
	margin-inline: auto;
	padding-inline: var(--rt-space-2);
	box-sizing: border-box;
}

@media (min-width: 768px) {
	.rt-container { padding-inline: var(--rt-space-3); }
}

/**
 * ROOT-CAUSE HARDENING — horizontal overflow (v1.0.4):
 *
 * By CSS spec, flex and grid items default to `min-width: auto`, which resolves
 * to the item's content min-content size — NOT 0. This means a grid/flex item
 * will refuse to shrink below what its content "wants" to be, even inside a
 * flexible `1fr` track. If any child anywhere in a grid/flex row has unbroken
 * content (a long word, an unbreakable string, an image, a nested grid with its
 * own intrinsic width), the entire row is forced to grow to fit it — and because
 * our layout nests grids inside grids inside flex rows (header → nav → menu items,
 * hero → grid → image, sections → grid → cards), this compounds multiplicatively
 * rather than additively, which is exactly the kind of many-times-viewport-width
 * overflow that was measured (documentElement.scrollWidth far exceeding
 * window.innerWidth). This is a well-documented CSS behavior, not a bug in any
 * single component — the fix is architectural: reset min-width (and min-height,
 * for column flex/grid rows) to 0 on every direct child of a flex/grid container,
 * so items are allowed to shrink to fit the track, and let text wrapping /
 * object-fit / overflow:hidden (already present on cards, images) do their job.
 */
.rt-grid > *,
.rt-grid--products > *,
.rt-flex > *,
.rt-flex--between > *,
.rt-header__inner > *,
.rt-nav__list > *,
.rt-hero > *,
.rt-footer__grid > *,
.rt-footer__bottom > *,
.rt-trust-bar__list > * {
	min-width: 0;
}

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

@media (min-width: 1024px) {
	.rt-section { padding-block: var(--rt-space-7); }
}

.rt-section__header {
	margin-bottom: var(--rt-space-4);
	max-width: 640px;
}

.rt-section__eyebrow {
	color: var(--rt-color-secondary);
	font-weight: 400;
	font-size: var(--rt-fs-small);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: var(--rt-space-1);
	display: block;
}

.rt-section__description {
	max-width: 60ch;
	margin-top: var(--rt-space-1);
	color: var(--rt-color-text-secondary);
}

/* Grid — mobile 4col, tablet 8col, desktop 12col */
.rt-grid {
	display: grid;
	gap: var(--rt-space-3);
	grid-template-columns: repeat(4, 1fr);
}

@media (min-width: 768px) {
	.rt-grid { grid-template-columns: repeat(8, 1fr); }
}

@media (min-width: 1024px) {
	.rt-grid { grid-template-columns: repeat(12, 1fr); }
}

.rt-grid--products {
	display: grid;
	gap: var(--rt-space-3);
	grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
	.rt-grid--products { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1280px) {
	.rt-grid--products { grid-template-columns: repeat(4, 1fr); }
}

.rt-flex { display: flex; }
.rt-flex--between { display: flex; align-items: center; justify-content: space-between; }
.rt-flex--wrap { flex-wrap: wrap; }
.rt-flex--gap-1 { gap: var(--rt-space-1); }
.rt-flex--gap-2 { gap: var(--rt-space-2); }
.rt-flex--gap-3 { gap: var(--rt-space-3); }