/*
  responsive.css
  รวม media queries ทั้งหมดของเว็บไซต์ ให้ navbar/footer แสดงผลถูกต้องทุกขนาดจอ
  ลำดับ breakpoint: Tablet (1024px) -> iPad/Tablet เล็ก (768px) -> มือถือ (480px)
*/

/* ---------- แท็บเล็ตแนวนอน / จอเล็กลงมา (<=1024px) ---------- */
@media (max-width: 1024px) {
  .navbar-menu {
    gap: var(--spacing-sm);
  }

  .footer-grid {
    gap: var(--spacing-md);
  }

  /* ลดจำนวนคอลัมน์ของกริดในหน้าหลักให้ไม่อัดแน่นเกินไปบนจอแท็บเล็ต */
  .why-grid,
  .category-grid,
  .product-grid,
  .article-grid,
  .promo-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* แถบเลื่อนสินค้าแนะนำ: โชว์ทีละ 2 การ์ดบนแท็บเล็ต (การ์ดจริง + skeleton กว้างเท่ากัน) */
  .product-carousel-track .product-card,
  .product-carousel-track .skeleton-card {
    flex: 0 0 calc((100% - var(--spacing-md)) / 2);
  }

  /* แถบเลื่อนรีวิว: โชว์ทีละ 2 ใบบนแท็บเล็ต (หักช่องไฟ 1 ช่องด้วยตัวแปร gap เดียวกับ track ให้พอดี 2 ใบ)
     ใช้ selector คู่ให้ specificity เท่ากฎ desktop เพื่อ override ได้ถูกจุด */
  .product-carousel-track.reviews-track .review-card,
  .product-carousel-track.reviews-track .review-skeleton {
    flex: 0 0 calc((100% - var(--review-carousel-gap)) / 2);
  }

  /* หน้าสินค้า: ยุบ sidebar มาอยู่บนกริดสินค้า (คอลัมน์เดียว) และลดกริดสินค้าเหลือ 2 คอลัมน์ */
  .products-layout {
    grid-template-columns: 1fr;
  }

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

/* ---------- แท็บเล็ต / iPad แนวตั้ง (<=768px) ---------- */
@media (max-width: 768px) {
  /* ย่อเมนูกลางเป็น hamburger */
  .navbar-toggle {
    display: flex;
  }

  .navbar-menu {
    position: fixed;
    top: var(--navbar-height);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background-color: var(--color-dark);
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-base);
  }

  /* สถานะเมนูเปิดบนมือถือ */
  .navbar-menu.is-open {
    max-height: 400px;
    box-shadow: var(--shadow-navbar);
  }

  .navbar-menu a {
    width: 100%;
    padding: var(--spacing-sm);
    border-bottom: 1px solid var(--color-dark-soft);
  }

  .navbar-menu a.active {
    border-bottom: 1px solid var(--color-dark-soft);
    background-color: var(--color-dark-soft);
  }

  /* ปุ่ม LINE ใน navbar เหลือแค่ไอคอนตั้งแต่โหมด hamburger เพื่อให้ navbar สะอาด ไม่เบียด hamburger
     (ปุ่ม LINE ในแถบ LINE ก่อน footer ยังโชว์ข้อความเต็มเพราะเป็น CTA หลัก)
     หมายเหตุ: ช่องค้นหาเป็นแค่ไอคอน toggle แล้ว จึงไม่กินพื้นที่ navbar อีก — แผงค้นหาเด้งลงเต็มความกว้างใต้ navbar */
  .navbar-actions .btn-line span {
    display: none;
  }

  /* ย่อโลโก้และข้อความใต้โลโก้ให้เล็กลงบนแท็บเล็ต (ค่าอยู่ใน variables.css) */
  .navbar-brand-logo {
    height: var(--logo-navbar-height-tablet);
  }

  .navbar-brand-text {
    font-size: 0.62rem;
  }

  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md) var(--spacing-sm);
  }

  /* Hero จอ tablet: ลดความสูงลงพอดี ภาพยังคมและโลโก้มุมบนขวายังอยู่ในเฟรม (ค่าอยู่ใน variables.css) */
  .hero {
    min-height: var(--hero-height-tablet);
  }

  /* จอแคบ: เรียงลงแนวตั้งทีละกลุ่ม (ไอคอน+ข้อความ / ปุ่ม / QR) จัดกึ่งกลางทั้งหมด */
  .line-banner-inner {
    flex-direction: column;
    justify-content: center;
  }

  .line-banner-left {
    flex-direction: column;
  }

  /* หน้าติดต่อเรา: กล่อง LINE เรียงแนวตั้ง (ข้อความบน / QR ล่าง) จัดกึ่งกลางทั้งหมด */
  .contact-line {
    flex-direction: column;
    text-align: center;
  }

  .contact-line-info {
    flex-basis: auto;
    text-align: center;
  }

  .contact-line-text {
    margin-inline: auto;  /* ข้อความอยู่กึ่งกลางเมื่อกล่องเป็นแนวตั้ง */
  }

  /* หน้าสินค้า: sidebar ยุบเป็นปุ่มกดเปิด/ปิด (ค่าเริ่มต้นปิดไว้ ประหยัดพื้นที่บนมือถือ) */
  .products-sidebar-toggle {
    display: flex;
    margin-bottom: var(--spacing-sm);
  }

  .products-sidebar-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-base);
  }

  .products-sidebar-body.is-open {
    max-height: 600px;
  }

  /* หน้ารายละเอียดสินค้า: ยุบ 2 คอลัมน์เป็นคอลัมน์เดียว รูปอยู่บน ข้อมูลอยู่ล่าง */
  .product-detail-layout {
    grid-template-columns: 1fr;
  }

  /* จอเล็ก (คอลัมน์เรียงบน-ล่าง): ปิด sticky ให้รูปสินค้าเลื่อนไปตามปกติ ไม่ลอยค้าง */
  .product-gallery {
    position: static;
  }
}

/* ---------- มือถือ (<=480px): ขยายระบบขนาดตัวอักษรทั้งเว็บ (accessibility) ----------
   แทนค่าตัวแปร --font-size-* ด้วยชุด "มือถือ" ที่ตั้งไว้ใน variables.css
   วิธีนี้ทำให้ทุกองค์ประกอบที่อ้างอิงตัวแปรเหล่านี้ (เนื้อหา/หัวข้อ/ปุ่ม/การ์ด/ราคา)
   ใหญ่ขึ้นพร้อมกันแบบสมส่วน ในระบบเดียว โดยไม่ต้องไล่แก้ font-size ทีละจุด
   responsive.css โหลดหลัง variables.css จึง override ค่าเดิมได้ */
@media (max-width: 480px) {
  :root {
    --font-size-xs: var(--font-size-xs-mobile);
    --font-size-sm: var(--font-size-sm-mobile);
    --font-size-base: var(--font-size-base-mobile);
    --font-size-lg: var(--font-size-lg-mobile);
    --font-size-xl: var(--font-size-xl-mobile);
    --font-size-xxl: var(--font-size-xxl-mobile);
  }
}

/* ---------- มือถือ (<=480px) ---------- */
@media (max-width: 480px) {
  .navbar-inner {
    padding-inline: var(--spacing-xs);
  }

  /* แถบความน่าเชื่อถือบนมือถือ: เรียง 3 รายการเป็นแนวตั้ง แต่ละอันเต็มความกว้าง 1 บรรทัด
     (ไอคอนซ้าย + ข้อความขวา) เพิ่มช่องไฟระหว่างแถวให้โปร่ง อ่านง่าย ไม่อัดกันเหมือนแบบ 2 คอลัมน์เดิม
     บน desktop/tablet ยังคงเรียงแนวนอนตามเดิม */
  .product-trust-list {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: var(--trust-list-row-gap-mobile);
  }

  /* ไอคอนใหญ่ขึ้นให้สมส่วนกับตัวอักษรที่ขยายบนมือถือ */
  .product-trust-item i {
    font-size: var(--trust-item-icon-size-mobile);
  }

  /* จอแคบมาก: ย่อโลโก้และข้อความใต้โลโก้ให้เล็กลงอีก แต่ยังแสดงครบ (ค่าอยู่ใน variables.css) */
  .navbar-brand-logo {
    height: var(--logo-navbar-height-mobile);
  }

  .navbar-brand-text {
    font-size: 0.58rem;
  }

  /* ปุ่มทั่วเว็บบนจอแคบ: ลด padding แนวนอนลงอีกนิด ไม่ให้ดูอึดอัดเมื่อเต็มความกว้าง */
  .btn {
    padding: 0.55rem 1.1rem;
  }

  .footer {
    padding-block: var(--spacing-md) var(--spacing-sm);
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }

  .footer-social {
    justify-content: flex-start;
  }

  /* จอมือถือ: ทุกกริดของหน้าหลักเรียงลงเป็นแนวตั้งคอลัมน์เดียว */
  .section {
    padding-block: var(--spacing-lg);
  }

  .why-grid,
  .category-grid,
  .product-grid,
  .article-grid,
  .promo-grid {
    grid-template-columns: 1fr;
  }

  /* หน้าสินค้าบนมือถือ: การ์ดเรียงคอลัมน์เดียว อ่านง่าย ไม่อึดอัด */
  .products-grid {
    grid-template-columns: 1fr;
  }

  /* แถบเลื่อนสินค้าแนะนำบนมือถือ: โชว์การ์ดเกือบเต็มจอ เผยขอบการ์ดถัดไปนิดหน่อยเป็นคำใบ้ว่าปัดเลื่อนได้
     (กว้าง 90% แทน 82% เดิม เพื่อให้ปุ่ม "ดูรายละเอียดสินค้า" มีที่พอสำหรับข้อความบรรทัดเดียว) */
  .product-carousel-track .product-card,
  .product-carousel-track .skeleton-card {
    flex: 0 0 90%;
  }

  /* แถบเลื่อนรีวิวบนมือถือ: โชว์ทีละ 1 ใบ "เต็มความกว้าง" ของแถว (ไม่เผยใบถัดไปครึ่งใบให้ดูเลอะ)
     ใบถัดไปถูกดันพ้นจอด้วยช่องไฟ (gap) เห็นเฉพาะตอนปัดเลื่อน — สะอาด เรียบร้อย */
  .product-carousel-track.reviews-track .review-card,
  .product-carousel-track.reviews-track .review-skeleton {
    flex: 0 0 100%;
  }

  /* ปุ่มในการ์ดสินค้าบนจอแคบ: บีบ padding แนวนอนอีกขั้นให้ข้อความไม่ตกบรรทัด */
  .product-card .btn {
    padding-inline: 0.55rem;
  }

  .carousel-btn {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }

  /* Hero จอ mobile: ลดความสูงอีกเล็กน้อย จอแคบครอปด้านซ้าย (พื้นทุ่ง) แต่โลโก้+เกษตรกรฝั่งขวายังอยู่ครบ (ค่าอยู่ใน variables.css) */
  .hero {
    min-height: var(--hero-height-mobile);
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-actions .btn {
    justify-content: center;
  }

  /* มือถือ: ย่อ QR ลงเล็กน้อยจากเดสก์ท็อป แต่ยังต้องใหญ่พอสแกนง่าย */
  .line-banner-qr {
    width: 130px;
    height: 130px;
  }

  /* หน้าติดต่อเรา บนมือถือ ---------- */
  /* การ์ดช่องทางติดต่อเรียงคอลัมน์เดียว อ่านง่าย กดง่าย */
  .contact-methods {
    grid-template-columns: 1fr;
  }

  /* ปุ่ม LINE เต็มความกว้างกล่อง แตะง่ายเต็มนิ้ว */
  .contact-line-btn {
    width: 100%;
  }

  /* ย่อ QR ในกล่อง LINE ลง แต่ยังใหญ่พอสแกน (ค่าอยู่ใน variables.css) */
  .contact-qr {
    width: var(--contact-qr-size-mobile);
    height: var(--contact-qr-size-mobile);
  }

  /* ส่วน "ติดตามเรา" บนมือถือ: บังคับไอคอน social ให้อยู่กึ่งกลาง
     (ทับกฎ .footer-social { justify-content: flex-start } ของ footer ที่ใช้ class ร่วมกัน — วางไว้ทีหลังจึงชนะด้วย source order) */
  .contact-follow-social {
    justify-content: center;
  }

  /* ลดความสูงแผนที่ลงบนมือถือ ไม่ให้กินจอมากเกินไป */
  .contact-map iframe {
    height: var(--contact-map-height-mobile);
  }
}