/**
 * Every Layout Primitives
 *
 * Port of Heydon Pickering's Every Layout methodology
 * as CSS utility classes for WordPress theme.
 *
 * @see https://every-layout.dev/
 */

/* ============================================
   Stack - Vertical Spacing
   ============================================ */

.stack {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.stack > * + * {
  margin-block-start: var(--stack-space, var(--space-4));
}

/* Stack size variants */
.stack-none { --stack-space: 0; }
.stack-xs { --stack-space: var(--space-1); }
.stack-sm { --stack-space: var(--space-2); }
.stack-md { --stack-space: var(--space-4); }
.stack-lg { --stack-space: var(--space-6); }
.stack-xl { --stack-space: var(--space-8); }
.stack-2xl { --stack-space: var(--space-12); }

/* Stack split variant - pushes elements after nth child to bottom */
.stack-split-2 > :nth-child(2) { margin-block-end: auto; }
.stack-split-3 > :nth-child(3) { margin-block-end: auto; }
.stack-split-4 > :nth-child(4) { margin-block-end: auto; }

/* ============================================
   Cluster - Horizontal Wrapping
   ============================================ */

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cluster-space, var(--space-4));
  align-items: var(--cluster-align, center);
  justify-content: var(--cluster-justify, flex-start);
}

/* Cluster size variants */
.cluster-xs { --cluster-space: var(--space-1); }
.cluster-sm { --cluster-space: var(--space-2); }
.cluster-md { --cluster-space: var(--space-4); }
.cluster-lg { --cluster-space: var(--space-6); }
.cluster-xl { --cluster-space: var(--space-8); }

/* Cluster alignment variants */
.cluster-start { --cluster-align: flex-start; }
.cluster-center { --cluster-align: center; }
.cluster-end { --cluster-align: flex-end; }

/* Cluster justify variants */
.cluster-justify-start { --cluster-justify: flex-start; }
.cluster-justify-center { --cluster-justify: center; }
.cluster-justify-end { --cluster-justify: flex-end; }
.cluster-justify-between { --cluster-justify: space-between; }

/* ============================================
   Center - Horizontal Centering
   ============================================ */

.center {
  box-sizing: content-box;
  max-inline-size: var(--center-max, var(--measure-wide));
  margin-inline: auto;
}

/* Center with text alignment */
.center-text {
  text-align: center;
}

/* Center with intrinsic sizing (for buttons, etc.) */
.center-intrinsic {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Center with gutters (padding that doesn't reduce content width) */
.center-gutters {
  padding-inline-start: var(--center-gutters, var(--space-4));
  padding-inline-end: var(--center-gutters, var(--space-4));
}

/* ============================================
   Grid - Auto-Responsive Grid
   ============================================ */

.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--grid-min, 16rem), 1fr));
  gap: var(--grid-gap, var(--space-6));
}

/* Grid minimum width variants */
.grid-auto-sm { --grid-min: 12rem; }
.grid-auto-md { --grid-min: 16rem; }
.grid-auto-lg { --grid-min: 20rem; }
.grid-auto-xl { --grid-min: 24rem; }

/* Grid gap variants */
.grid-gap-xs { --grid-gap: var(--space-1); }
.grid-gap-sm { --grid-gap: var(--space-2); }
.grid-gap-md { --grid-gap: var(--space-4); }
.grid-gap-lg { --grid-gap: var(--space-6); }
.grid-gap-xl { --grid-gap: var(--space-8); }

/* Fixed column grids */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--grid-gap, var(--space-6));
}

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

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

/* ============================================
   Sidebar - Two-Column Layout
   ============================================ */

.sidebar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sidebar-gap, var(--space-6));
}

.sidebar > :first-child {
  flex-basis: var(--sidebar-width, 18rem);
  flex-grow: 0;
}

.sidebar > :last-child {
  flex-basis: 0;
  flex-grow: 999;
  min-inline-size: var(--sidebar-content-min, 50%);
}

/* Sidebar right variant - sidebar on right instead of left */
.sidebar-right > :first-child {
  flex-basis: 0;
  flex-grow: 999;
  min-inline-size: var(--sidebar-content-min, 50%);
}

.sidebar-right > :last-child {
  flex-basis: var(--sidebar-width, 18rem);
  flex-grow: 0;
}

/* ============================================
   Cover - Vertical Centering with Header/Footer
   ============================================ */

.cover {
  display: flex;
  flex-direction: column;
  min-block-size: var(--cover-min-height, 100vh);
  padding: var(--cover-padding, var(--space-4));
}

.cover > * {
  margin-block: var(--cover-space, var(--space-4));
}

/* Element to be centered */
.cover > .cover-center {
  margin-block: auto;
}

/* ============================================
   Frame - Aspect Ratio
   ============================================ */

.frame {
  aspect-ratio: var(--frame-ratio, 16 / 9);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.frame > *,
.frame > img,
.frame > video {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* Frame ratio variants */
.frame-square { --frame-ratio: 1; }
.frame-video { --frame-ratio: 16 / 9; }
.frame-landscape { --frame-ratio: 4 / 3; }
.frame-portrait { --frame-ratio: 3 / 4; }
.frame-golden { --frame-ratio: 1.618; }

/* Frame object-fit variants */
.frame-contain > * { object-fit: contain; }
.frame-fill > * { object-fit: fill; }

/* ============================================
   Box - Intrinsic Styling Container
   ============================================ */

.box {
  padding: var(--box-padding, var(--space-4));
  border: var(--box-border-width, 1px) solid var(--box-border-color, var(--border));
  background-color: var(--box-bg, var(--surface));
  color: var(--box-color, inherit);
}

/* Box padding variants */
.box-xs { --box-padding: var(--space-1); }
.box-sm { --box-padding: var(--space-2); }
.box-md { --box-padding: var(--space-4); }
.box-lg { --box-padding: var(--space-6); }
.box-xl { --box-padding: var(--space-8); }

/* Box without border */
.box-borderless {
  --box-border-width: 0;
}

/* Box with inverted colors */
.box-invert {
  background-color: var(--text);
  color: var(--surface);
}

/* ============================================
   Switcher - Threshold-Based Responsive
   ============================================ */

.switcher {
  display: flex;
  flex-wrap: wrap;
  gap: var(--switcher-gap, var(--space-4));
}

.switcher > * {
  flex-grow: 1;
  flex-basis: calc((var(--switcher-threshold, 30rem) - 100%) * 999);
}

/* Switcher threshold variants */
.switcher-sm { --switcher-threshold: 20rem; }
.switcher-md { --switcher-threshold: 30rem; }
.switcher-lg { --switcher-threshold: 40rem; }

/* Switcher with limit on number of columns */
.switcher-limit-2 > :nth-last-child(n + 3),
.switcher-limit-2 > :nth-last-child(n + 3) ~ * {
  flex-basis: 100%;
}

.switcher-limit-3 > :nth-last-child(n + 4),
.switcher-limit-3 > :nth-last-child(n + 4) ~ * {
  flex-basis: 100%;
}

/* ============================================
   Reel - Horizontal Scroll
   ============================================ */

.reel {
  display: flex;
  block-size: var(--reel-height, auto);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-color: var(--reel-scrollbar-color, var(--border)) var(--reel-scrollbar-bg, var(--surface));
  gap: var(--reel-gap, var(--space-4));
}

.reel::-webkit-scrollbar {
  block-size: 1rem;
}

.reel::-webkit-scrollbar-track {
  background-color: var(--reel-scrollbar-bg, var(--surface));
}

.reel::-webkit-scrollbar-thumb {
  background-color: var(--reel-scrollbar-color, var(--border));
  border-radius: var(--radius-sm, 0.25rem);
}

.reel > * {
  flex-shrink: 0;
  flex-basis: var(--reel-item-width, auto);
}

/* Reel without scrollbar */
.reel-no-bar {
  scrollbar-width: none;
}

.reel-no-bar::-webkit-scrollbar {
  display: none;
}

/* Reel item width variants */
.reel-item-sm { --reel-item-width: 12rem; }
.reel-item-md { --reel-item-width: 16rem; }
.reel-item-lg { --reel-item-width: 20rem; }
.reel-item-xl { --reel-item-width: 24rem; }

/* ============================================
   Icon - Icon + Text Alignment
   ============================================ */

.icon {
  display: inline-flex;
  align-items: baseline;
  gap: var(--icon-space, 0.5em);
}

.icon svg,
.icon img {
  width: var(--icon-size, 0.75em);
  height: var(--icon-size, 0.75em);
  flex-shrink: 0;
}

/* Icon size variants */
.icon-xs { --icon-size: 0.5em; }
.icon-sm { --icon-size: 0.75em; }
.icon-md { --icon-size: 1em; }
.icon-lg { --icon-size: 1.5em; }
.icon-xl { --icon-size: 2em; }

/* Icon without label (just the icon) */
.icon-only {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ============================================
   Imposter - Centered Overlay
   ============================================ */

.imposter {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  max-inline-size: var(--imposter-max-width, 100%);
  max-block-size: var(--imposter-max-height, 100%);
  overflow: auto;
}

/* Imposter with fixed positioning (viewport-based) */
.imposter-fixed {
  position: fixed;
}

/* Imposter with margin (doesn't touch edges) */
.imposter-margin {
  --imposter-max-width: calc(100% - var(--space-8));
  --imposter-max-height: calc(100% - var(--space-8));
}

/* ============================================
   Container - Container Query Context
   ============================================ */

.container-query {
  container-type: inline-size;
}

.container-query-normal {
  container-type: normal;
}

/* Named containers for targeted queries */
.container-query-sidebar {
  container-type: inline-size;
  container-name: sidebar;
}

.container-query-main {
  container-type: inline-size;
  container-name: main;
}

/* ============================================
   Utility: Measure
   ============================================ */

/* Optimal reading width */
:root {
  --measure: 65ch;
}

.measure {
  max-inline-size: var(--measure);
}

.measure-narrow {
  max-inline-size: 45ch;
}

.measure-wide {
  max-inline-size: 80ch;
}

/* ============================================
   Section Backgrounds — Utility Classes
   Add/remove these classes to toggle section coloring.
   ============================================ */

/* Warm accent gradient: cream → surface (hero style) */
.section-bg-accent {
  background: linear-gradient(135deg, var(--accent-200) 0%, var(--surface) 100%);
}

/* Warm accent gradient reversed: surface → cream (coming-soon style) */
.section-bg-accent-reverse {
  background: linear-gradient(to bottom, var(--surface) 0%, var(--accent-200) 100%);
}

/* Slightly raised surface for alternate sections (blog style) */
.section-bg-raised {
  background-color: var(--surface-raised);
}

/* Primary coral gradient with light text (newsletter style) */
.section-bg-primary {
  background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-600) 100%);
  color: white;
}