Responsive Design

/* ✅ Mobile-first (recommended) */
.card {
  display: block;         /* single column on mobile */
  padding: 1rem;
}

@media (min-width: 768px) {
  .card { display: flex; } /* side-by-side on tablet+ */
}

/* ❌ Desktop-first (avoid) */
.card {
  display: flex;          /* starts with flex */
}
@media (max-width: 767px) {
  .card { display: block; } /* hack it back for mobile */
}

/* Base styles — mobile (no query needed) */
.container { padding: 1rem; }

/* Small tablet — 480px and up */
@media (min-width: 480px) {
  .container { padding: 1.5rem; }
}

/* Tablet — 768px and up */
@media (min-width: 768px) {
  .container { padding: 2rem; }
  .grid { grid-template-columns: repeat(2, 1fr); }
}

/* Desktop — 1024px and up */
@media (min-width: 1024px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}

/* Wide desktop — 1280px and up */
@media (min-width: 1280px) {
  .container { max-width: 1200px; margin: 0 auto; }
}

/* Orientation */
@media (orientation: landscape) { ... }
@media (orientation: portrait)  { ... }

/* Combining with AND */
@media (min-width: 768px) and (max-width: 1023px) {
  /* tablet ONLY */
}

/* Hover capability (touch vs mouse) */
@media (hover: hover) {
  .btn:hover { background: blue; } /* only on pointer devices */
}

/* Dark mode preference */
@media (prefers-color-scheme: dark) {
  body { background: #000; }
}

/* Reduced motion (accessibility!) */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
}

/* clamp(minimum, preferred, maximum) */
h1 {
  font-size: clamp(1.8rem, 5vw, 4rem);
  /* never smaller than 1.8rem          */
  /* grows with 5% of viewport width    */
  /* never larger than 4rem             */
}

h2 { font-size: clamp(1.4rem, 3.5vw, 2.5rem); }
p  { font-size: clamp(0.9rem, 2vw, 1.1rem);  }

/* Works for padding and gaps too! */
.section { padding: clamp(2rem, 8vw, 6rem); }
.grid    { gap:     clamp(1rem, 3vw, 2rem);  }

/* The golden rule — always add this */
img {
  max-width: 100%;   /* never overflow container */
  height: auto;     /* maintain aspect ratio   */
  display: block;   /* remove inline gap       */
}

/* Responsive hero image with object-fit */
.hero-img {
  width: 100%;
  height: clamp(200px, 40vw, 500px);
  object-fit: cover;    /* fill container, crop if needed */
  object-position: center top; /* keep the focus point */
}

/* srcset for serving different sizes */

<!-- Browser picks the right size automatically -->
<img
  src="hero-800.jpg"
  srcset="hero-400.jpg 400w,
          hero-800.jpg 800w,
          hero-1200.jpg 1200w"
  sizes="(max-width: 768px) 100vw,
         (max-width: 1024px) 50vw,
         800px"
  alt="Hero image"
  loading="lazy"
>

/* Viewport units */
.hero  { height: 100vh; }    /* 100% of viewport height */
.wide  { width: 80vw; }     /* 80% of viewport width  */
.icon  { font-size: 5vmin; } /* 5% of smaller dimension */

/* Modern: dvh fixes the mobile browser bar bug */
.hero  { height: 100dvh; }  /* dynamic viewport height */

/* Centering a container with max-width */
.container {
  width: min(90%, 1200px); /* 90vw but never over 1200px */
  margin: 0 auto;
}