/* ============================================================
   responsive.css — Mobile / Tablet Breakpoints
   株式会社〇〇 Website
   ============================================================ */

/* ============================================================
   TABLET  ( ~1024px )
   ============================================================ */
@media (max-width: 1024px) {

  /* Header */
  header { padding: 0 32px; }

  /* Hero */
  .hero { padding: 0 0 48px 60px; }
  .hero--full { padding: 0 60px; }

  /* Breadcrumb */
  .breadcrumb { padding: 16px 60px; }

  /* Top — Intro */
  .intro {
    grid-template-columns: 1fr;
    gap: 48px;
    padding: 80px 60px;
  }
  .intro-image { height: 360px; }

  /* Top — About strip */
  .about-strip { padding: 80px 60px; }
  .about-cards { grid-template-columns: 1fr 1fr; gap: 20px; }

  /* Top — Banner */
  .banner-grid { height: 280px; }
  .banner-en { font-size: 24px; }

  /* Top — Gallery preview */
  .gallery-preview { padding: 80px 60px; }

  /* Top — News */
  .news-section { padding: 80px 60px; }

  /* About page */
  .page-intro { padding: 60px 60px 40px; }
  .page-image-wrap { padding: 0 60px 80px; }
  .strengths { padding: 80px 60px; }
  .strength-item { gap: 48px; }

  /* Works page */
  .service-item { padding: 0 60px 80px; gap: 48px; }

  /* Gallery page */
  .filter-bar { padding: 0 60px; }
  .gallery-section { padding: 0 60px 80px; }

  /* Company page */
  .company-section { padding: 80px 60px; }
  .map-section { padding: 60px; }

  /* Footer */
  footer { padding: 60px 60px 32px; }
}

/* ============================================================
   MOBILE  ( ~768px )
   ============================================================ */
@media (max-width: 768px) {

  /* Header — collapse nav */
  header { padding: 0 20px; }

  .nav-desktop { display: none; }

  .section-header { margin-bottom: 2rem; }

  /* Hamburger button */
  .hamburger {
    display: flex; flex-direction: column; justify-content: center;
    gap: 5px; width: 32px; height: 32px; cursor: pointer; background: none; border: none;
  }
  .hamburger span {
    display: block; width: 100%; height: 1px;
    background: var(--navy); transition: transform 0.3s, opacity 0.3s;
  }

  .hamburger[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }
  .hamburger[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }
  .hamburger[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  /* Mobile nav drawer */
  .nav-mobile {
    position: fixed; top: 72px; left: 0; right: 0; bottom: 0;
    background: rgba(247,245,240,0.97); backdrop-filter: blur(12px);
    z-index: 99; display: flex; flex-direction: column;
    align-items: center; gap: 32px;
    transform: translateX(100%); transition: transform 0.4s ease;
    padding-top: 2rem;
  }

  .nav-mobile.open { transform: translateX(0); }

  .nav-mobile a {
    font-size: 16px; letter-spacing: 0.2em; color: var(--navy);
    text-decoration: none; font-family: 'Noto Serif JP', serif;
  }

  /* Hero */
  .hero { height: 320px; padding: 0 0 40px 24px; }
  .hero--full { height: calc(60vh - 72px); padding: 0 24px; align-items: flex-end; padding-bottom: 60px; }
  .hero-catch { font-size: clamp(22px, 6vw, 32px); }

  /* Breadcrumb */
  .breadcrumb { padding: 14px 24px; }

  /* Top — Intro */
  .intro { grid-template-columns: 1fr; gap: 36px; padding: 60px 24px; }
  .intro-image { height: 260px; }

  /* Top — About strip */
  .about-strip { padding: 60px 24px; }
  .about-strip::before { display: none; }
  .about-cards { grid-template-columns: 1fr; gap: 16px; }

  /* Top — Banner */
  .banner-grid { grid-template-columns: 1fr; height: auto; }
  .banner-item { height: 200px; }

  /* Top — Gallery preview */
  .gallery-preview { padding: 60px 24px; }
  .gallery-grid { grid-template-columns: 1fr 1fr; }
  .gallery-item.featured { grid-column: span 2; }

  /* Top — Gallery preview cards */
  .gallery-preview .cards-grid { grid-template-columns: 1fr; }

  /* Top — News */
  .news-section { padding: 60px 24px; }
  .news-item {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 4px 8px;
  }
  .news-date { font-size: 14px; }
  .news-title { width: 100%; }

  /* About page */
  .page-intro { padding: 1rem 24px; }
  .page-image-wrap { padding: 0 24px 60px; }
  .page-image-inner { height: 240px; }

  .strengths { padding: 60px 24px; }
  .strengths::before { display: none; }
  .strength-item {
    grid-template-columns: 1fr; gap: 32px; padding: 48px 0;
  }
  .strength-item.reverse { direction: ltr; }
  .strength-image { height: 220px; }

  /* Works page */
  .service-item {
    grid-template-columns: 1fr; padding: 0 24px 60px; gap: 32px;
  }
  .service-item.reverse { direction: ltr; }
  .service-image { height: 240px; }

  /* Gallery page */
  .filter-bar { padding: 0 24px; flex-wrap: wrap; gap: 8px; }
  .filter-btn { padding: 8px 20px; font-size: 11px; }
  .gallery-section { padding: 0 24px 60px; }
  .gallery-grid { grid-template-columns: 1fr 1fr; gap: 2px; }
  .gallery-item.featured { grid-column: span 2; }

  /* Company page */
  .company-section { padding: 60px 24px; }
  .company-table th { width: 120px; font-size: 12px; }
  .company-table td { padding: 20px 0 20px 20px; font-size: 12px; }
  .map-section { padding: 48px 24px; }
  .map-placeholder { height: 240px; }

  /* Footer */
  footer { padding: 48px 24px 28px; }
  .footer-nav { gap: 12px; }
  .footer-address { font-size: 11px;}
}

/* ============================================================
   SMALL MOBILE  ( ~480px )
   ============================================================ */
@media (max-width: 480px) {
  .gallery-grid { grid-template-columns: 1fr; }
  .gallery-item.featured { grid-column: span 1; aspect-ratio: 4/3; }
  .about-cards { grid-template-columns: 1fr; }
  .company-table { display: block; }
  .company-table tr { display: block; padding: 20px 0; border-bottom: 1px solid var(--warm-gray); }
  .company-table th,
  .company-table td { display: block; width: 100%; padding: 4px 0; }
  .company-table th { padding-left: 0; }
  .company-table th::after { display: none; }
  .company-table th span { padding-left: 0; font-weight: 500; color: var(--gold); }
  .company-table td { padding-left: 0; color: #555; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 960px) {
  .cards-section { padding: 40px 40px 80px; }
  .cards-grid { grid-template-columns: repeat(2, 1fr); gap: 36px 20px; }
  .page-intro-center { padding: 60px 40px 16px; }
}

@media (max-width: 640px) {
  .page-intro-center { padding: 48px 24px 16px; }
  .cards-section { padding: 32px 24px 60px; }
  .cards-grid { grid-template-columns: 1fr 1fr; gap: 20px 12px; }
  .card-desc { display: none; }
  .modal { width: 96vw; }
  .thumb { width: calc(33.3% - 4px); }
}

@media (max-width: 400px) {
  .cards-grid { grid-template-columns: 1fr; }
}