/**
 * EVENTRIPPLE DESIGN SYSTEM V2
 * Layout Primitives - Container & Grid Systems
 * File: 04-layout.css
 */

/* ============================================================================
   CONTAINER SYSTEM
   ============================================================================ */

.container {
  inline-size: 100%;
  max-inline-size: var(--size-container-xl, 75rem);
  margin-inline: auto;
  padding-inline: var(--space-lg);
  overflow-x: hidden;
  box-sizing: border-box;
}

/* Mobile: Reduce container side padding (dashboard-main already provides padding) */
@media (max-width: 768px) {
  .container {
    padding-inline: var(--space-sm);
  }
}

/* Very small screens: minimal padding */
@media (max-width: 480px) {
  .container {
    padding-inline: var(--space-xs);
  }
}

.container--sm {
  max-inline-size: var(--size-container-sm, 30rem);
}

.container--md {
  max-inline-size: var(--size-container-md, 48rem);
}

.container--lg {
  max-inline-size: var(--size-container-lg, 64rem);
}

.container--2xl {
  max-inline-size: var(--size-container-2xl, 87.5rem);
}

.container--full {
  max-inline-size: 100%;
}

.container--wide {
  max-inline-size: 1400px;
}

/* ============================================================================
   GRID SYSTEM
   Auto-responsive grids using modern CSS
   ============================================================================ */

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

/* Sidebar layout - main content + sidebar */
.grid--sidebar {
  grid-template-columns: 1fr 400px;
  align-items: start;
}

.grid-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.grid-sidebar {
  position: sticky;
  inset-block-start: var(--space-xl);
}

@media (max-width: 1024px) {
  .grid--sidebar {
    grid-template-columns: 1fr;
  }
  
  .grid-sidebar {
    position: static;
  }
}

.grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
}

.grid--3 {
  /* Responsive grid with minimum card width of 300px */
  /* Automatically adjusts columns based on available space */
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  /* Limit grid width to max 3 cards + gaps, center when fewer cards */
  max-width: min(100%, calc(300px * 3 + var(--space-lg) * 4));
  margin-inline: auto;
}

/* Override for very small screens to prevent horizontal overflow */
@media (max-width: 320px) {
  .grid--3 {
    grid-template-columns: 1fr;
  }
}

/* Ensure event cards stretch to fill grid cells */
.grid > .event-card {
  justify-self: stretch;
}

.grid--4 {
  grid-template-columns: 1fr; /* Mobile: 1 column */
}

@media (min-width: 480px) {
  .grid--4 {
    grid-template-columns: repeat(2, 1fr); /* Small tablet: 2 columns */
  }
}

@media (min-width: 768px) {
  .grid--4 {
    grid-template-columns: repeat(3, 1fr); /* Tablet: 3 columns */
  }
}

@media (min-width: 1024px) {
  .grid--4 {
    grid-template-columns: repeat(4, 1fr); /* Desktop: 4 columns */
  }
}

/* Ensure grid items stretch to fill cells */
.grid--4 > * {
  height: 100%;
}

.grid--gap-sm {
  gap: var(--space-sm);
}

.grid--gap-md {
  gap: var(--space-md);
}

.grid--gap-xl {
  gap: var(--space-xl);
}

/* ============================================================================
   FLEX UTILITIES
   ============================================================================ */

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: 100%;
}

.stack--sm {
  gap: var(--space-sm);
}

.stack--md {
  gap: var(--space-md);
}

.stack--lg {
  gap: var(--space-lg);
}

.stack--xl {
  gap: var(--space-xl);
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  align-items: center;
}

.cluster--sm {
  gap: var(--space-sm);
}

.cluster--lg {
  gap: var(--space-lg);
}

.cluster--start {
  align-items: flex-start;
}

.cluster--end {
  align-items: flex-end;
}

.cluster--between {
  justify-content: space-between;
}

/* ============================================================================
   SECTION SPACING
   ============================================================================ */

.section {
  padding-block: var(--space-4xl);
}

.section--sm {
  padding-block: var(--space-2xl);
}

.section--lg {
  padding-block: var(--space-6xl, 6rem);
}