/* ============================================================
   RESPONSIVE STYLES  —  css/responsive.css
   Breakpoints: 1200 / 900 / 768 / 480
   ============================================================ */

/* ── TOUCH: hide custom cursor ─────────────────────────────── */
@media (pointer: coarse) {
  .cursor, .cursor-ring { display: none; }
  body { cursor: auto; }
  /* show play/view buttons always on touch (no hover) */
  .work-play-btn,
  .work-view-btn {
    opacity: 1 !important;
    transform: translate(-50%, -50%) scale(1) !important;
  }
}

/* ── 1200px ─────────────────────────────────────────────────── */
@media (max-width: 1200px) {
  :root { --section-x: 48px; }

  .footer-inner { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 32px; }

  .work-card--featured { aspect-ratio: 16/8; }
  .photo-mosaic { grid-template-columns: repeat(4, 1fr); }
  .work-card--photos { min-height: 420px; }
}

/* ── 900px ──────────────────────────────────────────────────── */
@media (max-width: 900px) {
  :root { --section-x: 40px; --section-y: 80px; }

  /* Home services */
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  /* Process */
  .process-steps { grid-template-columns: repeat(2, 1fr); }
  .process-step:nth-child(2) { border-right: none; }
  .process-step:nth-child(3) { border-top: 1px solid var(--border-cyan); }
  .process-step:nth-child(4) { border-right: none; border-top: 1px solid var(--border-cyan); }

  /* Work page */
  .work-row { grid-template-columns: 1fr; }
  .work-card--featured { aspect-ratio: 16/9; }
  .photo-mosaic { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(5, 1fr); }
  .photo-mosaic img:nth-child(1)  { grid-row: 1 / 3; }
  .photo-mosaic img:nth-child(6)  { grid-row: 3 / 5; }
  .photo-mosaic img:nth-child(11) { grid-row: 4 / 6; }
  .work-card--photos { min-height: 520px; }

  /* About */
  .story-section { grid-template-columns: 1fr; gap: 48px; }
  .values-grid { grid-template-columns: repeat(2, 1fr); }

  /* Contact */
  .contact-section { grid-template-columns: 1fr; }
  .contact-info { padding: 80px var(--section-x); border-right: none; border-bottom: 1px solid var(--border-cyan); }
  .contact-form-wrap { padding: 80px var(--section-x); }

  /* Case study */
  .cs-overview { grid-template-columns: 1fr; gap: 48px; }
  .cs-next { grid-template-columns: 1fr; }
  .cs-next-item:first-child { border-right: none; border-bottom: 1px solid var(--border-cyan); }
  .cs-visuals.two-col, .cs-visuals.three-col { grid-template-columns: 1fr; }

  /* Footer */
  .footer-inner { grid-template-columns: repeat(3, 1fr); gap: 40px; justify-items: center; }
  .footer-brand { grid-column: 1 / -1; justify-content: flex-start; justify-self: start; }
  .footer-col { text-align: left; }
  .footer-col-links { align-items: flex-start; }
  .footer-col-title { text-align: left; }
}

/* ── 768px ─ Mobile nav threshold ──────────────────────────── */
@media (max-width: 768px) {
  :root { --section-x: 24px; --section-y: 40px; }

  /* NAV */
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
  nav { padding: 18px var(--section-x); }
  .nav-logo-img { height: 24px; }

  /* HOME HERO — compact bottom padding (scroll indicator is hidden) */
  .hero { padding: 100px var(--section-x) 72px; }
  .hero-cta { flex-direction: column; gap: 16px; align-items: center; }
  .hero-scroll { display: none; }
  .hero-title { font-size: clamp(26px, 9.5vw, 80px); }

  /* SERVICES — 2-col, compact cards */
  #services { padding: 36px var(--section-x); }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .service-card { padding: 20px 14px; }
  .service-num  { display: none; }
  .service-icon { width: 26px; height: 26px; margin-bottom: 10px; }
  .service-name { font-size: 8px; margin-bottom: 7px; }
  .service-desc { font-size: 9px; line-height: 1.65; }

  /* PROCESS — 2-col, compact */
  .process-steps { grid-template-columns: repeat(2, 1fr); }
  .process-step { padding: 24px 18px; border-right: none; border-bottom: 1px solid var(--border-cyan); }
  .process-step:nth-child(odd)  { border-right: 1px solid var(--border-cyan); }
  .process-step:nth-child(3),
  .process-step:nth-child(4)   { border-bottom: none; }
  .step-num { font-size: 28px; margin-bottom: 8px; }
  .step-desc { font-size: 10px; line-height: 1.7; }

  /* HOME WORK GRID — 2 cards per row, compact heights */
  .work-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    gap: 10px;
  }
  .work-card:nth-child(1) {
    grid-column: 1 / -1; /* Flying Pig featured — full width */
    grid-row: auto;
    aspect-ratio: 16 / 8;
  }
  .work-card:nth-child(2),
  .work-card:nth-child(3) {
    grid-column: auto;
    grid-row: auto;
    aspect-ratio: 4 / 3;
  }
  .work-card--photo-preview {
    grid-column: 1 / -1;
    grid-row: auto;
    aspect-ratio: 16 / 5;
  }
  .work-header { margin-bottom: 28px; }

  /* ABOUT home section — hide canvas on mobile, just show text */
  .about-section { grid-template-columns: 1fr; }
  .about-visual { display: none; min-height: 0 !important; }
  .about-content { padding: 36px var(--section-x) 40px; justify-content: flex-start; }
  .about-stats { grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 24px; padding-top: 24px; }

  /* CTA */
  .cta-section { padding: 44px var(--section-x); }
  .cta-title { font-size: clamp(28px, 8vw, 56px); }
  .cta-actions { flex-direction: column; gap: 16px; }
  .cta-email { font-size: 9px; }
  .cta-label { margin-bottom: 8px; }
  .cta-sub { font-size: 9px; margin-bottom: 20px; }

  /* ABOUT page */
  .values-grid { grid-template-columns: 1fr; }

  /* WORK page */
  .work-section { padding: 56px var(--section-x) 80px; }
  .work-card--featured { aspect-ratio: 4/3; }
  .work-card--half { aspect-ratio: 4/3; }
  .work-row { grid-template-columns: 1fr; }
  .photo-mosaic { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(7, 110px); }
  .photo-mosaic img { aspect-ratio: unset; }
  .photo-mosaic img:nth-child(1),
  .photo-mosaic img:nth-child(6),
  .photo-mosaic img:nth-child(11) { grid-row: auto; }
  .work-card--photos { min-height: auto; }
  .work-title { font-size: 13px; }
  .work-card-info { padding: 20px 20px; }
  .work-play-btn, .work-view-btn { padding: 11px 20px; font-size: 7px; gap: 8px; }

  /* CONTACT */
  .form-row { grid-template-columns: 1fr; }

  /* PAGE HERO */
  .page-hero { padding: calc(var(--nav-height) + 48px) var(--section-x) 56px; }

  /* CASE STUDY */
  .cs-back { left: var(--section-x); }
  .cs-hero { padding: calc(var(--nav-height) + 64px) var(--section-x) 64px; }
  .cs-meta-row { flex-wrap: wrap; gap: 32px; }
  .cs-section { padding: 56px var(--section-x); }
  .cs-overview { padding: 56px var(--section-x); }

  /* FOOTER — compact on mobile */
  footer { padding: 36px var(--section-x) 24px; }
  .footer-inner { grid-template-columns: repeat(3, 1fr); gap: 20px 28px; padding-bottom: 28px; justify-items: center; }
  .footer-brand { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: flex-start; gap: 16px; }
  .footer-col-links { align-items: flex-start; }
  .footer-col-title { text-align: left; }
  .footer-tagline { display: none; }
  .footer-logo-img { height: 18px; }
  .footer-col-title { margin-bottom: 14px; }
  .footer-col-links { gap: 10px; }
  .footer-bottom { flex-direction: row; justify-content: space-between; padding-top: 20px; gap: 8px; }
  .footer-social { gap: 16px; }

  /* PROJECT OVERLAY */
  .po-topbar { height: 56px; }
  .po-back { font-size: 0; gap: 0; min-width: 32px; }
  .po-back svg { display: block; width: 20px; height: 20px; }
  .po-project-header { padding: 40px var(--section-x) 32px; }
  .po-project-meta { gap: 24px; }
  .po-section { padding: 0 var(--section-x) 56px; }
  .po-poster-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 0 var(--section-x) 56px; }
  .po-photo-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; padding: 0 var(--section-x) 56px; }
  .po-zoom-nav { width: 40px; height: 40px; }
  .po-zoom-prev { left: 8px; }
  .po-zoom-next { right: 8px; }
  .po-zoom-close { top: 14px; right: 16px; width: 38px; height: 38px; }
}

/* ── 480px ─ Small mobile ───────────────────────────────────── */
@media (max-width: 480px) {
  :root { --section-x: 16px; --section-y: 32px; }

  /* NAV: shrink logo further */
  .nav-logo-img { height: 20px; }

  /* HERO */
  .hero-sub { font-size: 9px; }
  .hero { padding: 88px var(--section-x) 60px; }

  /* ABOUT stats 2-col */
  .about-stats { grid-template-columns: repeat(2, 1fr); }
  .about-stats > *:last-child { grid-column: 1 / -1; text-align: center; }

  /* SERVICES / PROCESS */
  .service-card { padding: 18px 14px; }
  .process-step { padding: 20px 14px; }

  /* WORK */
  .filters { gap: 3px; }
  .filter-btn { padding: 9px 14px; font-size: 7px; letter-spacing: 0.28em; }
  .work-card--featured { aspect-ratio: 3/2; }
  .photo-mosaic { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(7, 100px); }
  .work-card--photos { min-height: auto; }
  .work-card-info { padding: 16px; }
  .work-title { font-size: 12px; letter-spacing: 0.08em; }

  /* CONTACT */
  .contact-info { padding: 48px var(--section-x); }
  .contact-form-wrap { padding: 48px var(--section-x); }

  /* FOOTER */
  .footer-social { justify-content: center; flex-wrap: wrap; }
  .marquee-track { animation-duration: 35s; }

  /* PAGE HERO */
  .page-hero-title { font-size: clamp(32px, 10vw, 64px); }

  /* PROJECT OVERLAY — swipe-only on very small screens */
  .po-zoom-nav { display: none; }
  .po-photo-grid { grid-template-columns: repeat(2, 1fr); }
}