/* ==========================================================================
   responsive.css — ปรับการแสดงผลตามขนาดหน้าจอ
   ========================================================================== */

/* ---------- ≤ 1400px ---------- */
@media (max-width: 1400px) {
  .site-branding__text { display: none; }
  .main-nav__link { padding-inline: 11px; }
  .main-nav__link::after { left: 11px; right: 11px; }
}

/* ---------- ≤ 1200px ---------- */
@media (max-width: 1200px) {
  .site-header__inner { gap: 16px; }
  .main-nav__link { padding-inline: 8px; font-size: 14.5px; }
  .main-nav__link::after { left: 8px; right: 8px; }
  .type-pick { grid-template-columns: repeat(4, 1fr); }
  .offering-grid,
  .products-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- ≤ 1024px (แท็บเล็ต) ---------- */
@media (max-width: 1024px) {
  :root { --header-h: 68px; }

  .topbar__hide-md { display: none !important; }

  /* เมนูมือถือ */
  .menu-toggle { display: block; order: 3; margin-left: 0; }
  .main-nav {
    position: absolute;
    top: 100%; left: 0; right: 0;
    display: none;
    margin: 0;
    padding: 8px var(--gutter) 18px;
    background: #fff;
    border-bottom: 1px solid var(--c-line);
    box-shadow: var(--shadow);
  }
  .main-nav.is-open { display: block; }
  .main-nav__list { flex-direction: column; gap: 0; }
  .main-nav__link { padding: 12px 4px; border-bottom: 1px solid var(--c-tint); }
  .main-nav__link::after { display: none; }
  .site-header__cta { order: 2; }
  .site-branding { margin-right: auto; }

  .section { padding: 80px 0; }
  .section--roomy { padding-top: 80px; padding-bottom: 80px; }
  .split { grid-template-columns: 1fr; gap: 48px; }
  .split--roomy { gap: 48px; }
  .hero { padding: 48px 0; }
  .hero__wash {
    background-image:
      linear-gradient(to bottom, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, .5) 30%, rgba(255, 255, 255, .15) 55%, rgba(255, 255, 255, 0) 72%),
      url("../img/hero-bg.webp");
    background-size: cover, cover;
    background-position: center, center;
  }

  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .why-panel { padding: 28px; }

  .size-cards { grid-template-columns: repeat(2, 1fr); }
  .ncr-spec__ply { flex-direction: column; align-items: flex-start; gap: 20px; }
  .form-types__list { grid-template-columns: repeat(2, 1fr); }
  .offering-grid,
  .products-grid,
  .testimonial-grid { grid-template-columns: repeat(2, 1fr); }
  .clients { grid-template-columns: repeat(3, 1fr); }

  .steps { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  .steps::before { display: none; }

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

  .quote { grid-template-columns: 1fr; }
  .quote-cart { position: static; }

  .faq-wrap { grid-template-columns: 1fr; gap: 32px; }
  .faq-aside { position: static; }
  .faq-aside__media { max-width: 420px; }

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

  .cta-band { flex-direction: column; align-items: flex-start; }

  .modal__box { grid-template-columns: 1fr; }
  .modal__media { aspect-ratio: 16 / 9; min-height: 0; }
}

/* ---------- ≤ 767px (มือถือ) ---------- */
@media (max-width: 767px) {
  :root { --gutter: 16px; }

  .section { padding: 64px 0; }
  .section--tight { padding: 48px 0; }
  .section--roomy { padding-top: 64px; padding-bottom: 64px; }
  .section-head { margin-bottom: 28px; }
  .section-head--row { flex-direction: column; align-items: flex-start; }
  .quote-intro__list { flex-direction: row; flex-wrap: wrap; gap: 8px 18px; margin-top: 16px; }
  .quote-intro__list li { white-space: normal; }

  .topbar__inner { justify-content: center; }
  .topbar__hide-sm { display: none !important; }

  .site-branding img { height: 38px; }
  .site-header__cta { display: none; }
  .menu-toggle { margin-left: auto; }

  .hero { padding: 32px 0; }
  .hero__facts { gap: 18px; }
  .hero__cta .btn { flex: 1 1 auto; }
  .hero__trust { flex-direction: column; gap: 6px; }

  .why-grid { grid-template-columns: 1fr; gap: 22px; }
  .why-panel { padding: 22px; }

  .ncr-spec { padding: 20px 16px; margin-top: 40px; }
  .size-cards { grid-template-columns: 1fr 1fr; gap: 10px; }
  .ncr-spec__ply { padding: 18px; gap: 16px; }
  .ply-fan { width: 84px; height: 100px; }
  .spec-chips li { padding: 7px 12px; font-size: 13px; }
  .ncr-highlight { gap: 8px 18px; }

  .form-types__head { flex-direction: column; gap: 2px; }
  .form-types__list { grid-template-columns: 1fr; gap: 10px; }
  .offering-grid,
  .products-grid,
  .testimonial-grid { grid-template-columns: 1fr; }
  .clients { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: 1fr; row-gap: 28px; }

  .portfolio { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .portfolio__caption { font-size: 13px; }

  .panel { padding: 18px; }
  .type-pick { grid-template-columns: repeat(2, 1fr); }
  .q-grid { grid-template-columns: 1fr; }
  .q-grid .col-2, .q-grid .col-3, .q-grid .col-6 { grid-column: 1 / -1; }
  .q-foot { grid-template-columns: 1fr; }
  .q-foot__btns .btn { flex: 1; min-width: 0; }
  .quote-contact { grid-template-columns: 1fr; }

  .cta-band { padding: 30px 22px; }
  .cta-band__actions, .cta-band__actions .btn { width: 100%; }

  .site-footer__grid { grid-template-columns: 1fr; gap: 32px; padding-top: 48px; }
  .site-footer__bar-inner { flex-direction: column; justify-content: center; padding: 16px 0 84px; text-align: center; }

  .modal { padding: 0; align-items: end; }
  .modal__box { max-height: 92vh; border-radius: 20px 20px 0 0; }
  .modal__body { padding: 22px 18px 26px; }
  .modal__actions .btn { flex: 1; }

  .chat { right: 14px; bottom: 14px; }
  .chat__toggle { width: 56px; height: 56px; padding: 0; justify-content: center; }
  .chat__toggle .chat__label { display: none; }
  .chat__toggle::before { left: 34px; }
  .chat__fab { width: 46px; height: 46px; }
  .chat__window { height: calc(100vh - 110px); }
  .back-top { left: 14px; bottom: 14px; width: 42px; height: 42px; }
}