/**
 * RF layout primitives: containers, gutters, stacks, grids, media ratios and
 * accessibility helpers. Components compose these instead of re-implementing layout.
 */

/* ------------------------------------------------------------- Containers */
.rf-container {
	width: 100%;
	max-width: var(--layout-max);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.rf-container--wide {
	max-width: var(--layout-wide);
}

.rf-container--text {
	max-width: calc(var(--layout-text) + 2 * var(--gutter));
}

.rf-container--bleed {
	max-width: none;
	padding-inline: 0;
}

/* -------------------------------------------------------------- Sections */
.rf-section {
	padding-block: var(--space-section);
}

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

/* ---------------------------------------------------------- Stack / cluster */
.rf-stack {
	display: flex;
	flex-direction: column;
	gap: var(--stack-gap, var(--space-s));
}

.rf-cluster {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--cluster-gap, var(--space-xs));
}

/* ------------------------------------------------------------------ Grid */
/* Mobile-first product/editorial grid. Columns: --grid-cols (2), --grid-cols-md (3), --grid-cols-lg (4). */
.rf-grid {
	display: grid;
	grid-template-columns: repeat(var(--grid-cols, 2), minmax(0, 1fr));
	column-gap: var(--space-grid-x);
	row-gap: var(--space-grid-y);
}

@media (min-width: 900px) {
	.rf-grid {
		grid-template-columns: repeat(var(--grid-cols-md, 3), minmax(0, 1fr));
	}
}

@media (min-width: 1200px) {
	.rf-grid {
		grid-template-columns: repeat(var(--grid-cols-lg, 4), minmax(0, 1fr));
	}
}

/* ------------------------------------------------------------ Media ratio */
.rf-ratio {
	position: relative;
	aspect-ratio: var(--ratio, var(--ratio-product));
	overflow: hidden;
	background: var(--color-surface);
}

.rf-ratio--editorial { --ratio: var(--ratio-editorial); }
.rf-ratio--hero { --ratio: var(--ratio-hero-mobile); }

@media (min-width: 900px) {
	.rf-ratio--hero { --ratio: var(--ratio-hero); }
}

.rf-ratio > :is(img, video, picture, iframe) {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ------------------------------------------------------- Accessibility */
.rf-visually-hidden:not(:focus):not(:active) {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.rf-skip-link {
	position: fixed;
	top: calc(var(--admin-bar) + var(--space-2xs));
	left: var(--space-2xs);
	z-index: var(--z-skip-link);
	padding: var(--space-xs) var(--space-s);
	background: var(--color-text);
	color: var(--color-bg);
	font-size: var(--type-nav-size);
	translate: 0 calc(-100% - var(--admin-bar) - var(--space-s));
	transition: translate var(--duration-fast) var(--ease-standard);
}

.rf-skip-link:focus {
	translate: 0 0;
}

.rf-main:focus {
	outline: none;
}