Media Queries

/*   @media  [type]  and  (feature)  { rules } */

@media screen and (min-width: 768px) {
  .container {
    max-width: 1200px;
  }
}
/*  └──┬──┘  └──┬──┘       └──────────────┘
       │         │               │
   at-rule   media type    media feature    */

/* ── Viewport dimensions ── */
@media (min-width: 768px) { }   /* viewport ≥ 768px */
@media (max-width: 767px) { }   /* viewport < 768px */
@media (min-height: 500px) { }  /* tall viewports */

/* ── Device orientation ── */
@media (orientation: portrait)  { } /* taller than wide */
@media (orientation: landscape) { } /* wider than tall */

/* ── User preferences ── */
@media (prefers-color-scheme: dark)         { } /* user's OS is dark mode */
@media (prefers-reduced-motion: reduce)     { } /* user wants less animation */
@media (hover: hover)                       { } /* device has a real hover (mouse) */

/* ── Modern range syntax (cleaner) ── */
@media (width >= 768px) { }                  /* same as min-width: 768px */
@media (600px <= width <= 1024px) { }        /* range: tablet only */

/* ── Logical operators ── */
@media screen and (min-width: 768px) { }     /* AND — both must be true */
@media (max-width: 600px), (orientation: portrait) { } /* OR — comma = "or" */
@media not (prefers-color-scheme: dark) { }  /* NOT */

/* ── Base: mobile styles — NO query needed ── */
.cards {
  display: grid;
  grid-template-columns: 1fr;         /* single column */
  gap: 1rem;
}

.nav-links { display: none; }           /* hidden on mobile */
.hamburger { display: flex; }           /* shown on mobile */

/* ── Tablet: add complexity with min-width ── */
@media (min-width: 600px) {
  .cards     { grid-template-columns: 1fr 1fr; }
  .nav-links { display: flex; }
  .hamburger { display: none; }
}

/* ── Desktop: more complexity ── */
@media (min-width: 1024px) {
  .cards     { grid-template-columns: repeat(3, 1fr); }
  .container { max-width: 1200px; margin: 0 auto; }
}

/* ── Base: desktop styles ── */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.nav-links { display: flex; }
.hamburger { display: none; }

/* ── Tablet: undo desktop rules ── */
@media (max-width: 1023px) {
  .cards { grid-template-columns: 1fr 1fr; }
}

/* ── Mobile: undo even more ── */
@media (max-width: 599px) {
  .cards     { grid-template-columns: 1fr; }    /* overriding again */
  .nav-links { display: none; }                 /* overriding again */
  .hamburger { display: flex; }                 /* overriding again */
}
/* Mobile had to download the desktop rules only to throw them away */

/*  clamp(minimum, preferred, maximum)  */

.hero-title {
  /* Never smaller than 1.5rem (24px), never larger than 4rem (64px).
     Between those: scales with viewport at 5vw per 100px of width. */
  font-size: clamp(1.5rem, 5vw, 4rem);
}

.body-text {
  font-size: clamp(0.875rem, 2vw, 1.125rem); /* 14px → fluid → 18px */
}

.card-title {
  font-size: clamp(1rem, 3vw, 1.75rem);       /* 16px → fluid → 28px */
}

/* You can also mix in calc() for finer control */
.section-heading {
  font-size: clamp(1.5rem, 1rem + 3vw, 3rem);
  /* The "1rem + 3vw" ensures the font never drops below 1rem
     even at tiny viewports, because 1rem is always added */
}

/* clamp() works for spacing too, not just fonts */
.section {
  padding: clamp(2rem, 8vw, 6rem);           /* fluid vertical padding */
  max-width: clamp(300px, 90vw, 1200px);      /* responsive container width */
}

/* ── Rule #1: images never wider than their container ── */
img {
  max-width: 100%;    /* never overflow */
  height: auto;       /* keep aspect ratio */
  display: block;     /* remove inline-block gap under image */
}

/* ── aspect-ratio: lock proportions without hardcoding height ── */
.card-image {
  width: 100%;
  aspect-ratio: 16 / 9;  /* always 16:9, no matter the container width */
  object-fit: cover;      /* fill the box, crop edges */
}

.avatar {
  width: 3rem;
  aspect-ratio: 1;       /* perfect square (shorthand for 1/1) */
  border-radius: 50%;
  object-fit: cover;
}

/* ── object-fit controls image cropping ── */
.img-cover   { object-fit: cover; }    /* fill box, crop — most common */
.img-contain { object-fit: contain; }  /* fit inside box, show all */
.img-fill    { object-fit: fill; }     /* stretch to fill — distorts! */

/* ── Classic viewport units ── */
1vw  /* 1% of viewport width  */
1vh  /* 1% of viewport height */
1vmin /* 1% of the smaller of vw or vh */
1vmax /* 1% of the larger  of vw or vh */

.hero   { min-height: 100vh; }     /* full-screen hero */
.sidebar{ width: 25vw; }          /* quarter of viewport width */

/* ── Problem with 100vh on mobile ──
   On mobile browsers, the address bar eats into 100vh.
   The page is actually shorter than 100vh.          */

/* ── Modern fix: dynamic viewport units ── */
.hero { min-height: 100dvh; }  /* dvh = dynamic viewport height — adjusts for the address bar */
.hero { min-height: 100svh; }  /* svh = small viewport height — uses the smallest possible value */
.hero { min-height: 100lvh; }  /* lvh = large viewport height — ignores the address bar */

/* ── srcset for resolution switching ── */
/* In HTML, not CSS — loads the right-sized image per device */

<!-- srcset: browser picks the right size for the screen -->
<img
  src="hero-800.jpg"
  srcset="hero-400.jpg 400w,
          hero-800.jpg 800w,
          hero-1200.jpg 1200w"
  sizes="(min-width: 768px) 50vw, 100vw"
  alt="Hero image"
>

<!-- picture: art direction — different crops for different sizes -->
<picture>
  <source media="(min-width: 768px)" srcset="hero-wide.jpg">
  <source media="(min-width: 480px)" srcset="hero-square.jpg">
  <img src="hero-portrait.jpg" alt="Hero">  <!-- fallback -->
</picture>

<header class="site-header">
  <a href="/" class="brand">Portfolio</a>
  <button class="hamburger" aria-label="Open menu">☰</button>
  <nav class="main-nav">
    <a href="#work">Work</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </nav>
</header>

<section class="hero">
  <h1>Creative <span>Portfolio</span></h1>
  <p>Design & development for the modern web.</p>
</section>

<main class="cards" id="work">
  <article class="card">
    <img src="project1.jpg" alt="Project One">
    <h2>Project One</h2>
    <p>E-commerce redesign, 2024.</p>
  </article>
  <!-- more cards... -->
</main>

.site-header {
  display: flex;
  align-items: center;
  padding: 1rem;
  background: #111;
  gap: 1rem;
}

.main-nav  { display: none; }    /* hidden on mobile */
.hamburger { display: block; }  /* shown on mobile */

.hero {
  padding: 2rem 1rem;
  text-align: center;
}

.hero h1 {
  font-size: clamp(2rem, 8vw, 4rem);  /* fluid title */
}

.cards {
  display: grid;
  grid-template-columns: 1fr;       /* single column */
  gap: 1.5rem;
  padding: 1rem;
}

.card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 8px;
}

@media (min-width: 600px) {
  .main-nav  { display: flex; gap: 1.5rem; margin-left: auto; }
  .hamburger { display: none; }

  .cards {
    grid-template-columns: 1fr 1fr;   /* 2 columns */
    padding: 1.5rem;
  }

  .hero { padding: 3rem 1.5rem; }
}

@media (min-width: 1024px) {
  .site-header,
  .hero,
  .cards {
    max-width: 1200px;    /* stop growing beyond 1200px */
    margin-inline: auto; /* center on wide screens */
  }

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

  .hero {
    padding: 5rem 2rem;
    text-align: left;      /* left-aligned on large screens */
  }
}

/* Animations for users who are OK with them */
.card { transition: transform 0.3s, box-shadow 0.3s; }
.card:hover { transform: translateY(-4px); }

/* Kill animations for users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
  .card:hover { transform: none; }

  /* Also reset any CSS animations globally */
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Step 1: Tell the parent it's a container */
.card-wrapper {
  container-type: inline-size;  /* watch the inline (horizontal) size */
  container-name: card;          /* optional name for specificity */
}

/* Step 2: Style the child based on the CONTAINER width — not viewport */
.card {
  display: flex;
  flex-direction: column;   /* stacked by default (narrow container) */
}

@container card (min-width: 480px) {
  /* Only fires when the .card-wrapper is at least 480px wide */
  .card       { flex-direction: row; }        /* side-by-side */
  .card-image { width: 200px; flex-shrink: 0; }
}

/* The same component now adapts perfectly in sidebar AND main content */