/* ════════════════════════════════════════════════════════════════
   RESPONSIVE.CSS — Global mobile/tablet refinements
   Loaded last so it overrides component files where needed.
   Breakpoints: 1024px (tablet) · 768px (mobile) · 480px (small phone)
════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   GLOBAL — prevent horizontal overflow
───────────────────────────────────────────── */
html, body { max-width: 100%; overflow-x: clip; }
img, svg, video, canvas { max-width: 100%; }


/* ═════════════════════════════════════════════
   TABLET (≤1024px)  — fills gaps left by components
═════════════════════════════════════════════ */
@media (max-width: 1024px) {
  /* Mission body */
  .mission-h2 { font-size: 38px; }
  .mission-h2 em { font-size: 28px; }

  /* Authenticity */
  .auth-hero-text h2 { font-size: 36px; }
  .auth-hero-text h2 em { font-size: 26px; }

  /* Flagship — NONE existed before */
  .flagship-content { padding: 100px 40px 80px; }
  .flagship-h { font-size: 52px; }
  .flagship-h .amp { font-size: 80px; }
  .flagship-sub { font-size: 19px; }
  .flagship-meta { left: 40px; right: 40px; top: 32px; }
  .flagship-rail { right: 32px; }

  /* Services */
  .services-intro h2 { font-size: 36px; }
  .services-intro h2 em { font-size: 26px; }

  /* Studio */
  .studio-left h2 { font-size: 36px; }
  .studio-left h2 em { font-size: 26px; }

  /* Contact */
  .contact-left h2 { font-size: 38px; }
  .contact-left h2 em { font-size: 28px; }
  .contact-bg-text { font-size: 180px; }
}


/* ═════════════════════════════════════════════
   MOBILE (≤768px)
═════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* ── Section paddings ── */
  #hero { padding: 0 24px; min-height: 100svh; }
  #mission, #authenticity, #services, #studio { padding: 70px 24px; }
  #contact { padding: 60px 24px 50px; }
  #nav { padding: 18px 22px; }
  #nav.scrolled { padding: 12px 22px; }
  .section-strip { padding: 11px 22px; }
  footer { padding: 36px 24px 24px; }

  /* ── NAV ── */
  .nav-cta { display: none; }            /* moved into mobile menu */
  .logo-name small { display: none; }    /* "Game Development · Gurugram" */
  .logo-name { font-size: 12px; }
  .logo-emblem { width: 34px; height: 34px; }

  /* ── HERO ── */
  #hero { min-height: 100vh; }
  .hero-content { padding-bottom: 220px; max-width: 100%; }
  .hero-orn, .scroll-hint { display: none; }   /* decorative — collide with content */

  h1.hero-h1 .gold-italic { font-size: 22px; }
  h1.hero-h1 .main-line   { font-size: 44px; }
  h1.hero-h1 .sub-line    { font-size: 32px; }
  .hero-tagline { font-size: 17px; line-height: 1.65; max-width: 100%; margin: 18px 0 28px; }
  .hero-actions { flex-wrap: wrap; gap: 14px; }
  .hero-actions a { flex: 1 1 auto; text-align: center; min-width: 160px; }

  /* Hero stats — wrap 4→ 2×2 grid */
  .hero-stats { flex-wrap: wrap; }
  .hero-stat {
    flex: 1 1 50%;
    padding: 12px 16px;
    border-right: 0.5px solid rgba(200,134,10,0.12);
    border-bottom: 0.5px solid rgba(200,134,10,0.12);
    gap: 8px;
  }
  .hero-stat:nth-child(2n) { border-right: none; }
  .hero-stat:nth-last-child(-n+2) { border-bottom: none; }
  .hs-num { font-size: 16px; }
  .hs-lbl { display: block; font-size: 8px; line-height: 1.4; }

  /* ── Section strips stick below scrolled mobile nav (~58px tall) ── */
  .section-strip { top: 60px; }

  /* ── MISSION ── */
  .mission-h2 { font-size: 30px; line-height: 1.15; }
  .mission-h2 em { font-size: 22px; }
  .mission-body { font-size: 16px; line-height: 1.75; }
  .p-desc { font-size: 14px; }
  .auth-card { padding: 20px 18px 20px 22px; }
  .auth-card-body { font-size: 14px; line-height: 1.7; }
  .tag { font-size: 8.5px; padding: 3px 7px; }
  .mission-mandala { width: 420px; height: 420px; right: -160px; }
  .bg-mandala-sm  { width: 280px; height: 280px; left: -140px; }

  /* ── AUTHENTICITY ── */
  .auth-hero-text h2 { font-size: 28px; }
  .auth-hero-text h2 em { font-size: 20px; }
  .auth-hero-text p { font-size: 16px; line-height: 1.75; }
  .auth-hero-text { margin-bottom: 48px; }
  .auth-photo-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 180px 180px; gap: 3px; margin-bottom: 48px; }
  .photo-cell.span-v { grid-row: span 1; }
  .timeline-item { padding: 24px 20px; }
  .t-body { font-size: 14px; }

  /* ── FLAGSHIP ── */
  #flagship { min-height: auto; }
  .flagship-content { padding: 110px 24px 60px; min-height: 100vh; }
  .flagship-keyart { object-position: 70% center; }
  .flagship-overlay {
    background:
      linear-gradient(to top,    rgba(8,6,10,0.96) 0%, rgba(8,6,10,0.78) 35%, rgba(8,6,10,0.4) 65%, rgba(8,6,10,0.15) 90%),
      linear-gradient(to right,  rgba(8,6,10,0.6) 0%, transparent 80%);
  }
  .flagship-left { max-width: 100%; }
  .flagship-h { font-size: 40px; }
  .flagship-h .amp { font-size: 56px; }
  .flagship-sub { font-size: 16px; line-height: 1.65; margin: 18px 0 24px; }
  .flagship-tags { gap: 6px; margin-bottom: 32px; }
  .ftag { font-size: 8.5px; padding: 5px 10px; letter-spacing: 0.16em; }
  .flagship-rail { display: none; }
  .flagship-meta {
    left: 24px; right: 24px; top: 22px;
    font-size: 8px; letter-spacing: 0.22em;
    flex-wrap: wrap; gap: 8px;
  }
  .flagship-meta .meta-l, .flagship-meta .meta-r { gap: 8px; }
  .flagship-cta-row { gap: 12px; }
  .btn-flagship { padding: 14px 26px; font-size: 10px; gap: 10px; }

  /* ── SERVICES ── */
  .services-intro { margin-bottom: 48px; }
  .services-intro h2 { font-size: 28px; }
  .services-intro h2 em { font-size: 20px; }
  .services-intro p { font-size: 16px; line-height: 1.75; }
  .svc-card { padding: 32px 24px; }
  .svc-body { font-size: 15px; line-height: 1.7; }
  .svc-num { font-size: 30px; margin-bottom: 14px; }

  /* ── STUDIO ── */
  .studio-left h2 { font-size: 28px; }
  .studio-left h2 em { font-size: 20px; }
  .studio-left p { font-size: 16px; line-height: 1.75; }
  .studio-values { grid-template-columns: 1fr 1fr; }
  .val-item { padding: 16px 16px; }
  .val-body { font-size: 13px; }
  .glance-v { font-size: 15px; }
  .glance-item { padding: 14px 16px; }

  /* Role rows — prevent overflow from many separators */
  .role-row { grid-template-columns: 1fr auto; gap: 10px; padding: 14px 16px; }
  .role-row:hover { padding-left: 20px; }
  .role-title { font-size: 14px; }
  .role-meta { flex-wrap: wrap; gap: 6px; font-size: 8.5px; }
  .role-arrow { display: none; }
  .role-tag { font-size: 8px; padding: 3px 7px; }
  .roles-hdr { padding: 14px 16px; }
  .roles-footer { padding: 14px 16px; flex-direction: column; gap: 10px; align-items: flex-start; }
  .roles-footer .note { font-size: 12px; }

  /* ── CONTACT ── */
  .contact-left h2 { font-size: 30px; }
  .contact-left h2 em { font-size: 22px; }
  .contact-left p { font-size: 16px; line-height: 1.75; }
  .contact-bg-text { font-size: 120px; }
  .ch-lbl { width: 90px; font-size: 9px; }
  .ch-val { font-size: 14px; }
  .form-group input, .form-group select, .form-group textarea { font-size: 14px; }
  .form-submit { flex-wrap: wrap; gap: 12px; }
  .form-submit .btn-primary { width: 100%; text-align: center; }
  .form-note { width: 100%; }

  /* ── FOOTER ── */
  .footer-top { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { flex-wrap: wrap; gap: 14px; justify-content: center; text-align: center; }
  .footer-motif { order: -1; width: 100%; justify-content: center; }

  /* ── BGM control sits lower so it doesn't overlap content ── */
  #bgm-control { bottom: 14px; right: 14px; }
}


/* ═════════════════════════════════════════════
   SMALL PHONE (≤480px)
═════════════════════════════════════════════ */
@media (max-width: 480px) {
  /* Tighter side padding */
  #hero { padding: 0 18px; }
  #mission, #authenticity, #services, #studio { padding: 56px 18px; }
  #contact { padding: 50px 18px 40px; }
  .flagship-content { padding: 110px 18px 50px; }
  #nav { padding: 16px 18px; }
  #nav.scrolled { padding: 12px 18px; }
  .section-strip { padding: 10px 18px; }
  footer { padding: 32px 18px 22px; }

  /* HERO */
  h1.hero-h1 .gold-italic { font-size: 18px; letter-spacing: 0.08em; }
  h1.hero-h1 .main-line   { font-size: 34px; }
  h1.hero-h1 .sub-line    { font-size: 24px; }
  .hero-tagline { font-size: 15px; margin: 14px 0 24px; }
  .hero-eyebrow-text { font-size: 8px; letter-spacing: 0.28em; }
  .hero-content { padding-bottom: 200px; }

  /* Hero stats — keep 2×2 but tighter */
  .hero-stat { padding: 10px 12px; gap: 6px; }
  .hs-num { font-size: 14px; }
  .hs-lbl { font-size: 7.5px; letter-spacing: 0.1em; }

  /* Buttons */
  .btn-primary, .btn-ghost { padding: 12px 22px; font-size: 9px; letter-spacing: 0.18em; }
  .btn-flagship { padding: 13px 22px; font-size: 9.5px; }

  /* Section headings */
  .mission-h2,
  .auth-hero-text h2,
  .services-intro h2,
  .studio-left h2 { font-size: 24px; }
  .contact-left h2 { font-size: 26px; }
  .mission-h2 em,
  .auth-hero-text h2 em,
  .services-intro h2 em,
  .studio-left h2 em { font-size: 17px; }
  .contact-left h2 em { font-size: 19px; }

  /* Photo grid → single col */
  .auth-photo-grid { grid-template-columns: 1fr; grid-template-rows: auto; }
  .photo-cell { min-height: 180px; }

  /* Mission cards full width breathing room */
  .auth-card { padding: 18px 16px 18px 20px; }
  .tag-row { gap: 5px; }

  /* Flagship */
  .flagship-h { font-size: 32px; }
  .flagship-h .amp { font-size: 42px; }
  .flagship-sub { font-size: 15px; }
  .flagship-meta { font-size: 7.5px; gap: 6px; }
  .flagship-meta .meta-l, .flagship-meta .meta-r { gap: 6px; }

  /* Studio glance — stack to 1 col so values don't truncate */
  .studio-values { grid-template-columns: 1fr; }
  .studio-glance { grid-template-columns: 1fr; }
  .glance-item { border-right: none; }
  .glance-item:nth-last-child(-n+2) { border-bottom: 0.5px solid rgba(200,134,10,0.12); }
  .glance-item:last-child { border-bottom: none; }
  body.light-theme .glance-item:nth-last-child(-n+2) { border-bottom-color: rgba(140,89,8,0.2); }
  body.light-theme .glance-item:last-child { border-bottom: none; }

  /* Contact */
  .contact-bg-text { font-size: 80px; }
  .ch-lbl { width: 80px; font-size: 8.5px; letter-spacing: 0.16em; }
  .ch-item { gap: 12px; padding: 14px 0; }

  /* Footer */
  .footer-top { grid-template-columns: 1fr; }
  .footer-brand p { max-width: 100%; }

  /* BGM control — slightly smaller */
  #bgm-control { width: 50px; max-height: 50px; }
  #bgm-toggle { width: 38px; height: 38px; }
  .bgm-icon { inset: 8px; width: 22px; height: 22px; }
  #bgm-control:hover { max-height: 220px; }
}


/* ═════════════════════════════════════════════
   VERY SHORT VIEWPORTS — keep hero readable
═════════════════════════════════════════════ */
@media (max-width: 768px) and (max-height: 700px) {
  #hero { min-height: 640px; }
  .hero-content { padding-bottom: 200px; }
}