/**
 * Layout Patterns
 * 
 * Compositional layout patterns using design tokens.
 * These are multi-property compositions for common layout structures.
 * 
 * For single-purpose utilities (display, flexbox, spacing), see utilities.css
 * For design tokens (spacing, sizing values), see tokens.css
 */

/* ========================================
   GRID DESIGN TOKENS
   ======================================== */

:root {
  /* Grid column templates */
  --grid-cols-1: 1fr;
  --grid-cols-2: 1fr 1fr;
  --grid-cols-3: 1fr 1fr 1fr;
  --grid-cols-4: 1fr 1fr 1fr 1fr;
  --grid-cols-5: 1fr 1fr 1fr 1fr 1fr;
  --grid-cols-6: 1fr 1fr 1fr 1fr 1fr 1fr;
  --grid-cols-12: repeat(12, 1fr);

  /* Grid repeat templates for equal columns */
  --grid-repeat-1: repeat(1, minmax(0, 1fr));
  --grid-repeat-2: repeat(2, minmax(0, 1fr));
  --grid-repeat-3: repeat(3, minmax(0, 1fr));
  --grid-repeat-4: repeat(4, minmax(0, 1fr));
  --grid-repeat-5: repeat(5, minmax(0, 1fr));
  --grid-repeat-6: repeat(6, minmax(0, 1fr));
  --grid-repeat-12: repeat(12, minmax(0, 1fr));

  /* Grid ratio templates for two-column layouts */
  --grid-cols-1-1: 1fr 1fr;
  --grid-cols-2-1: 2fr 1fr;
  --grid-cols-1-2: 1fr 2fr;
  --grid-cols-3-2: 3fr 2fr;
  --grid-cols-2-3: 2fr 3fr;

  /* Grid minimum widths */
  --grid-min-width-xs: 160px;
  --grid-min-width-sm: 200px;
  --grid-min-width-md: 250px;
  --grid-min-width-lg: 300px;
  --grid-min-width-xl: 350px;

  /* Grid gaps */
  --grid-gap-xs: var(--space-2);
  --grid-gap-sm: var(--space-4);
  --grid-gap-md: var(--space-6);
  --grid-gap-lg: var(--space-8);
  --grid-gap-xl: var(--space-12);
}

/* ========================================
   PAGE STRUCTURE
   ======================================== */

/* Main wrapper - constrains page width and centers content */
.wrap {
  width: 100%;
  max-width: var(--container-xl);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

/* Content panel inside wrapper */
.panel {
  width: 100%;
}

/* ========================================
   CONTAINER SYSTEM
   Semantic width constraints for content areas
   ======================================== */

.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

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

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

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

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

.container-2xl {
  max-width: var(--container-2xl);
}

.container-fluid {
  max-width: 100%;
}

/* Responsive container - adapts based on viewport */
.container-responsive {
  max-width: var(--container-sm);
}

@media (min-width: 768px) {
  .container-responsive {
    max-width: var(--container-md);
  }
}

@media (min-width: 1024px) {
  .container-responsive {
    max-width: var(--container-lg);
  }
}

@media (min-width: 1280px) {
  .container-responsive {
    max-width: var(--container-xl);
  }
}

/* ========================================
   LAYOUT PATTERNS
   Every Layout-inspired compositional patterns
   ======================================== */

/* Stack: Vertical rhythm with consistent spacing */
.stack {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.stack > * {
  margin-block: 0;
}

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

/* Stack spacing variants */
.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);
}

/* Box: Consistent padding with optional border */
.box {
  padding: var(--box-padding, var(--space-4));
  border: var(--box-border-width, 1px) solid
    var(--border-color, var(--border-1));
  border-radius: var(--box-radius, var(--radius-md));
  background: var(--box-bg, var(--bg-1));
}

.box-sm {
  --box-padding: var(--space-2);
}

.box-lg {
  --box-padding: var(--space-6);
}

/* Center: Horizontally center with max-width */
.center {
  box-sizing: content-box;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--center-max-width, var(--container-lg));
  padding-left: var(--center-gutter, var(--space-4));
  padding-right: var(--center-gutter, var(--space-4));
}

/* Cluster: Horizontal wrapping layout with consistent gaps */
.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cluster-space, var(--space-4));
  justify-content: var(--cluster-justify, flex-start);
  align-items: var(--cluster-align, center);
}

/* Sidebar: Fixed sidebar with flexible main content */
.sidebar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sidebar-gap, var(--space-6));
}

.sidebar > :first-child {
  flex-basis: var(--sidebar-width, 250px);
  flex-grow: 1;
}

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

/* Switcher: Responsive layout that switches between horizontal and stacked */
.switcher {
  display: flex;
  flex-wrap: wrap;
  gap: var(--switcher-gap, var(--space-4));
}

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

/* Cover: Full-height layout with centered content */
.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));
}

.cover > :first-child:not(.cover-centered) {
  margin-block-start: 0;
}

.cover > :last-child:not(.cover-centered) {
  margin-block-end: 0;
}

.cover > .cover-centered {
  margin-block: auto;
}

/* Grid: Auto-fit grid with minimum column width */
.grid-auto {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(var(--grid-min-width, 250px), 100%), 1fr)
  );
  gap: var(--grid-gap, var(--space-4));
}

/* Reel: Horizontal scrolling container */
.reel {
  display: flex;
  block-size: auto;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-color: var(--text-3) transparent;
  gap: var(--reel-gap, var(--space-4));
}

.reel::-webkit-scrollbar {
  block-size: var(--space-2);
}

.reel::-webkit-scrollbar-track {
  background-color: transparent;
}

.reel::-webkit-scrollbar-thumb {
  background-color: var(--text-3);
  border-radius: var(--radius-full);
}

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

/* Imposter: Absolutely positioned centered element */
.imposter {
  position: var(--imposter-position, absolute);
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
}

.imposter.imposter-fixed {
  --imposter-position: fixed;
}

/* Icon: Inline icon with text alignment */
.with-icon {
  display: inline-flex;
  align-items: baseline;
  gap: var(--icon-space, var(--space-2));
}

.with-icon > svg {
  block-size: var(--icon-size, 0.75em);
  inline-size: var(--icon-size, 0.75em);
}

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

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

/* ========================================
   RESPONSIVE UTILITIES
   ======================================== */

/* Show/hide based on breakpoint */
@media (max-width: 767px) {
  .hide-mobile {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .show-mobile {
    display: none !important;
  }

  .hide-tablet {
    display: none !important;
  }
}

@media (min-width: 1024px) {
  .show-tablet {
    display: none !important;
  }

  .hide-desktop {
    display: none !important;
  }
}

@media (min-width: 1280px) {
  .show-desktop {
    display: none !important;
  }
}