/* Responsive styles */
@media (max-width: 576px) {
  /* Extra small devices */
  :root {
    --font-size-base: 0.875rem; /* 14px */
  }
  
  .site-header .container {
    flex-direction: column;
    gap: var(--space-4);
  }
  
  .site-title {
    font-size: var(--font-size-lg);
  }
  
  .section-title {
    font-size: var(--font-size-lg);
    padding: var(--space-3) var(--space-4);
  }
  
  .section-content {
    padding: var(--space-4);
  }
  
  .content-grid {
    gap: var(--space-4);
  }
  
  .main-content, .side-content {
    gap: var(--space-4);
  }
}

@media (min-width: 577px) and (max-width: 767px) {
  /* Small devices */
  .site-header .container {
    flex-direction: column;
    gap: var(--space-3);
  }
  
  .content-grid {
    gap: var(--space-6);
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  /* Medium devices */
  .site-header .container {
    flex-direction: row;
  }
}

@media (min-width: 992px) {
  /* Large devices */
  /* Two column layout already defined in layout.css */
}

@media (min-width: 1200px) {
  /* Extra large devices */
  .container {
    padding: 0 var(--space-8);
  }
}

/* Print styles */
@media print {
  .site-header, .site-footer {
    display: none;
  }
  
  .content-section {
    box-shadow: none;
    border: 1px solid var(--color-border);
    break-inside: avoid;
  }
  
  .content-grid {
    display: block;
  }
  
  .side-content, .main-content {
    width: 100%;
  }
}