/* ============================================================
   RESPONSIVE — breakpoints per the responsive-design skill
   Mobile-first base styles live in global/typography/sections;
   this file layers on overrides per breakpoint.
   ============================================================ */

/* Tablet: 768–1023px */
@media (min-width: 768px) {
  :root {
    --section-px: var(--section-px-tablet);
  }

  .principle-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Laptop: 1024–1439px — desktop nav returns */
@media (min-width: 1024px) {
  .header__nav {
    display: flex;
  }
  .header__hamburger,
  .header__drawer {
    display: none;
  }

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

/* Featured Works: horizontal scroll-pin track. Gated on BOTH the
   breakpoint AND prefers-reduced-motion:no-preference at the CSS level
   (not just skipping the JS) — a reduced-motion user must never get an
   overflowing horizontal track with no scroll mechanism to reach cards
   past the first one. featuredWorks.js's gsap.matchMedia query matches
   this exactly; keep both in sync. */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .works__viewport {
    overflow: hidden;
  }

  .works__track {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0;
    padding-inline: 0; /* moved onto each card below — see sections.css comment */
  }

  .works__track .project-card {
    flex: 0 0 100%;
    width: 100%;
    padding-inline: var(--section-px);
    box-sizing: border-box;
  }

  .works__track .project-card:not(.is-active) {
    opacity: 0.55;
    transition: opacity var(--dur-slow) var(--ease-standard);
  }

  .works__track .project-card.is-active {
    opacity: 1;
    transition: opacity var(--dur-slow) var(--ease-standard);
  }
}

/* Desktop: 1440px+ — full section padding from Figma */
@media (min-width: 1440px) {
  :root {
    --section-px: 80px;
  }
}

/* Tablet and below: Worked With grid drops from 4 to 2 columns */
@media (max-width: 1023px) {
  .worked-with__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Hero headline: below 390px the longest rotating statement
   ("I Create Meaningful Impact.") wraps to 3 lines instead of 2 —
   measured empirically. Reserve the taller height only in that
   narrow range so the typewriter reveal never shifts
   .hero__description/.hero__cta below it. */
@media (max-width: 389px) {
  .hero__headline {
    min-height: calc(3 * var(--fs-display-lg));
  }
}

/* Mobile ceiling: below 768px, force mobile section padding */
@media (max-width: 767px) {
  :root {
    --section-px: var(--section-px-mobile);
  }

  /* Hero: stack eyebrow/role above the location/time widget instead of
     spreading them apart, per the responsive-design skill's stack order */
  .hero__top {
    flex-direction: column;
    gap: 16px;
  }

  /* Hero description: two side-by-side columns become stacked text */
  .hero__description {
    flex-direction: column;
    gap: 24px;
  }

  /* Worked With: single column on mobile */
  .worked-with__grid {
    grid-template-columns: 1fr;
  }

  /* Footer: full-width social buttons, easier tap targets */
  .footer__social {
    flex-direction: column;
    width: 100%;
  }

  .footer__social-link {
    width: 100%;
  }

  .footer__meta {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Expertise dropdown options: larger tap target, no hover reliance */
  .expertise__option {
    min-height: 48px;
    display: flex;
    align-items: center;
  }
}