/* ==================================================================
   04 - GRID
   Containers, section rhythm, and the grid system.

   Design note: this file contains almost no media queries on purpose.
   The grids are *intrinsically* responsive - they use auto-fill with
   minmax(), so columns are decided by available width rather than by
   device width. A 4-column grid becomes 3, then 2, then 1 on its own,
   and it also works correctly inside a narrow sidebar where a
   viewport-based media query would get it wrong.

   Discrete layout switches that cannot be expressed intrinsically
   (the navbar collapsing, the hero splitting) live in
   12-responsive.css.
   ================================================================== */


/* ------------------------------------------------------------------
   CONTAINER
   min() keeps the side gutter on small screens and caps the width
   on large ones, in a single declaration.
   ------------------------------------------------------------------ */

.wo-container {
	width: min(100%, calc(var(--wo-container) + (var(--wo-gutter) * 2)));
	margin-inline: auto;
	padding-inline: var(--wo-gutter);
}

.wo-container--wide {
	width: min(100%, calc(var(--wo-container-wide) + (var(--wo-gutter) * 2)));
}

.wo-container--narrow {
	width: min(100%, calc(var(--wo-container-narrow) + (var(--wo-gutter) * 2)));
}

/* Full-bleed band that still keeps its inner content aligned. */
.wo-container--flush {
	width: 100%;
	max-width: none;
	padding-inline: 0;
}


/* ------------------------------------------------------------------
   SECTION
   Vertical rhythm. Every homepage block is a .wo-section.
   ------------------------------------------------------------------ */

.wo-section {
	position: relative;
	padding-block: var(--wo-section-y);
}

.wo-section--sm {
	padding-block: var(--wo-section-y-sm);
}

.wo-section--flush-top    { padding-top: 0; }
.wo-section--flush-bottom { padding-bottom: 0; }

/* Tinted band - trust bar, alternating sections. */
.wo-section--soft {
	background: var(--wo-bg-soft);
	border-block: 1px solid var(--wo-line-faint);
}

.wo-section--deep {
	background: var(--wo-bg-deep);
}

/* Section content must clear the fixed starfield stacking context. */
.wo-section > * {
	position: relative;
	z-index: var(--wo-z-content);
}


/* ------------------------------------------------------------------
   GRID BASE
   ------------------------------------------------------------------ */

.wo-grid {
	display: grid;
	gap: var(--wo-gap);
}


/* ------------------------------------------------------------------
   AUTO GRIDS
   The workhorses. Column count is derived from the minimum
   comfortable card width, never from a device name.

   min(100%, Xpx) is essential - without it, a card whose minimum is
   wider than the screen causes horizontal overflow on 320px phones.
   ------------------------------------------------------------------ */

/* Product cards.
   Explicit two columns rather than auto-fill. auto-fill creates only
   as many tracks as there are items, so a single product stretched
   to the full row width - the card must keep its proportions whether
   there are one or eight. The empty second track simply stays empty.
   The count steps up at 768px and 1200px in 13-responsive.css. */
.wo-grid--products {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* A lone item must not stretch to fill its track's row. */
.wo-grid--products > * {
	min-width: 0;
}

/* Category tiles: always two across on phones. The count is stated
   rather than derived, because a 320px screen cannot fit two 150px
   columns and would otherwise collapse to one. minmax(0, 1fr) lets
   the columns shrink below their content width instead of overflowing. */
.wo-grid--categories {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Testimonials and feature cards. */
.wo-grid--cards {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}

/* Trust bar items: 1 -> 2 -> 4. */
.wo-grid--trust {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
	gap: var(--wo-space-6) var(--wo-space-8);
}

/* Blog listing. */
.wo-grid--posts {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}

/* Footer columns: brand block + three link columns. */
.wo-grid--footer {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
	gap: var(--wo-space-10) var(--wo-gap);
}


/* ------------------------------------------------------------------
   FIXED COLUMN GRIDS
   For layouts that must hold an exact count. Each one collapses to a
   single column below its own natural minimum using container-style
   min-width logic rather than a device breakpoint.
   ------------------------------------------------------------------ */

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

/* Two-panel split: hero, Why WaxOrbit, single product. */
.wo-split {
	display: grid;
	grid-template-columns: 1fr;   /* stacked by default - mobile first */
	gap: var(--wo-gap);
	align-items: center;
}

/* Ratio variants applied at the lg breakpoint in 12-responsive.css. */
.wo-split--even   { --wo-split-cols: 1fr 1fr; }
.wo-split--wide-l { --wo-split-cols: 1.15fr 1fr; }
.wo-split--wide-r { --wo-split-cols: 1fr 1.15fr; }
.wo-split--product{ --wo-split-cols: 1.05fr 1fr; }

/* Reverses visual order without changing the DOM (keeps screen
   readers and mobile stacking in the correct sequence). */
.wo-split__media--first {
	order: -1;
}


/* ------------------------------------------------------------------
   GAP MODIFIERS
   ------------------------------------------------------------------ */

.wo-gap-0  { gap: 0; }
.wo-gap-sm { gap: var(--wo-space-3); }
.wo-gap-md { gap: var(--wo-space-6); }
.wo-gap-lg { gap: var(--wo-space-10); }
.wo-gap-xl { gap: clamp(2rem, 5vw, 4rem); }


/* ------------------------------------------------------------------
   FLEX HELPERS
   For rows of buttons, meta lines, badges.
   ------------------------------------------------------------------ */

.wo-flex {
	display: flex;
	gap: var(--wo-space-4);
}

.wo-flex--col     { flex-direction: column; }
.wo-flex--wrap    { flex-wrap: wrap; }
.wo-flex--center  { align-items: center; justify-content: center; }
.wo-flex--between { align-items: center; justify-content: space-between; }
.wo-flex--start   { align-items: flex-start; }
.wo-flex--end     { align-items: center; justify-content: flex-end; }
.wo-flex--baseline{ align-items: baseline; }
.wo-flex--middle  { align-items: center; }

/* Pushes the next sibling to the far edge of a flex row. */
.wo-flex__spacer {
	flex: 1 1 auto;
}


/* ------------------------------------------------------------------
   SCROLL ROW
   Horizontal scrolling strip used for the category filter pills and
   the product tabs on narrow screens. Snaps, hides its scrollbar,
   and bleeds to the screen edge so it reads as scrollable.
   ------------------------------------------------------------------ */

.wo-scroll-row {
	display: flex;
	gap: var(--wo-space-3);
	overflow-x: auto;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding-bottom: var(--wo-space-1);
}

.wo-scroll-row::-webkit-scrollbar {
	display: none;
}

.wo-scroll-row > * {
	flex: 0 0 auto;
	scroll-snap-align: start;
}

/* Edge bleed so the last pill isn't clipped flush against the gutter. */
.wo-scroll-row--bleed {
	margin-inline: calc(var(--wo-gutter) * -1);
	padding-inline: var(--wo-gutter);
}


/* ------------------------------------------------------------------
   ASPECT RATIOS
   Reserving space before images load prevents layout shift (CLS).
   ------------------------------------------------------------------ */

.wo-ratio {
	position: relative;
	overflow: hidden;
}

.wo-ratio--square    { aspect-ratio: 1 / 1; }
.wo-ratio--portrait  { aspect-ratio: 4 / 5; }
.wo-ratio--card      { aspect-ratio: 1 / 1; }
.wo-ratio--wide      { aspect-ratio: 16 / 9; }
.wo-ratio--hero      { aspect-ratio: 3 / 4; }

.wo-ratio > img,
.wo-ratio > video,
.wo-ratio > canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}


/* ------------------------------------------------------------------
   STACK
   Consistent vertical spacing between siblings without margin
   collapse surprises.
   ------------------------------------------------------------------ */

.wo-stack        { display: flex; flex-direction: column; gap: var(--wo-space-4); }
.wo-stack--xs    { gap: var(--wo-space-2); }
.wo-stack--sm    { gap: var(--wo-space-3); }
.wo-stack--md    { gap: var(--wo-space-6); }
.wo-stack--lg    { gap: var(--wo-space-8); }


/* ------------------------------------------------------------------
   PANEL
   The rounded translucent card surface used for tab bodies, review
   boxes, and content wells.
   ------------------------------------------------------------------ */

.wo-panel {
	background: var(--wo-grad-surface);
	border: 1px solid var(--wo-line);
	border-radius: var(--wo-radius-lg);
	padding: clamp(1.25rem, 3vw, 2.25rem);
}

.wo-panel--flat {
	background: rgba(36, 26, 77, 0.55);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.wo-panel--tight {
	padding: clamp(1rem, 2vw, 1.5rem);
}


/* ------------------------------------------------------------------
   ORDER HELPERS
   ------------------------------------------------------------------ */

.wo-order-first { order: -1; }
.wo-order-last  { order: 99; }