/* ==========================================================================
   PSC Co., Ltd. — Premium Corporate Website
   responsive.css — Breakpoints & Mobile Adaptations
   ==========================================================================
   Breakpoints:
     1200px — Large desktop
     1024px — Laptop / small desktop
      768px — Tablet
      480px — Mobile
   ========================================================================== */

/* --------------------------------------------------------------------------
   Large Desktop (≤ 1200px)
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  :root {
    --space-3xl: 7rem;
    --space-2xl: 5rem;
  }

  .hero-inner { gap: var(--space-lg); }
  .hero-visual { height: 480px; }
  .hero-card-main img { height: 280px; }

  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .process-grid { grid-template-columns: repeat(2, 1fr); }
}

/* --------------------------------------------------------------------------
   Laptop / Small Desktop (≤ 1024px)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  :root {
    --space-3xl: 6rem;
    --nav-height: 72px;
  }

  /* Collapse nav to mobile menu */
  .nav-menu,
  .nav-phone { display: none; }

  .nav-actions .nav-cta { display: none; }

  /* Desktop lang switcher hidden on tablet/mobile;
     a compact pill switcher lives inside the mobile menu instead. */
  .nav-actions .lang-switcher { display: none; }

  .hamburger { display: flex; }

  /* Hero stacks vertically */
  .hero {
    min-height: auto;
    padding-top: calc(var(--nav-height) + 40px);
    padding-bottom: 80px;
  }

  .hero-inner {
    grid-template-columns: 1fr;
    gap: 56px;
    text-align: center;
  }

  .hero-content { max-width: 680px; margin-inline: auto; }

  .hero-badge,
  .hero-actions,
  .hero-stats { justify-content: center; }

  .hero-subtitle { margin-inline: auto; }

  .hero-visual { height: 420px; max-width: 560px; margin-inline: auto; width: 100%; }

  .scroll-indicator { display: none; }

  /* Two-column layouts collapse */
  .about-grid,
  .split-feature,
  .contact-grid,
  .mv-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .about-visual { max-width: 480px; margin-inline: auto; }
  .about-exp-badge { right: 0; }

  .services-grid,
  .news-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }

  .footer-brand { grid-column: span 2; }
}

/* --------------------------------------------------------------------------
   Tablet (≤ 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  :root {
    --space-3xl: 4.5rem;
    --space-2xl: 3.5rem;
    --space-xl: 3rem;
  }

  .container,
  .container-narrow { padding-inline: 20px; }

  /* Sections */
  .section { padding-block: var(--space-3xl); }

  /* Hide some hero floating cards for clarity */
  .hero-card-float-1 { display: none; }

  .hero-visual { height: 360px; }
  .hero-card-main img { height: 220px; }

  /* Buttons full-width on mobile */
  .hero-actions .btn,
  .cta-actions .btn { width: 100%; }

  .hero-stats { gap: 24px; justify-content: space-around; width: 100%; }
  .hero-stat .num { font-size: 1.7rem; }

  /* Grids → single column */
  .services-grid,
  .news-grid,
  .why-grid,
  .team-grid,
  .process-grid {
    grid-template-columns: 1fr;
  }

  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .stat-card { padding: 26px 16px; }

  /* Gallery */
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 200px;
    gap: 14px;
  }
  .gallery-item.is-wide { grid-column: span 2; }
  .gallery-item.is-tall { grid-row: span 1; }

  /* Testimonials */
  .testimonial-inner { padding: 32px 24px; }
  .testimonial-text { font-size: 1.05rem; }

  /* CTA */
  .cta-box { padding: 44px 26px; }

  /* Contact form */
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .contact-info-card,
  .contact-form-card { padding: 32px 24px; }

  /* FAQ */
  .faq-question { padding: 20px; font-size: 0.98rem; }
  .faq-answer-inner { padding: 0 20px 22px; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
  .footer-brand { grid-column: span 1; }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 14px;
  }

  /* Page header */
  .page-header { padding-top: calc(var(--nav-height) + 50px); padding-bottom: 56px; }

  /* Back to top */
  .back-to-top { bottom: 20px; right: 20px; width: 46px; height: 46px; }

  /* Timeline */
  .timeline { padding-left: 32px; }
  .timeline-dot { left: -32px; }
}

/* --------------------------------------------------------------------------
   Mobile (≤ 480px)
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  :root {
    --space-3xl: 3.5rem;
  }

  .container,
  .container-narrow { padding-inline: 16px; }

  h1 { font-size: 2.1rem; }
  h2 { font-size: 1.75rem; }

  .eyebrow { font-size: 0.72rem; padding: 6px 14px; }

  .hero-title { font-size: 2.3rem; }
  .hero-subtitle { font-size: 1.02rem; }
  .hero-stats {
    flex-direction: column;
    gap: 18px;
    align-items: center;
  }
  .hero-stat { text-align: center; }

  .btn { padding: 13px 24px; font-size: 0.92rem; }

  .gallery-grid { grid-template-columns: 1fr; grid-auto-rows: 220px; }
  .gallery-item.is-wide { grid-column: span 1; }

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

  .section-head { margin-bottom: var(--space-lg); }

  .testimonial-author { flex-direction: column; text-align: center; gap: 10px; }
  .testimonial-author-info { text-align: center; }

  .marquee-item { font-size: 1.2rem; }
  .marquee-item i { font-size: 1.5rem; }

  .contact-info-card,
  .contact-form-card,
  .cta-box { padding: 30px 20px; }

  .lightbox { padding: 20px; }
  .lightbox-close { top: 16px; right: 16px; width: 44px; height: 44px; }
  .lightbox-prev { left: 10px; }
  .lightbox-next { right: 10px; }
  .lightbox-nav { width: 44px; height: 44px; }

  .nav-logo-mark { width: 38px; height: 38px; font-size: 1rem; }
  .nav-logo-text { font-size: 1rem; }
  .nav-logo-sub { font-size: 0.6rem; }
}

/* --------------------------------------------------------------------------
   Small mobile height fix
   -------------------------------------------------------------------------- */
@media (max-width: 480px) and (max-height: 700px) {
  .hero { min-height: auto; }
  .hero-visual { height: 300px; }
}

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */
@media print {
  .navbar,
  .mobile-menu,
  .menu-overlay,
  .back-to-top,
  .scroll-progress,
  .scroll-indicator,
  .lightbox { display: none !important; }

  body { color: #000; background: #fff; }
  .section { padding-block: 20px; }
}