/**
 * Responsive Design System
 * Mobile-first breakpoints: 320px, 768px, 1024px, 1440px
 * Author: Luke Steuber
 */

/* Mobile First - Base styles are for mobile */

/* Small mobile (320px - 767px) - Base styles */
/* Most styles are already mobile-first in other CSS files */

/* Tablet (768px and up) */
@media (min-width: 768px) {
  /* Typography adjustments */
  h1 {
    font-size: 3rem; /* 48px */
  }

  h2 {
    font-size: 2.5rem; /* 40px */
  }

  /* Container adjustments */
  .container,
  .container-narrow {
    padding-left: var(--spacing-4, 32px);
    padding-right: var(--spacing-4, 32px);
  }

  /* Grid adjustments */
  .grid-tablet-2 {
    grid-template-columns: repeat(2, 1fr);
  }

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

  /* Navigation */
  .swiss-nav {
    gap: var(--spacing-6, 48px);
  }

  .swiss-nav-links {
    gap: var(--spacing-4, 32px);
  }

  /* Service cards */
  .service-card {
    padding: var(--spacing-4, 32px);
  }

  /* Search */
  .search-input {
    font-size: 1.25rem;
  }

  /* Code blocks */
  .code-block-content {
    padding: var(--spacing-3, 24px);
  }

  /* Sections */
  .section {
    padding: var(--spacing-10, 80px) 0;
  }
}

/* Desktop (1024px and up) */
@media (min-width: 1024px) {
  /* Typography adjustments */
  h1 {
    font-size: 3.5rem; /* 56px */
  }

  h2 {
    font-size: 2.75rem; /* 44px */
  }

  /* Grid becomes active at desktop */
  .grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }

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

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

  /* Layout improvements */
  .two-column-layout {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: var(--spacing-6, 48px);
  }

  .three-column-layout {
    display: grid;
    grid-template-columns: 200px 1fr 200px;
    gap: var(--spacing-4, 32px);
  }

  /* Sticky sidebar */
  .sidebar-sticky {
    position: sticky;
    top: var(--spacing-3, 24px);
    max-height: calc(100vh - var(--spacing-6, 48px));
    overflow-y: auto;
  }

  /* Category cards larger */
  .category-card {
    padding: var(--spacing-6, 48px);
  }

  .category-card-icon {
    font-size: 4rem;
  }

  /* Sections more spacious */
  .section {
    padding: var(--spacing-12, 96px) 0;
  }
}

/* Large desktop (1440px and up) */
@media (min-width: 1440px) {
  /* Typography final scale */
  h1 {
    font-size: 4rem; /* 64px */
  }

  /* Container can breathe more */
  .container,
  .container-narrow {
    padding-left: var(--spacing-6, 48px);
    padding-right: var(--spacing-6, 48px);
  }

  /* Grid can support more columns */
  .grid-5 {
    grid-template-columns: repeat(5, 1fr);
  }

  /* Even more section space */
  .section {
    padding: 120px 0;
  }
}

/* Mobile-specific overrides (767px and down) */
@media (max-width: 767px) {
  /* Force single column on mobile */
  .grid,
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  /* Stack navigation */
  .swiss-nav {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-2, 16px);
  }

  .swiss-nav-links {
    flex-direction: column;
    gap: var(--spacing-1, 8px);
    width: 100%;
  }

  /* Smaller typography */
  h1 {
    font-size: 2rem; /* 32px */
  }

  h2 {
    font-size: 1.75rem; /* 28px */
  }

  h3 {
    font-size: 1.25rem; /* 20px */
  }

  /* Reduce padding on cards */
  .service-card,
  .category-card,
  .card {
    padding: var(--spacing-2, 16px);
  }

  /* Smaller buttons */
  .btn {
    width: 100%;
    text-align: center;
  }

  /* Adjust endpoint display */
  .endpoint-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-1, 8px);
  }

  /* Search takes full width */
  .search-container {
    margin-left: 0;
    margin-right: 0;
  }

  /* Code blocks scroll horizontally */
  .code-block-content {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Tables scroll */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Reduce section padding */
  .section {
    padding: var(--spacing-4, 32px) 0;
  }

  /* Hide some metadata on mobile */
  .service-card-meta {
    flex-direction: column;
    gap: var(--spacing-1, 8px);
  }
}

/* Print styles */
@media print {
  /* Reset to black and white */
  * {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  /* Show links */
  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
  }

  /* Page breaks */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    page-break-after: avoid;
  }

  pre,
  blockquote {
    page-break-inside: avoid;
  }

  /* Hide non-essential elements */
  nav,
  .swiss-nav,
  .search-container,
  .btn {
    display: none;
  }

  /* Expand content */
  .container {
    max-width: 100%;
  }
}

/* Reduced motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .service-card,
  .category-card,
  .card,
  .endpoint {
    border-width: 2px;
  }

  .btn {
    border-width: 3px;
  }
}

/* Dark mode support (optional - Swiss design is primarily light) */
@media (prefers-color-scheme: dark) {
  /* Only if you want to support dark mode */
  /* Swiss design is typically light, so this is optional */

  /* Example dark mode overrides:
  :root {
    --color-black: #ffffff;
    --color-white: #000000;
    --color-gray-100: #1a1a1a;
    --color-gray-200: #333333;
  }
  */
}

/* Landscape mobile adjustments */
@media (max-width: 767px) and (orientation: landscape) {
  /* Reduce vertical spacing in landscape */
  .section {
    padding: var(--spacing-3, 24px) 0;
  }

  h1 {
    font-size: 1.75rem;
    margin-bottom: var(--spacing-2, 16px);
  }

  h2 {
    font-size: 1.5rem;
    margin-bottom: var(--spacing-2, 16px);
  }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
  /* Increase tap targets */
  a,
  button,
  .btn,
  .service-card,
  .category-card {
    min-height: 44px;
    min-width: 44px;
  }

  /* Larger touch areas */
  .swiss-nav-links a {
    padding: var(--spacing-1, 8px) var(--spacing-2, 16px);
  }

  /* Disable hover effects on touch */
  .service-card:hover,
  .category-card:hover {
    transform: none;
    box-shadow: none;
  }
}