/* ==========================================================================
   responsive.css
   ==========================================================================
   Breakpoint overrides only. layout.css is the mobile-first baseline;
   every rule in this file is an override that fires on top of it via
   min-width media queries — nothing here is meaningful on its own.

   Exactly three breakpoints, standard mobile-first (min-width) cascade:
     Tablet  — 768px
     Laptop  — 1024px
     Desktop — 1280px

   NOTE ON BREAKPOINT VALUES: the Implementation Standards document (locked
   earlier in this project) documented a five-tier breakpoint system at
   600/900/1200/1440px. This file uses the three explicit breakpoints given
   for this task instead (768/1024/1280px), since that's what was specified
   here directly. Flagging the discrepancy rather than silently picking one
   — worth reconciling the two documents at some point, but this file
   follows the instructions given for it.

   Only --text-display, --text-h1, and --text-h2 change responsively, and
   only as :root custom-property overrides — no selector in this file sets
   font-size directly. Every other value (spacing, columns, flex) reuses
   existing base.css tokens; nothing here is a new invented value.
   ========================================================================== */


/* ==========================================================================
   1. Tablet (768px)
   ========================================================================== */

@media (min-width: 768px) {

  :root {
    --text-display: 3.5rem;
    --text-h1: 2.25rem;
    --text-h2: 1.75rem;
  }

  /* Hero switches from stacked to a two-column layout — content and photo
     side by side, vertically centered against each other. */
  .hero {
    flex-direction: row;
    align-items: center;
  }

  /* Proportions, not spacing — flex-basis percentages split the row
     unevenly on purpose ("Hero image becomes smaller") without touching
     .hero__photo's own width:100% rule in layout.css at all; the photo
     simply becomes 100% of a smaller parent. */
  .hero__content {
    flex: 1 1 60%;
  }

  .hero__media {
    flex: 1 1 40%;
  }

  /* Desktop nav takes over from the mobile toggle+dropdown pattern. */
  .nav--desktop {
    display: flex;
  }

  .mobile-menu-toggle {
    display: none;
  }

  /* Generic section rhythm steps up from the mobile baseline. */
  main > section {
    padding-block: var(--space-64);
  }

  .project-grid,
  .skills-grid,
  .certificate-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* No .contact-links override here: layout.css's inherited flex-wrap is
     already the more resilient choice. Forcing nowrap at this width risks
     horizontal overflow if any label runs long (the placeholder email
     text in particular), and three buttons wrapping gracefully to a
     second line costs nothing — there's no real design requirement being
     served by preventing that. */}


/* ==========================================================================
   2. Laptop (1024px)
   ========================================================================== */

@media (min-width: 1024px) {

  /* Hero and Contact both pull ahead of the generic section rhythm — per
     the Design Foundation, these two carry more visual weight than a
     standard section (Hero as the opening statement, Contact as the
     closing call-to-action). */
  #hero,
  #contact {
    padding-block: var(--space-96);
  }

  /* Column count is inherited from Tablet and intentionally not repeated
     here — only the gap changes ("remains 2 columns with larger gaps"). */
  .project-grid {
    gap: var(--space-48);
  }

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

  .site-footer__inner {
    flex-direction: row;
    justify-content: space-between;
  }

  .site-header__inner {
    padding-block: var(--space-24);
  }

  /* Reuses the existing prose-width token (already used for the About
     paragraph) rather than inventing a new cap — keeps the Resume Card
     from stretching edge-to-edge on a wider viewport. */
  .resume-card {
    max-width: var(--prose-max-width);
    margin-inline: auto;
  }

}


/* ==========================================================================
   3. Desktop (1280px)
   ========================================================================== */

@media (min-width: 1280px) {

  :root {
    --text-display: 4rem;
    --text-h1: 2.75rem;
    --text-h2: 2rem;
  }

  /* Hero and Contact's final step, per the Design Foundation's 128px
     Hero/Contact spacing note. */
  #hero,
  #contact {
    padding-block: var(--space-128);
  }

  /* Generic section rhythm's final step — every section (Hero and Contact
     excepted, via their own more specific rule above) now sits at its
     largest comfortable spacing. */
  main > section {
    padding-block: var(--space-96);
  }

  .site-footer__inner {
    padding-block: var(--space-64);
  }

  /* No rule needed for "maximum content width fully utilized" or "project
     cards maintain clean proportions" — both are already satisfied by
     layout.css's existing --container-max-width cap and the grid/gap
     values already set at Tablet/Laptop above. Adding anything here would
     be a no-op override with nothing to change. */

}