/* ============================================================
   FUTURE MARKETING STUDIO — RESPONSIVE SYSTEM
   Mobile-first breakpoints for all shared components
   ============================================================ */

/* ── BREAKPOINTS:
   480px  → small mobile
   640px  → large mobile
   768px  → tablet portrait
   1024px → tablet landscape / small desktop
   1280px → desktop (max container)
   1440px → wide desktop
   ──────────────────────────────────────────────────────────── */

/* ══ SMALL MOBILE (≤ 480px) ════════════════════════════════ */
@media (max-width: 480px) {
  :root {
    --section-h: 20px;
    --section-v: 64px;
    --nav-h: 64px;
  }

  /* Nav */
  .nav { padding: 0 20px; }
  .nav-logo-text { font-size: 12px; letter-spacing: 0.08em; }
  .nav-links, .nav-cta { display: none; }
  .nav-burger { display: flex; }

  /* Footer */
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 44px 20px;
  }
  .footer-nav {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px 24px;
    align-items: flex-start;
  }
  .footer-right { align-items: flex-start; }
  .footer-copy { text-align: left; }

  /* Buttons */
  .btn, .btn-primary, .btn-outline {
    padding: 13px 22px;
    font-size: 10px;
  }
  .btn-primary-lg {
    padding: 15px 32px;
    font-size: 11px;
  }

  /* Page hero */
  .page-hero-title { font-size: clamp(44px, 14vw, 68px); }

  /* Overlay menu links */
  .nav-overlay-links a { font-size: clamp(36px, 12vw, 52px); }
}

/* ══ MOBILE (≤ 640px) ══════════════════════════════════════ */
@media (max-width: 640px) {
  /* Hero CTA row → column */
  .hero-ctas {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  /* Booking section (contact page) — stack on mobile */
  .booking-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ══ TABLET (≤ 768px) ══════════════════════════════════════ */
@media (max-width: 768px) {
  :root {
    --section-h: 24px;
    --section-v: 72px;
    --nav-h: 68px;
  }

  /* Nav */
  .nav-links, .nav-cta { display: none; }
  .nav-burger { display: flex; }

  /* Footer */
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 48px var(--section-h);
  }
  .footer-nav {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px 28px;
    align-items: flex-start;
  }
  .footer-right { align-items: flex-start; }
  .footer-copy { text-align: left; }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  /* Page hero */
  .page-hero {
    min-height: clamp(300px, 50vh, 480px);
    padding-bottom: 56px;
  }
}

/* ══ TABLET LANDSCAPE (≤ 1024px) ═══════════════════════════ */
@media (max-width: 1024px) {
  :root {
    --section-h: clamp(24px, 4vw, 56px);
  }

  /* Slightly smaller nav text */
  .nav-logo-text { font-size: 13px; }
  .nav-links { gap: 24px; }
}

/* ══ WIDE DESKTOP (≥ 1440px) ═══════════════════════════════ */
@media (min-width: 1440px) {
  :root {
    --section-h: 96px;
    --section-v: 160px;
  }
}

/* ══ HIGH DPI / RETINA ══════════════════════════════════════ */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .noise-overlay { opacity: 0.3; }
}

/* ══ TOUCH DEVICES ══════════════════════════════════════════ */
@media (hover: none), (pointer: coarse) {
  /* Remove hover-only states for touch */
  .card-hover:hover { transform: none; }
  .img-zoom:hover img { transform: none; }

  /* Slightly larger tap targets */
  .btn, .btn-primary, .btn-ghost, .btn-outline {
    min-height: 48px;
  }
  .nav-links a { min-height: 48px; }
  .nav-cta { min-height: 44px; }
}

/* ══ PRINT ══════════════════════════════════════════════════ */
@media print {
  .nav, .footer, .noise-overlay, .cursor-dot, .cursor-ring,
  .page-loader, .page-transition, .nav-overlay { display: none !important; }
  body { background: #fff; color: #000; }
  .page-hero { background: #111 !important; }
  a::after { content: " (" attr(href) ")"; font-size: 10px; }
}