/* ==================== Layout Styles ====================
   Layout components: Container, Header, Footer, Navigation, Grids
   Extracted from component files for better organization */

:root {
  /* ============================================
     SPACING
     ============================================ */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.5rem;    /* 24px */
  --space-6: 2rem;      /* 32px */
  --space-8: 3rem;      /* 48px */
  --space-10: 3.75rem;  /* 60px */
  --space-12: 6.25rem;  /* 100px */
  --space-16: 8rem;     /* 128px */

  /* ============================================
     LAYOUT & SIZING
     ============================================ */
  --fluid-padding: clamp(10px, 4vw, 40px);
  --fluid-width: clamp(320px, 100%, 700px);
  --header-aspect-ratio: calc(700 / 368);
}

/* Responsive adjustments */
@media (max-width: 375px) {
  :root {
    --header-aspect-ratio: calc(375 / 327);
  }
}

/* ==================== Container ==================== */

.container {
  margin-inline: auto;
  padding-inline: var(--space-4, 1rem);
}

/* Max-width variants */
.max-w-narrow {
  max-width: 720px;
}

.max-w-default {
  max-width: 1200px;
}

.max-w-wide {
  max-width: 1440px;
}

.max-w-full {
  max-width: 100%;
}

/* Spacing variants */
.spacing-none {
  padding-block: 0;
}

.spacing-compact {
  padding-block: var(--space-4, 1rem);
}

.spacing-default {
  padding-block: var(--space-8, 2rem);
  padding-bottom: var(--space-12, 3rem);
}

.spacing-spacious {
  padding-block: var(--space-12, 3rem);
  padding-bottom: var(--space-16, 4rem);
}

/* ==================== Header ==================== */

header {
  background: var(--color-bg-header);
  border-bottom: 2px solid var(--color-border-accent);
  padding: 1rem 0;
}

header .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Retro Header (Category pages) */
.retro-header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  box-sizing: border-box;
  margin: 100px auto;
  padding: var(--fluid-padding);
  aspect-ratio: var(--header-aspect-ratio);
}

.retro-header .header__title {
  color: var(--color-text-primary);
  margin: 0;
}

.retro-header .header__subtitle {
  color: var(--color-text-secondary);
  margin: 0;
}

/* ==================== Footer ==================== */

footer {
  background: var(--color-bg-header);
  border-top: 2px solid var(--color-border-accent);
  padding: 2rem 0;
  text-align: center;
}

footer .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

footer p {
  margin: 0;
  color: var(--color-text-secondary);
}

/* ==================== Content Grids ==================== */

.content-grid {
  display: grid;
  gap: var(--space-6, 2rem);
}

.article-grid {
  display: grid;
  gap: var(--space-4, 1.5rem);
  max-width: 720px;
  margin: 0 auto;
}

/* ==================== Responsive Adjustments ==================== */

@media (max-width: 768px) {
  .container {
    padding-inline: var(--space-3, 0.75rem);
  }
  
  .spacing-default {
    padding-block: var(--space-6, 1.5rem);
    padding-bottom: var(--space-8, 2rem);
  }
  
  .spacing-spacious {
    padding-block: var(--space-8, 2rem);
    padding-bottom: var(--space-12, 3rem);
  }
  
  .retro-header {
    margin: 50px auto;
    padding: var(--space-4, 1rem);
  }
  
  .article-grid {
    padding-inline: 1rem;
  }
}