/**
 * Layout - Modular grid system
 * Flexible containers that adapt to any number of items
 */

body {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--theme-text);
  background: var(--theme-background);
}

/* Site header */
.site-header {
  height: var(--header-height);
  background: var(--theme-surface);
  border-bottom: 1px solid var(--theme-border);
  display: flex;
  align-items: center;
  padding: 0 var(--space-xl);
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  transition: filter var(--duration-normal) var(--ease-out);
}

/* Blur header when drawer is open */
body:has(.drawer-overlay:not([aria-hidden="true"])) .site-header {
  filter: blur(4px);
}

.site-header__title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  margin-right: auto;
}

.site-header__status {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-base);
  color: var(--ink-1);
}

/* Main content area */
.site-main {
  margin: 0 auto;
  padding: var(--space-xl);
  max-width: 85vw; /* Default breathing room */
}

/* Breathing space constraints by viewport */
@media (min-width: 769px) {
  .site-main {
    max-width: 85vw; /* Consistent breathing room on tablets and up */
  }
}

@media (min-width: 1601px) {
  .site-main {
    max-width: 1600px; /* Fixed max width on large screens */
  }
}

@media (min-width: 2401px) {
  .site-main {
    max-width: 2000px; /* Fixed max width on ultra-wide */
  }
}

/* Modular grid - auto-flows, adapts to content */
.grid {
  display: grid;
  gap: var(--gap-cards);
}

/* Auto-fit: creates as many columns as fit, minimum 300px each */
.grid--auto {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* Explicit column counts for specific layouts */
.grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

/* Full-width items (charts, tables) */
.grid__item--full {
  grid-column: 1 / -1;
}

/* Half-width items */
.grid__item--half {
  grid-column: span 2;
}

/* ================================================================
   Responsive Breakpoints
   ================================================================ */

/* Mobile Portrait: ≤480px */
@media (max-width: 480px) {
  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: 1fr;
  }

  .grid__item--half {
    grid-column: span 1;
  }

  .site-header {
    padding: var(--space-sm) var(--space-md);
    gap: var(--space-sm);
  }

  .site-header__title {
    font-size: var(--font-size-lg);
  }

  .site-header__status {
    font-size: var(--font-size-sm);
  }

  .site-main {
    padding: var(--space-md);
  }
}

/* Mobile Landscape: 481-768px */
@media (min-width: 481px) and (max-width: 768px) {
  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: 1fr;
  }

  .grid__item--half {
    grid-column: span 1;
  }

  .site-header {
    padding: var(--space-md);
  }

  .site-header__title {
    font-size: var(--font-size-xl);
  }

  .site-header__status {
    font-size: var(--font-size-sm);
  }

  .site-main {
    padding: var(--space-md) var(--space-lg);
  }
}

/* Tablet Portrait: 769-1024px */
@media (min-width: 769px) and (max-width: 1024px) {
  .grid--3,
  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .site-header {
    padding: 0 var(--space-lg);
  }
}

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

/* Laptop and above: Grid columns at full spec */
/* No additional constraints needed - default layout applies */

/* ================================================================
   Countdown yellow (desktop + mobile)
   ================================================================ */

.countdown__value {
  color: hsl(45, 100%, 51%);
}

/* Mobile: add pulse animation */
@media (max-width: 899px) {
  .countdown__value {
    animation: countdownPulse 6s ease-in-out infinite;
  }
}

@keyframes countdownPulse {
  0%, 100% {
    text-shadow: 0 0 4px hsla(45, 100%, 51%, 0.4);
  }
  50% {
    text-shadow: 0 0 12px hsla(45, 100%, 51%, 0.8);
  }
}