/* ==========================================================================
   responsive.css — Tablet / Mobile
   ========================================================================== */

@media (max-width: 1100px) {
  .nav a { padding: 8px 12px; }
  .strip { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .zones { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 960px) {
  .section { padding-block: 72px; }

  /* เมนูมือถือ */
  .nav-toggle { display: inline-flex; }
  .nav {
    position: absolute; top: calc(100% + 8px); left: 24px; right: 24px;
    flex-direction: column; align-items: stretch; gap: 4px;
    padding: 12px; border-radius: 24px;
    background: rgba(255,255,255,.97); border: 1px solid var(--line);
    box-shadow: var(--shadow);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .2s, transform .2s, visibility .2s;
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav a { padding: 14px 16px; font-size: 16px; }

  .hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .hero__visual { justify-self: center; max-width: 520px; }

  .bento > [class*="col-"] { grid-column: span 6; }
  .bento > .col-12 { grid-column: span 12; }

  .service-grid, .ref-grid, .contact-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery { columns: 2; }
}

@media (max-width: 640px) {
  .container { padding-inline: 16px; }
  .site-header { padding-top: 10px; }
  .site-header__bar { height: 60px; padding: 0 8px 0 14px; }
  .nav { left: 16px; right: 16px; }
  .brand__mark { width: auto; height: 34px; }
  .brand__name { font-size: 17px; }
  .brand__sub { font-size: 9.5px; }
  .lang-switch button { min-width: 36px; padding: 0 8px; }
  /* มือถือมีปุ่มโทรลอย (.fab) อยู่แล้ว ซ่อนปุ่มใน header ให้โลโก้ ภาษา และเมนูพอดีจอ */
  .header-cta { display: none; }
  .brand { min-width: 0; }

  .section { padding-block: 56px; }
  .section-head { margin-bottom: 32px; }
  .hero { padding-top: 32px; }
  .hero__lead { font-size: 16.5px; }
  .hero__actions .btn { flex: 1 1 auto; }
  .glass-tile { width: 68px; height: 68px; border-radius: 18px; }
  .glass-tile svg { width: 30px; height: 30px; }
  .glass-tile.t2, .glass-tile.t3 { width: 58px; height: 58px; }
  .hero__status { right: 4%; padding: 12px 14px; }

  .strip { padding: 24px 20px; }
  .strip__list { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: 1fr 1fr; gap: 12px; }
  .stat { flex-direction: column-reverse; align-items: flex-start; padding: 18px; }
  .stat__num { font-size: 30px; }

  .bento > [class*="col-"] { grid-column: span 12; }
  .card { padding: 24px; }
  .card__media { margin: -24px -24px 20px; }

  .service-grid, .ref-grid, .contact-grid, .zones, .steps { grid-template-columns: 1fr; }
  .gallery { columns: 2; column-gap: 10px; }
  .gallery figure { margin-bottom: 10px; border-radius: 16px; }
  .gallery figure::after { opacity: 1; background: linear-gradient(180deg, transparent 45%, rgba(6,26,48,.8)); }
  .gallery figcaption { opacity: 1; transform: none; left: 10px; right: 10px; bottom: 9px; font-size: 12.5px; line-height: 1.35; }

  .form { grid-template-columns: 1fr; }
  .cta { padding: 32px 24px; }
  .cta__actions, .cta__actions .btn { width: 100%; }

  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-top-btn { display: none; }
  .fab { display: grid; }
}