/*
 * Layout primitives (Phase 3A — docs/COMPONENT-LIBRARY.md).
 * Structural building blocks every page composes with: container, section,
 * grid, stack, divider, sticky-container. No page-specific layout here.
 */

/* --- Container --- */

.bholats-container {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad-mobile);
}

.bholats-container--narrow { max-width: var(--container-narrow); }

@media (min-width: 768px) {
	.bholats-container { padding-inline: var(--container-pad-tablet); }
}

@media (min-width: 1024px) {
	.bholats-container { padding-inline: var(--container-pad-desktop); }
}

/* --- Section --- */

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

.bholats-section--tight { padding-block: var(--space-6); }
.bholats-section--loose { padding-block: var(--space-12); }

.bholats-section__header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-4);
	margin-bottom: var(--space-6);
}

/* --- Grid ---
   Generic responsive grid. Product-grid-specific column counts live in
   components/product-card.css since that grid has its own documented
   breakpoint rules (docs/DESIGN-SYSTEM.md §4). */

.bholats-grid {
	display: grid;
	gap: var(--space-4);
	grid-template-columns: repeat(var(--bholats-grid-cols, 1), 1fr);
}

.bholats-grid--2 { --bholats-grid-cols: 1; }
.bholats-grid--3 { --bholats-grid-cols: 1; }
.bholats-grid--4 { --bholats-grid-cols: 2; }

@media (min-width: 768px) {
	.bholats-grid--2 { --bholats-grid-cols: 2; }
	.bholats-grid--3 { --bholats-grid-cols: 3; }
	.bholats-grid--4 { --bholats-grid-cols: 3; }
}

@media (min-width: 1024px) {
	.bholats-grid--4 { --bholats-grid-cols: 4; }
}

/* --- Stack --- */

.bholats-stack {
	display: flex;
	flex-direction: column;
	gap: var(--bholats-stack-gap, var(--space-4));
}

.bholats-stack--sm { --bholats-stack-gap: var(--space-2); }
.bholats-stack--lg { --bholats-stack-gap: var(--space-6); }

.bholats-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--bholats-row-gap, var(--space-4));
}

.bholats-row--sm { --bholats-row-gap: var(--space-2); }
.bholats-row--between { justify-content: space-between; }

/* --- Divider --- */

.bholats-divider {
	border: none;
	border-top: var(--border-default);
	margin: var(--space-6) 0;
}

.bholats-divider--vertical {
	border: none;
	border-left: var(--border-default);
	align-self: stretch;
	margin: 0 var(--space-4);
}

/* --- Sticky container ---
   Generic sticky-positioning utility (used by the mobile filter/sort bar,
   sticky product-page purchase panel, etc. — the specific UI is built when
   those pages are, this is just the reusable mechanism). */

.bholats-sticky {
	position: sticky;
	top: var(--bholats-sticky-offset, 0);
	z-index: var(--z-sticky);
	background: var(--color-surface);
}

.bholats-sticky--bottom {
	position: sticky;
	bottom: 0;
	top: auto;
	z-index: var(--z-sticky);
	background: var(--color-surface);
	box-shadow: var(--shadow-lg);
}

/* --- Screen-reader-only utility (used across components for accessible labels) --- */

.bholats-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}