Responsive Design

/* Mobile-first approach: start with mobile styles, add complexity for larger screens */

/* Base styles (mobile) */
body {
  font-size: 16px;
  padding: 16px;
}

.nav { display: none; }        /* hide nav on mobile */
.nav-mobile { display: block; } /* show mobile menu */

.grid {
  display: grid;
  grid-template-columns: 1fr;  /* single column on mobile */
  gap: 16px;
}

/* Tablet and up (768px+) */
@media (min-width: 768px) {
  body { padding: 24px; }

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

/* Desktop (1024px+) */
@media (min-width: 1024px) {
  body { padding: 40px; }

  .nav { display: flex; }         /* show full nav */
  .nav-mobile { display: none; }  /* hide mobile menu */

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

/* Large desktop (1440px+) */
@media (min-width: 1440px) {
  .container {
    max-width: 1200px;
    margin: 0 auto;
  }
}

/* Dark mode — respect user preference */
@media (prefers-color-scheme: dark) {
  body {
    background: #1a1a1a;
    color: #e0e0e0;
  }
}

/* Print styles */
@media print {
  .no-print { display: none; }
  body { color: black; background: white; }
}

/* Responsive typography */
html {
  font-size: 16px;  /* base */
}

h1 {
  font-size: clamp(1.5rem, 5vw, 3rem);  /* min, preferred, max */
}

/* Fluid spacing */
.section {
  padding: clamp(20px, 5vw, 60px);
}

/* Fluid images */
img {
  max-width: 100%;   /* never overflow container */
  height: auto;      /* maintain aspect ratio
}

/* Fluid container */
.container {
  width: min(90%, 1200px);  /* min of 90vw or 1200px */
  margin: 0 auto;
}

/* Responsive video embed */
.video-wrapper {
  position: relative;
  padding-bottom: 56.25%;  /* 16:9 aspect ratio */
  height: 0;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}