/* =================================================================
   File:    03-layout.css
   Purpose: The TWO layout classes that define the whole site.

   .liqui-container  -> centered, max-width 1600px. Use on PAGE content
                       (page.php, archive.php, single.php, single-product, etc.)
   .liqui-fullbleed  -> no max-width. Full viewport width with comfortable
                       side padding. Use on HEADER and FOOTER wrappers.

   These rules are LOCKED per user spec. Do not add a max-width to
   .liqui-fullbleed or remove the cap from .liqui-container.
   ================================================================= */

/* Centered, capped page content */
.liqui-container {
	width: 100%;
	max-width: var(--content-max);   /* 1600px */
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* Edge-to-edge wrapper for header / footer / hero strip etc. */
.liqui-fullbleed {
	width: 100%;
	max-width: none;
	padding-inline: var(--fullbleed-padding);
}

/* Inner row inside a fullbleed bar — used to space children evenly without
   adding a max-width. Children flow across the entire bar. */
.liqui-fullbleed__row {
	display: flex;
	align-items: center;
	gap: var(--space-5);
	width: 100%;
}

/* Section spacing (vertical rhythm between page sections) */
.liqui-section {
	padding-block: clamp(var(--space-6), 5vw, var(--space-9));
}
.liqui-section--tight  { padding-block: clamp(var(--space-5), 3vw, var(--space-7)); }
.liqui-section--loose  { padding-block: clamp(var(--space-8), 7vw, var(--space-10)); }

/* Generic grid helpers used by widgets */
.liqui-grid {
	display: grid;
	gap: var(--space-5);
}
.liqui-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.liqui-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.liqui-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.liqui-grid--auto-220 { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.liqui-grid--auto-280 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

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

/* Stack helper */
.liqui-stack > * + * { margin-block-start: var(--space-4); }
.liqui-stack--sm > * + * { margin-block-start: var(--space-2); }
.liqui-stack--lg > * + * { margin-block-start: var(--space-6); }

/* Cluster — inline group with wrap */
.liqui-cluster {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	align-items: center;
}

/* Visually hidden but accessible */
.liqui-sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0);
	white-space: nowrap; border: 0;
}

/* Skip link */
.liqui-skip-link {
	position: absolute;
	inset-inline-start: -10000px;
	top: 0;
	background: var(--c-ink);
	color: #fff;
	padding: var(--space-3) var(--space-4);
	z-index: var(--z-toast);
	border-radius: 0 0 var(--radius) var(--radius);
}
.liqui-skip-link:focus {
	inset-inline-start: var(--space-4);
}