/* ═══════════════════════════════════════════════
   responsive.css — Breakpoints
   1200px : large desktop
    960px : tablet landscape
    768px : tablet portrait
    480px : mobile
═══════════════════════════════════════════════ */

/* ── 1200px: constrain layout ─────────────────── */
@media (max-width: 1200px) {

  :root {
    --space-lg:  2.5rem;
    --space-xl:  4rem;
    --space-2xl: 6rem;
  }

  .projects-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .project-card.featured {
    grid-column: 1 / -1;
  }

  .footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
  .footer-bottom {
    grid-column: 1 / -1;
  }
}

/* ── 960px: tablet landscape ──────────────────── */
@media (max-width: 960px) {

  /* Header */
  #site-nav { display: none; }
  .nav-hamburger { display: flex; }
  .mobile-menu { display: flex; }
  .nav-contact { display: none; }

  /* Hero */
  .hero-heading { font-size: clamp(1.8rem, 6vw, 3rem); }
  .slide-label  { display: none; }

  /* Philosophy */
  .philosophy-inner {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  /* Projects */
  .projects-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .project-card.featured .project-thumb {
    aspect-ratio: 4 / 3;
  }

  /* Service */
  .service-inner {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
  .svc-right { margin-top: var(--space-md); }

  /* News */
  .news-inner {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
  .news-left {
    position: static;
  }
  .news-item {
    grid-template-columns: 6rem 1fr;
    gap: 1rem;
  }

  /* Footer */
  .footer-inner {
    grid-template-columns: 1fr 1fr;
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
}

/* ── 768px: tablet portrait ───────────────────── */
@media (max-width: 768px) {

  :root {
    --space-lg:  1.5rem;
    --space-xl:  3rem;
    --space-2xl: 5rem;
  }

  /* Hero text */
  .hero-content { padding-bottom: 4rem; }
  .hero-eyebrow { font-size: 0.5rem; }
  .hero-heading-en { display: none; }

  /* Projects */
  .projects-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding-bottom: 2rem;
  }
  .projects-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
  .project-card.featured {
    grid-column: 1 / -1;
  }
  .project-card.featured .project-thumb {
    aspect-ratio: 3 / 2;
  }

  /* Service cycle: stack to 1 col */
  .cycle-row {
    grid-template-columns: 1fr 1fr;
  }

  /* Footer */
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .footer-brand { grid-column: auto; }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
}

/* ── 480px: mobile ────────────────────────────── */
@media (max-width: 480px) {

  :root {
    --space-lg:  1.2rem;
    --space-xl:  2.5rem;
    --space-2xl: 4rem;
  }

  /* Header logo */
  .site-logo { font-size: 1.2rem; }
  .site-logo sub { display: none; }

  /* Hero */
  .hero-heading { font-size: clamp(1.6rem, 8vw, 2.4rem); }
  .slide-dots { left: var(--space-lg); bottom: 1.5rem; }
  .dot { width: 20px; }
  .dot.active { width: 36px; }

  /* Philosophy */
  .phil-heading { font-size: clamp(1.4rem, 6vw, 1.8rem); }
  .phil-heading-en br { display: none; }

  /* Projects: single column on small phones */
  .projects-grid {
    grid-template-columns: 1fr;
  }
  .project-card.featured {
    grid-column: auto;
  }
  .project-card.featured .project-thumb {
    aspect-ratio: 4 / 3;
  }
  .project-thumb {
    aspect-ratio: 4 / 3;   /* less tall on mobile */
  }

  /* Service */
  .svc-heading { font-size: clamp(1.3rem, 6vw, 1.8rem); }
  .cycle-row { grid-template-columns: 1fr; }
  .cycle-item--full { grid-column: auto; text-align: left; }
  .cycle-item--full .cycle-num { text-align: left; }

  /* News */
  .news-item {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }

  /* Mobile menu font size */
  .mobile-menu a { font-size: 1.1rem; }
}

/* ── Reduce motion ────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .rv {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .slide { transition: none; }
  .project-thumb-inner { transition: none; }
}