/* ==========================================================================
   RESPONSIVE — Desktop → Laptop → Tablet → Mobile
   Breakpoints: ≥1600 large desktop · ≤1200 laptop · ≤1024 tablet
   · ≤767 MOBILE (single source of truth for phone layout, matches the
   375 / 390 / 414 design targets) · ≤380 small-phone safeguard.
   ========================================================================== */

/* ---------- Large screens (≥1600px) ---------- */
@media (min-width: 1600px) {
  .masonry { column-count: 5; }
}

/* ---------- Laptop (≤1200px) ---------- */
@media (max-width: 1200px) {
  :root { --gutter: 28px; }
  .masonry { column-count: 3; column-gap: 24px; }
  .card { margin-bottom: 24px; }
  .hero__grid { grid-template-columns: 1.1fr 1fr; gap: 32px; }
  .hero__title-main { font-size: clamp(46px, 8vw, 84px); }
  .hero__video-frame { width: min(100%, 340px); }
  .about__grid, .contact__grid { gap: 56px; }
}

/* ---------- Tablet (≤1024px) ---------- */
@media (max-width: 1024px) {
  .nav { display: none; }
  .social--header { display: none; }
  .menu-toggle { display: flex; }

  .hero__grid { grid-template-columns: 1fr; }
  /* Natural DOM order already puts text before video (.hero__left comes
     before .hero__right in the markup) — no `order` override needed here. */
  .hero__right { justify-content: center; }
  .hero__video-frame { width: min(100%, 300px); aspect-ratio: 9/16; }
  .hero__meta { gap: 28px; }

  .about__grid { grid-template-columns: 1fr; }
  .about__media { max-width: 420px; }

  .masonry { column-count: 2; }
  .section-head__row { grid-template-columns: 1fr; gap: 20px; }
  .section-head--portfolio .section-sub { max-width: 100%; }

  .contact__grid { grid-template-columns: 1fr; }

  .counters { grid-template-columns: repeat(4, auto); gap: 26px; }

  .footer-cta { padding: 130px 0 90px; }
}

/* ==========================================================================
   MOBILE (≤767px) — single consolidated tier.
   One --gutter value drives every section's horizontal padding (they all
   route through .container / .header__inner / .hero__grid), so there is
   no per-section drift. Vertical section padding is tuned down from the
   desktop "award show" scale to a content-driven mobile rhythm.
   ========================================================================== */
@media (max-width: 767px) {
  :root { --gutter: 20px; --header-h: 68px; }

  html, body { overflow-x: hidden; }

  /* ---- Header ---- */
  .logo__img { height: 30px; }
  .mobile-menu { padding: 0 28px; }
  .mobile-menu__list a { font-size: 24px; }

  /* ---- Hero: text first, square video second (never side-by-side,
     never absolutely positioned, never taller than it is wide) ---- */
  .hero { min-height: auto; padding: 108px 0 56px; }
  .hero__grid { gap: 32px; }
  .hero__right { margin: 0; }
  .hero__brand { font-size: 12px; }
  .hero__title-main { font-size: clamp(42px, 13vw, 64px); }
  .hero__title-alt { font-size: 16px; margin-top: 12px; }
  .hero__desc { font-size: 15px; margin-bottom: 28px; }
  .hero__actions { flex-direction: column; align-items: stretch; gap: 12px; margin-bottom: 32px; }
  .hero__actions .btn { justify-content: center; }
  .hero__meta { flex-wrap: wrap; gap: 20px 32px; }
  .hero__video-frame {
    width: 100%; max-width: 480px; margin: 0 auto;
    aspect-ratio: 1 / 1; border-radius: var(--radius-media-lg);
  }
  .scroll-indicator { display: none; }

  /* ---- Section typography: the desktop clamp() floors are too high to
     actually shrink on a 375–414px screen (the min bound wins outright),
     which is the "typography doesn't scale" bug — give headings a mobile
     floor that's proportional to the viewport instead. ---- */
  .section-title { font-size: clamp(36px, 11vw, 88px); }
  .section-head--portfolio .section-title { font-size: clamp(34px, 11vw, 118px); }
  .philosophy__statement { font-size: clamp(32px, 10vw, 118px); }

  /* ---- Portfolio ---- */
  .portfolio { padding: 88px 0 64px; }
  .section-head--portfolio { margin-bottom: 40px; }

  /* Compact, horizontally-scrollable filter row instead of a wrapped
     multi-line block — and no shrinking the label text to fit. */
  .filters {
    flex-wrap: nowrap; gap: 8px; margin: 32px 0 40px;
    overflow-x: auto; padding-bottom: 4px;
    -ms-overflow-style: none; scrollbar-width: none;
    margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1);
    padding-left: var(--gutter); padding-right: var(--gutter);
  }
  .filters::-webkit-scrollbar { display: none; }
  .filter { padding: 10px 18px; font-size: 13px; white-space: nowrap; flex-shrink: 0; }

  /* One column, every project's own thumbnail ratio preserved (only the
     hero video is forced square) — consistent ~18px vertical rhythm. */
  .masonry { column-count: 1; column-gap: 0; }
  .card { margin-bottom: 18px; }
  .card__title { font-size: 19px; }
  .portfolio__empty { padding: 56px 16px; }

  /* ---- About / stats ---- */
  .about { padding: 72px 0; }
  .about__grid { gap: 40px; }
  .counters {
    grid-template-columns: repeat(2, auto);
    column-gap: 32px; row-gap: 28px; margin-top: 32px;
  }
  .counter__num { font-size: 34px; }

  /* ---- Black statement ---- */
  .philosophy { padding: 88px 0; }
  .philosophy__eyebrow { margin-bottom: 20px; }

  /* ---- Services ("What I Cut") ---- */
  .services { padding: 72px 0; }
  .services-list { margin-top: 32px; }
  .services-list__item { gap: 18px; padding: 22px 0; }
  .services-list__desc { max-width: 100%; }

  /* ---- Process ("How I Work") — the existing 860px breakpoint already
     stacks each row into "01 NAME" then its description directly below;
     this just tightens the vertical rhythm for a phone screen. ---- */
  .process { padding: 72px 0; }
  .process__list { margin-top: 40px; }
  .process__row { padding: 24px 0; }

  /* ---- Timeline — the existing 860px breakpoint already stacks year /
     role / company into a clean single column; tighten spacing here. ---- */
  .experience { padding: 72px 0; }
  .experience__list { margin-top: 40px; }
  .experience__row { padding: 20px 0; gap: 8px; }

  /* ---- Testimonials / "What Stands Out" ---- */
  .testimonials { padding: 48px 0 72px; }
  .testi { padding-top: 40px; }
  .testi__meta { row-gap: 14px; }
  .testi__controls { margin-top: 36px; }

  /* ---- Story / CTA (contact) ---- */
  .contact { padding: 56px 0 72px; }
  .contact__grid { gap: 40px; }
  .contact__cta { padding: 32px 24px; }
  .contact__cta-text { font-size: 17px; }
  .contact__email { font-size: 21px; flex-wrap: wrap; gap: 10px; }

  /* ---- Footer ---- */
  .footer-cta { padding: 72px 0 56px; }
  .footer-cta__heading { margin-bottom: 28px; }
  .footer-cta__link { flex-wrap: wrap; justify-content: center; }
  .footer-bottom {
    flex-direction: column; gap: 18px; text-align: center; padding: 24px 0 36px;
  }
  .footer-bottom__id { align-items: center; }
  .footer-bottom__meta { order: 3; }
  .back-to-top { order: 4; }

  /* ---- Modal ---- */
  .modal__panel { grid-template-columns: 1fr; }
  .modal__media { min-height: 220px; }
  .modal__info { padding: 26px 20px; }

  /* ---- Cursor: touch devices get the native pointer back ---- */
  .cursor { display: none !important; }
  body.has-cursor, body.has-cursor a, body.has-cursor button { cursor: auto; }
}

/* ---------- Small phones (≤380px) — extra safety, no new layout ---------- */
@media (max-width: 380px) {
  .hero__meta-item strong { font-size: 22px; }
  .counter__num { font-size: 30px; }
  .hero__video-frame { border-radius: 16px; }
}