/* ==========================================================================
   Smart Cyber Tech — responsive.css
   ========================================================================== */

/* ---------- ≤ 1200px ---------- */
@media (max-width: 1200px) {
  :root { --gutter: 22px; }
  .nav__list { gap: 0; }
  .nav__link { padding: 9px 10px; font-size: .82rem; }
  .header__phone { display: none; }
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .step__body::after { display: none; }   /* กริดหลายแถวแล้ว เส้นเชื่อมจะชี้ออกนอกแถว */
  .qcard { flex-basis: 50%; }
  .footer__top { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
  .footer__news { grid-column: span 4; }
  .footer__news p { max-width: 460px; }
  .news { max-width: 460px; }
}

/* ---------- ≤ 1024px ---------- */
@media (max-width: 1024px) {
  :root { --header-h: 72px; }
  .nav { display: none; }
  .burger { display: block; }

  .hslide__content { padding-top: calc(var(--header-h) + 16px); padding-bottom: 168px; }
  .hero__stats { gap: 8px 26px; }
  .hero__stats b { font-size: 1.35rem; }
  .hero__stats span { font-size: .88rem; }   /* ป้ายกำกับ nowrap 4 คอลัมน์ ย่อลงกันล้นเมื่อคอนเทนเนอร์แคบ */

  .sec-head--split { grid-template-columns: 1fr; align-items: start; gap: 18px; }
  .about__grid,
  .faq__grid,
  .contact__grid { grid-template-columns: 1fr; }
  .about__media { max-width: 620px; }
  .about__mini { bottom: -28px; }
  /* จอเดียวคอลัมน์: ฟอร์มไม่ต้องตรึง เพราะไม่มีคอลัมน์ข้าง ๆ ให้เทียบ */
  .contact__form { position: static; }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .work-grid { grid-template-columns: repeat(2, 1fr); }
  .wcard, .wcard--wide { grid-column: span 1; }
  .price-grid { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
  .price__for { min-height: 0; }
  .price--featured { order: -1; }
}

/* ---------- ≤ 768px ---------- */
@media (max-width: 768px) {
  body { font-size: 1.02rem; }   /* ≈20.4px — ย่อจากเดสก์ท็อปเล็กน้อยตามสัดส่วนเดิม */
  .cursor { display: none; }
  .section, .cta { padding: 64px 0; }
  .sec-head { margin-bottom: 40px; }
  .quotes .sec-head { margin-bottom: 46px; }   /* 40 + 6 ชดเชย margin ติดลบของ .slider__viewport */

  .hero { min-height: 560px; }
  /* จอแคบไม่มีที่ว่างด้านซ้าย จึงคลุมขาวทั้งภาพเพื่อให้ตัวอักษรอ่านออก */
  .hslide::before {
    background:
      linear-gradient(180deg, rgba(250, 253, 255, .95) 0%, rgba(250, 253, 255, .84) 52%, rgba(250, 253, 255, .96) 100%);
  }
  .hero__stats { display: none; }
  .hero__foot-in { justify-content: center; padding-top: 18px; padding-bottom: 18px; }
  /* จอมือถือ: เนื้อหาสไลด์ยาวสุด (หัวข้อ 3 บรรทัด + คำอธิบาย 6 บรรทัด + ปุ่มเรียงสองแถว)
     เคยสูงเกินกรอบจนถูกจัดกึ่งกลางแล้วล้นขึ้นไปมุดใต้แถบเมนู 30px
     จึงบีบระยะภายในและลดขนาดคำอธิบายลง ให้สไลด์ที่ยาวที่สุดยังเหลือระยะปลอดภัยทั้งบนและล่าง */
  .hslide__content { padding-top: calc(var(--header-h) + 12px); padding-bottom: 118px; }
  .hslide .eyebrow { margin-bottom: 14px; }
  .hslide__desc { margin-top: 16px; font-size: 1rem; line-height: 1.72; }
  .hslide__cta { margin-top: 24px; gap: 10px; }
  .hslide__cta .btn { width: 100%; }

  .steps { grid-template-columns: repeat(2, 1fr); }
  .qcard { flex-basis: 100%; margin-right: 16px; }
  .why-grid { grid-template-columns: 1fr; }
  .work-grid { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .filters { gap: 8px; }
  .filters__btn { padding: 9px 15px; font-size: .86rem; }

  .footer { padding-top: 56px; }
  .footer__top { grid-template-columns: 1fr 1fr; gap: 34px; }
  .footer__brand { grid-column: span 2; }
  .footer__news { grid-column: span 2; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }

  .cookie { left: 14px; right: 14px; bottom: 14px; max-width: none; padding: 18px 20px; }
  .cookie__btns .btn { flex: 1; }
  .to-top { right: 16px; bottom: 84px; width: 46px; height: 46px; }
}

/* ---------- ≤ 620px ---------- */
@media (max-width: 620px) {
  /* เหลือเฉพาะโลโก้กับปุ่มเมนู เพื่อไม่ให้แถบบนล้นจอ */
  .header__actions .btn { display: none; }
  .logo__mark { width: 34px; height: 34px; }
  .logo__text { font-size: 1.02rem; }
}

/* ---------- ≤ 560px ---------- */
@media (max-width: 560px) {
  :root { --gutter: 18px; }
  .eyebrow { font-size: .85rem; letter-spacing: .08em; padding: 7px 15px 7px 12px; }

  /* จอแคบ+เตี้ย (เช่น 360×780) สไลด์ที่ยาวที่สุดยังพอดีเป๊ะจนไม่เหลือระยะหายใจ
     ลดพื้นขนาดหัวข้อลงหนึ่งขั้น (มีผลเฉพาะจอ <437px ที่ค่า clamp ชนพื้น) และบีบระยะรอบ ๆ อีกเล็กน้อย */
  .hslide__title { font-size: clamp(2.1rem, 1.2rem + 4.1vw, 3.75rem); }
  .hslide .eyebrow { margin-bottom: 10px; }
  .hslide__cta { margin-top: 20px; }
  .hslide__content { padding-bottom: 112px; }
  .hero__foot-in { padding-top: 16px; padding-bottom: 16px; }
  .svc-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .svc { padding: 28px 24px 26px; }
  .wcard__body { padding: 22px 22px 24px; }
  .wcard__kpi { gap: 22px; }
  .about__badge { right: 12px; bottom: 12px; padding: 12px 16px; gap: 10px; }
  .about__mini { left: 12px; bottom: 30px; width: 40%; border-width: 3px; }
  .about__badge b { font-size: 1.9rem; }
  .about__cta { gap: 16px; }
  .about__cta .btn { width: 100%; }
  .contact__form { padding: 24px 20px; }
  .cta__btns .btn { width: 100%; }
  .footer__top { grid-template-columns: 1fr; }
  .footer__brand, .footer__news { grid-column: span 1; }
}

/* ---------- จอที่มีขอบหน้ากระดาษเหลือ ---------- */
/* คอนเทนเนอร์กว้าง 1240 + ระยะยื่น 26 ต้องเหลือขอบจออีกอย่างน้อย ~8px
   ต่ำกว่า 1260px รูปเล็กจะเลยขอบจอแล้วโดนตัด จึงคืนระยะยื่นเฉพาะจอ ≥1280px */
@media (min-width: 1280px) {
  .about__mini { left: -26px; }
}

/* ---------- จอกว้างพิเศษ ---------- */
@media (min-width: 1600px) {
  :root { --container: 1340px; }
}

/* ---------- พิมพ์ ---------- */
@media print {
  .header, .mmenu, .to-top, .cookie, .preloader, .cursor,
  .scroll-progress, .hero__foot, .marquee, .slider__nav { display: none !important; }
  body { color: #000; background: #fff; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .cta, .footer { background: #fff !important; color: #000 !important; }
}