/* ============================================================
   BREAKPOINTS.CSS
   Rem base + responsive token overrides + layout changes.

   Breakpoints:
     Mobile   < 768px
     Tablet   768–1199px
     Desktop  1200px+    (defaults in styles.css)
   ============================================================ */


/* ============================================================
   REM BASE  —  1rem = 10px
   ============================================================ */

html {
  font-size:           62.5%;
  scroll-snap-type:    y mandatory;
  scroll-padding-top:  7rem;   /* nav height — keeps section titles below the sticky bar */
}

body { font-size: 1.6rem; }


/* ============================================================
   WORK MODAL NAV — hidden below desktop
   Side arrows are a hover affordance; tablet/mobile keep the
   plain tap-to-open/tap-to-close modal (no swipe nav, for now).
   ============================================================ */

@media (max-width: 1199px) {
  .modal__nav { display: none; }
}


/* ============================================================
   TABLET  768px – 1199px
   ============================================================ */

@media (min-width: 768px) and (max-width: 1199px) {

  :root {
    --fs-hero:               12.0rem;
    --fs-xl:                 4.0rem;
    --fs-md:                 2.8rem;

    --space-page-pad:        3.2rem;
    --space-section-top:     8.0rem;
    --space-hero-top:        6.0rem;
    --space-hero-bottom:     8.0rem;
    --space-service-gap:     3.2rem;
  }

  /* Show toggle, hide inline links */
  .nav__links  { display: none; }
  .nav__toggle { display: block; }

  /* Clients 4-col → 2×2, ruled rows */
  .clients__grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap:            var(--space-md);
    row-gap:               0;
  }

  .clients__col {
    border-bottom:  1px solid var(--color-border);
    /* padding-top: var(--space-sm); */
  }

  /* Work: same wide gap as desktop, to clearly separate each project */
  .work__grid { gap: 12rem; }
}


/* ============================================================
   MOBILE  < 768px
   ============================================================ */

@media (max-width: 767px) {

  /* Snap fights sections taller than one screen (Services, About,
     Work) — dropped entirely on mobile in favor of normal free
     scrolling. */
  html { scroll-snap-type: none; }

  :root {
    --fs-hero:               8.0rem;
    --fs-xl:                 3.2rem;
    --fs-md:                 2.4rem;
    --fs-body:               1.6rem;

    --space-page-pad:        2.0rem;
    --space-section-top:     6.0rem;
    --space-hero-top:        4.8rem;
    --space-hero-bottom:     4.8rem;
    --space-contact-bottom:  4.0rem;
    --space-service-gap:     1.6rem;
    --space-service-row:     2.4rem;
  }

  /* Show toggle, hide inline links */
  .nav__links  { display: none; }
  .nav__toggle { display: block; }

  /* Hero */
  .hero__heading { line-height: 0.8; }

  /* About — lift max-width cap, collapse columns */
  .about__body { max-width: none; }
  .about__cols { grid-template-columns: 1fr; }

  /* Modal content blocks — same collapse as .about__cols */
  .modal-block--columns { grid-template-columns: 1fr; }

  /* Work: 2-col → 1-col */
  .work__grid { grid-template-columns: 1fr; }

  /* Services: bar collapses to 2-col on mobile */
  .services__bar {
    grid-template-columns: auto 1fr auto;
    gap:                   var(--space-xs) var(--space-sm);
    flex-wrap:             wrap;
  }

  .services__name {
    grid-column: 2;
    grid-row:    1;
  }

  .services__desc {
    grid-column: 1 / -1;
    grid-row:    2;
  }

  .services__arrow {
    grid-column: 3;
    grid-row:    1;
    align-self:  center;
  }

  /* Expand text spans full width on mobile */
  .services__expand-inner {
    grid-template-columns: 1fr;
  }

  /* Stale selector fixed: content_blocks now renders into a
     .services__expand-blocks wrapper <div> (see the lazy-load-on-
     expand change), not directly as <p> elements — this rule was
     still targeting the old p selector, which no longer matches
     anything, leaving the wrapper stuck with the desktop
     grid-column: 2/4 placement even on mobile. In a 1-column grid,
     starting at line 2 pushed content into an implicit column past
     the visible area, shoving it to the right. */
  .services__expand-inner > .services__expand-blocks {
    grid-column: 1;
  }

  /* Clients: 4-col → 1-col, ruled list */
  .clients__grid {
    grid-template-columns: 1fr;
    gap:                   0;
  }

  .clients__col {
    border-bottom:     1px solid var(--color-border);
    padding-top:    var(--space-sm);
    padding-bottom: var(--space-sm);
  }

  /* Work: single col, wide gap to clearly separate each project */
  .work__grid { gap: 8rem; }

  /* Section header: stack title above label */
  .section__header {
    flex-direction: column;
    align-items:    flex-start;
    gap:            var(--space-xs);
  }

  .section__label { text-align: left; }

  /* Footer: stack vertically */
  .footer__inner {
    flex-direction: column;
    gap:            var(--space-xs);
  }

  /* Overlay links scale down on small screens */
  .nav__overlay-link { font-size: var(--fs-xl); }
}