/* ============================================================================
   r5-wide.css — ชั้น "จอกว้าง" (แท็บเล็ต + เดสก์ท็อป)

   ⚠️ ต้องโหลด **หลัง** app.css และ r5.css เสมอ (ดู templates/base.html)
      ไฟล์นี้ไม่แก้ดีไซน์มือถือแม้แต่จุดเดียว — ทุกกฎอยู่ใน @media (min-width)
      มือถือคือของหลัก (ร้าน/เจ้าของสัตว์เปิดจากมือถือ) ห้ามถอย

   ทำไมต้องมี (บุ๋ยแจ้ง 17 ส.ค. 2026 พร้อมภาพจาก iPad):
      เดิมจอใหญ่ = เลย์เอาต์มือถือถูกจับวางกลางจอ 520px
      หัวแถบยืดเต็มจอ · แถบเมนูล่างกาง 5 ช่องห่างกันเป็นเมตร · ที่ว่างสองข้างเปล่า

   โครงใหม่ 2 ระดับ:
      ≥700px  (แท็บเล็ต)  — คอลัมน์กว้างขึ้น + จับหัวแถบ/แถบล่างมาอยู่กลาง ไม่กางออก
      ≥1080px (เดสก์ท็อป) — แถบเมนูล่างกลายเป็น "แถบข้างซ้าย" ค้างไว้ + เนื้อหาอยู่กลาง

   ⚠️ ตัวแปรของชั้นนี้ผูกกับ body.app-shell (ตั้งใน templates/base.html)
      ฝั่งธุรกิจ/แอดมินใช้ business_base.html ที่ไม่มี class นี้ จึงไม่โดนกระทบ
      (ฝั่งธุรกิจมีโครงจอกว้างของตัวเองอยู่แล้วที่ app.css → .biz-shell)
   ============================================================================ */


/* ---------------------------------------------------------------------------
   1. แท็บเล็ต (≥700px) — iPad แนวตั้ง, จอโน้ตบุ๊กเล็ก
      ยังใช้แถบเมนูล่างเหมือนเดิม (นิ้วโป้งถึงง่ายกว่าเมนูข้างบนจอสัมผัส)
      แค่ไม่ปล่อยให้ของกางออกจนคนละมุมจอ
   --------------------------------------------------------------------------- */
@media (min-width: 700px) {
  body.app-shell .page { max-width: 660px; }

  /* หัวแถบ: โลโก้กับปุ่มเลิกไปอยู่คนละมุมจอ — ขยับมาตรงกับคอลัมน์เนื้อหาพอดี
     (660 = ความกว้างคอลัมน์ + gutter = ระยะขอบในของ .page) */
  body.app-shell > .app-header {
    padding-left: max(var(--gutter), calc((100% - 660px) / 2 + var(--gutter)));
    padding-right: max(var(--gutter), calc((100% - 660px) / 2 + var(--gutter)));
  }

  /* แถบล่าง: ตัวแถบยังเต็มความกว้าง (ตามม็อคอัพ ห้ามกลับไปเป็นเม็ดยาลอย)
     แต่ 5 ช่องถูกบีบมาอยู่กลาง ระยะห่างเท่ามือถือ */
  body.app-shell > .bottom-nav {
    padding-left: max(2px, calc((100% - 560px) / 2));
    padding-right: max(2px, calc((100% - 560px) / 2));
  }

  /* หน้าแรก — ฮีโร่ใหญ่ขึ้นตามคอลัมน์ที่กว้างขึ้น */
  .cat-grid { grid-template-columns: repeat(8, 1fr); }
  .hub-hero { column-gap: 22px; padding: 16px 0 4px; }
  .hub-hero-art { width: min(38vw, 288px); }
  .hub-hero-head { font-size: 33px; }
  .hub-hero-sub { font-size: 15px; margin-top: 12px; }

  /* แผนที่: กล่องค้นหา/ชิป ไม่ต้องยืดเต็มจอ อ่านง่ายกว่าเมื่อคุมความกว้าง
     ⚠️ ต้องคุมที่ "กล่องนอก" ไม่ใช่ลูกทีละใบ — ปุ่มสลับแผนที่/รายการเป็น inline-flex
        ใส่ margin auto ให้มันไม่ทำงาน แล้วจะเยื้องออกจากช่องค้นหาใบเดียว
     ⚠️ โหมดรายการ #controls กลายเป็น position: static — ห้ามใช้ transform กับมัน */
  .map-page:not(.list-view) #controls.map-float-top {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(760px, calc(100% - 32px));
    padding: 0;
  }
  .map-page.list-view #controls.map-float-top { max-width: 760px; margin-left: auto; margin-right: auto; }
  .map-page.list-view .place-list { max-width: 760px; margin-left: auto; margin-right: auto; }
}


/* ---------------------------------------------------------------------------
   2. เดสก์ท็อป (≥1080px) — iPad แนวนอน, จอคอม
      แถบเมนูล่าง → แถบข้างซ้ายค้างไว้ (เมาส์ไม่ได้อยู่ล่างจอเหมือนนิ้วโป้ง)
      ⚠️ ไม่ได้ย้าย DOM — เป็น <nav class="bottom-nav"> ตัวเดิม เปลี่ยนแค่ CSS
         ทำให้มือถือ/เดสก์ท็อปใช้เมนูชุดเดียวกัน ไม่มีโอกาสหลุดกันคนละชุด
   --------------------------------------------------------------------------- */
@media (min-width: 1080px) {
  body.app-shell {
    --rail-w: 236px;
    --hdr-h: 64px;
    padding-left: var(--rail-w);
    /* ไม่มีแถบล่างแล้ว — คืนที่ว่างท้ายหน้า */
    padding-bottom: 32px;
  }

  /* ---- หัวแถบ: พาดเต็มความกว้างเหนือแถบข้าง (ทรงเดียวกับ Gmail/Notion) ----
     body ถูกดันขวาไป --rail-w แล้ว จึงต้องดึงหัวแถบกลับมาชนขอบซ้าย */
  body.app-shell > .app-header {
    margin-left: calc(var(--rail-w) * -1);
    min-height: var(--hdr-h);
    padding-left: 20px;
    padding-right: 24px;
  }

  /* ---- แถบข้างซ้าย ---- */
  body.app-shell > .bottom-nav {
    top: var(--hdr-h);
    bottom: 0;
    left: 0;
    right: auto;
    width: var(--rail-w);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 3px;
    padding: 14px 12px 20px;
    border-radius: 0;
    border-right: 1px solid var(--color-border);
    border-top: 0;
    box-shadow: none;
    overflow-y: auto;
  }
  body.app-shell > .bottom-nav a {
    flex: none;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 11px;
    padding: 6px 10px;
    border-radius: 14px;
    font-weight: 600;
  }
  /* ไอคอนทุกช่องอยู่ในกล่อง 34px เท่ากันหมด ตัวหนังสือจึงเรียงตรงคอลัมน์เดียว
     ⚠️ ห้ามตั้งขนาดปุ่มกลางต่างจากช่องอื่น ไม่งั้นบรรทัด "บันทึกน้อง" เยื้องออกมาช่องเดียว */
  body.app-shell > .bottom-nav a svg {
    width: 22px;
    height: 22px;
    padding: 6px;
    box-sizing: content-box;
    border-radius: 12px;
    flex: none;
    transform: none;
  }
  body.app-shell > .bottom-nav a span { font-size: 14.5px; }
  body.app-shell > .bottom-nav a:hover { background: var(--color-surface-hover); }
  body.app-shell > .bottom-nav a.active {
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
  }
  /* ปุ่มกลาง "บันทึกน้อง" — บนแถบข้างไม่ต้องนูนขึ้นเหนือแถบ (ไม่มีแถบให้นูน)
     แต่ยังเป็นชิปส้มให้เด่นกว่าช่องอื่นเหมือนเจตนาเดิมของม็อคอัพ */
  body.app-shell > .bottom-nav a.nav-mid svg {
    margin-top: 0;
    border: 0;
    border-radius: 12px;
    box-shadow: 0 4px 12px var(--color-primary-shadow);
  }

  /* ---- เนื้อหา ----
     ค่าตั้งต้น 720px = ความกว้างที่อ่านข้อความยาวๆ และกรอกฟอร์มสบายตา
     หน้าแรกเป็นกริดการ์ด (ไม่ใช่ข้อความยาว) จึงกว้างได้กว่า — เลือกด้วย :has()
     ⚠️ ห้ามปล่อยทุกหน้ากว้าง 900px+ หน้าอย่าง "ของฉัน" จะได้ปุ่มยาวเกือบเมตร */
  body.app-shell .page { max-width: 720px; }
  body.app-shell .page:has(.hub-hero) { max-width: 920px; }
  body.app-shell .a2hs { left: 20px; right: auto; bottom: 20px; max-width: 420px; }

  /* ปุ่มหลักตั้งค่าไว้ width:100% (มือถือ = เต็มความกว้างนิ้วกดง่าย)
     บนเดสก์ท็อปคอลัมน์กว้างกว่า ปุ่มยาวทั้งแถบดูเหมือนแบนเนอร์ ไม่เหมือนปุ่ม */
  body.app-shell .page .btn { width: auto; min-width: 260px; }

  /* หน้าแรก — ที่กว้างขึ้นเอาไปให้ฮีโร่กับการ์ดคอลเลกชัน */
  /* ⚠️ ความสูงของฮีโร่มาจาก "รูป" ไม่ใช่ข้อความ — ตั้งรูปใหญ่เกินไปแล้วข้อความจะลอย
     อยู่กลางช่องว่างสูงๆ (บุ๋ยแจ้ง 23 ส.ค. 2026) จึงคุมรูปไว้ที่ 288px และดันตัวอักษรให้ใหญ่ขึ้น */
  .hub-hero { column-gap: 32px; padding: 20px 0 8px; }
  .hub-hero-art { width: 288px; }
  .hub-hero-head { font-size: 40px; }
  .hub-hero-sub { font-size: 16.5px; margin-top: 14px; }
  /* คอลเลกชันมี 4 ใบเสมอ — 3 คอลัมน์ทำให้ใบที่ 4 ตกไปอยู่แถวล่างใบเดียว
     2×2 ลงตัวพอดี และการ์ดกว้างขึ้น รูปกับข้อความหายใจได้ */
  .coll-grid { grid-template-columns: repeat(2, 1fr); }

  /* ---- แผนที่: แผงผลลัพธ์เป็นคอลัมน์ซ้ายค้างไว้ ไม่ใช่แผ่นดึงขึ้นจากล่าง ----
     บนเมาส์ไม่มีใครลากแผ่นขึ้น-ลง และจอกว้างพอให้เห็นทั้งรายการและหมุดพร้อมกัน
     ⚠️ โหมด "รายการ" (.list-view) ยังเป็นของเดิม — กฎชุดนี้จึงเว้นไว้ทั้งก้อน */
  .map-page .map-container { height: calc(100dvh - var(--hdr-h)); }
  .map-page:not(.list-view) .map-sheet,
  .map-page:not(.list-view) .map-sheet.sheet-peek,
  .map-page:not(.list-view) .map-sheet.sheet-half,
  .map-page:not(.list-view) .map-sheet.sheet-full {
    top: 0;
    bottom: 0;
    left: 0;
    right: auto;
    width: 372px;
    height: 100%;
    max-height: none;
    transform: none;
    border-radius: 0;
    border-right: 1px solid var(--color-border);
    box-shadow: 6px 0 22px rgba(0, 0, 0, .10);
  }
  .map-page:not(.list-view) #sheet-handle { cursor: default; padding: 14px 16px 8px; }
  .map-page:not(.list-view) .sheet-grip { display: none; }
  .map-page:not(.list-view) .sheet-scroll { flex: 1; padding-bottom: 16px; }
  /* กล่องค้นหา/ชิป ย้ายไปอยู่กึ่งกลาง "ฝั่งขวาของแผง" ไม่ทับแผงผลลัพธ์ */
  .map-page:not(.list-view) #controls.map-float-top {
    left: calc(372px + (100% - 372px) / 2);
    width: min(720px, calc(100% - 372px - 32px));
  }
  .map-page #use-my-location { bottom: 28px; }
  .map-page.list-view .place-list,
  .map-page.list-view #controls.map-float-top { max-width: 880px; }
}


/* ---------------------------------------------------------------------------
   3. จอกว้างมาก (≥1500px) — ไม่ปล่อยให้คอลัมน์ยืดต่อ อ่านยาก
   --------------------------------------------------------------------------- */
@media (min-width: 1500px) {
  body.app-shell .page { max-width: 760px; }
  body.app-shell .page:has(.hub-hero) { max-width: 1000px; }
}


/* ---------------------------------------------------------------------------
   4. เก็บงานจอกว้าง (23 ส.ค. 2026) — บุ๋ยแจ้งว่า "หน้าจัดวางไม่สวย เหมือนมากองๆ ที่ก็เหลือ"

   ต้นเหตุ 2 อย่างที่มองไม่ออกบนมือถือ (เพราะมือถือของเต็มจอพอดีอยู่แล้ว):
     ก. แถวเลื่อนแนวนอน (ของใช้ที่คัดมาให้ · ที่ยืนยันแล้ว · น้องของฉัน)
        บนเดสก์ท็อปกลายเป็นการ์ดใบเล็กเกาะซ้าย แล้วเหลือที่ว่างครึ่งแถว
        + เมาส์ปัดแนวนอนไม่ถนัด ทั้งที่จอกว้างพอวางให้เห็นครบอยู่แล้ว
     ข. แบนเนอร์/แถวที่เป็น <a> โดนกฎ main a{display:inline-flex} หดตามเนื้อหา
        (Noa+ · ทางเข้าธุรกิจ · ชวนเพิ่มน้อง) เลยลอยเป็นก้อนกลางที่ว่าง
   --------------------------------------------------------------------------- */
@media (min-width: 1080px) {
  /* แถวเลื่อน → กริดเต็มแถว (ไม่ต้องปัด เห็นครบในตาเดียว) */
  body.app-shell .promo-strip,
  body.app-shell .home-strip,
  body.app-shell .lv-collections,
  body.app-shell .pet-strip {
    display: grid;
    overflow: visible;
    gap: 12px;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }
  body.app-shell .promo-strip,
  body.app-shell .home-strip,
  body.app-shell .lv-collections { grid-template-columns: repeat(4, 1fr); }
  body.app-shell .pet-strip { grid-template-columns: repeat(3, 1fr); }
  /* ลูกในแถวเดิมตั้งความกว้างตายตัวไว้ (flex: 0 0 auto) — ในกริดต้องปล่อยให้ยืดเต็มช่อง */
  body.app-shell .promo-strip > *,
  body.app-shell .home-strip > *,
  body.app-shell .lv-collections > *,
  body.app-shell .pet-strip > * {
    flex: none;
    width: auto;
    min-width: 0;
    max-width: none;
  }

  /* การ์ดบริการ 4 ใบ — เดสก์ท็อปวางเรียงเดียวกันหมด (มือถือยัง 2×2 เหมือนเดิม) */
  body.app-shell .hub-svc-grid { grid-template-columns: repeat(4, 1fr); }

  /* งาน/ข่าวสาร + บทความ — การ์ดใบเดียวยาวเต็มแถวดูโล่ง วางคู่กันแน่นกว่า */
  body.app-shell .feed-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
  /* มีใบเดียว = อย่าทิ้งช่องว่างข้างๆ ให้ยืดเต็มแถวไปเลย */
  body.app-shell .feed-list:has(> :only-child) { grid-template-columns: 1fr; }

  /* คำถามที่พบบ่อย — จากการ์ดใบยาวใบเดียว เป็นการ์ดย่อย 2 คอลัมน์
     (ใบยาวเต็มแถวบนจอกว้าง = ตัวหนังสือบรรทัดเดียวลอยอยู่กลางแถบว่าง) */
  body.app-shell .faq-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    background: none;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
  }
  body.app-shell .faq-item {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    align-self: start;
  }
  body.app-shell .faq-item:last-child { border-bottom: 1px solid var(--color-border); }

  /* ⚠️ ปุ่มหลักบนเดสก์ท็อปตั้ง min-width 260px ไว้ (ปุ่มยาวๆ ในฟอร์มดูดีกว่าปุ่มจิ๋ว)
     แต่ปุ่มที่อยู่ "ในแถบเครื่องมือ" เช่นปุ่มส่งของโนอาร์ หรือปุ่มค้นหา ไม่ควรโดนด้วย
     ไม่งั้นปุ่มส่งกินพื้นที่ครึ่งช่องพิมพ์ (บุ๋ยเจอเอง 23 ส.ค. 2026) */
  body.app-shell .noa-input-bar .btn,
  body.app-shell .bk-search .btn,
  body.app-shell .home-search .btn { min-width: 0; }

  /* หน้าโนอาร์ตอนยังไม่เริ่มคุย: เนื้อหาสั้น แต่หน้าสูงเต็มจอ → ของกองอยู่ข้างบน
     เหลือที่ว่างครึ่งจอข้างล่าง จัดให้อยู่กึ่งกลางแนวตั้งแทน */
  body.app-shell .page:has(> .noa-landing) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(100dvh - var(--hdr-h) - 72px);
  }
  /* ⚠️ .noa-landing ตั้ง min-height: 100vh-220px ไว้ (มือถืออยากให้เต็มจอ)
     บนเดสก์ท็อปมันทำให้กล่องยืดจนการจัดกึ่งกลางไม่มีผล — ปลดที่นี่ที่เดียว */
  body.app-shell .page:has(> .noa-landing) > .noa-landing { min-height: 0; }
  /* แถบพิมพ์ไม่ต้อง sticky แล้ว (เดสก์ท็อปไม่มีแถบเมนูล่างให้หลบ) */
  body.app-shell .noa-landing-bar { position: static; }

  /* หน้าเติมเครดิต — 3 แพ็กต้องอยู่แถวเดียวกันให้เทียบราคาได้ในตาเดียว
     ⚠️ ของเดิมคอลัมน์กว้าง 720px ทำให้ auto-fit ได้แค่ 2 คอลัมน์ แพ็กที่ 3 (Noa+ ซึ่งเป็น
        รายได้ประจำ) ตกไปอยู่แถวล่างลำพัง ดูเหมือนของแถม (บุ๋ยแจ้ง 23 ส.ค. 2026)
     ⚠️ ห้ามใส่กรอบเน้น (is-featured) ให้ใบใดใบหนึ่ง — กรอบเน้นในหน้านี้สงวนไว้บอก
        "แพ็กที่กำลังเลือกอยู่" เท่านั้น (กฎบุ๋ย 26 ก.ค. 2026) */
  body.app-shell .page:has(.pack-grid) { max-width: 900px; }
  body.app-shell .pack-grid { grid-template-columns: repeat(3, 1fr); align-items: stretch; }
  body.app-shell .pack-grid .plan-card { height: 100%; }
  /* คู่มือ e-book — จอกว้างวางเรียงกัน 3 ใบ เห็นปกครบในตาเดียว */
  body.app-shell .upsell-grid { grid-template-columns: repeat(3, 1fr); }
  body.app-shell .offer { flex-direction: column; }
  body.app-shell .offer-cover { width: 100%; align-self: stretch; }

  /* หน้าโนอาร์ — ชิปคำถามยอดฮิตเป็นแถวเลื่อนแนวนอน พอมาจอกว้างใบท้ายโดนตัดครึ่ง
     ทั้งที่มีที่ว่างเหลือ (บุ๋ยเจอเอง 23 ส.ค. 2026) → ให้ตัดขึ้นบรรทัดใหม่แทน */
  body.app-shell .noa-chips {
    flex-wrap: wrap;
    overflow: visible;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }
  body.app-shell .noa-chip { flex: 0 1 auto; }

  /* หน้าบทความมี 120 กว่าบท — คอลัมน์เดียวบนเดสก์ท็อปยาวเป็นกิโล เลื่อนหาไม่เจอ */
  body.app-shell .page:has(.art-list) { max-width: 1000px; }
  body.app-shell .art-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
  body.app-shell .art-card { align-items: flex-start; }
}

@media (min-width: 1500px) {
  body.app-shell .page:has(.art-list) { max-width: 1180px; }
  body.app-shell .art-list { grid-template-columns: repeat(3, 1fr); }
}


/* ---------------------------------------------------------------------------
   5. ฝั่งธุรกิจบนจอกว้าง (23 ส.ค. 2026)
   หน้าแนะนำธุรกิจ (ยังไม่ล็อกอิน = ไม่มี sidebar) ถูกบีบเป็นคอลัมน์ 640px
   กลางจอ 1440px แล้วทุกอย่างจัดกลาง → การ์ดยาวๆ ที่มีข้อความสั้น ดูโหวงและไม่สมดุล
   ⚠️ ไฟล์นี้ผูกกับ body.app-shell เป็นหลัก แต่ก้อนนี้จงใจคุมฝั่ง .biz-shell
      เพราะฝั่งธุรกิจไม่มีชั้นจอกว้างของตัวเองสำหรับหน้า landing
   --------------------------------------------------------------------------- */
@media (min-width: 1080px) {
  .biz-shell:not(.has-side) .biz-wrap { max-width: 1000px; }

  /* หัวเรื่อง/ปุ่ม ยังจัดกลาง แต่คุมความกว้างบรรทัดไว้ให้อ่านสบาย (ไม่ยาวเต็ม 1000px) */
  .biz-shell:not(.has-side) .biz-hero h2,
  .biz-shell:not(.has-side) .biz-hero .small,
  .biz-shell:not(.has-side) .biz-land-instant { max-width: 720px; margin-left: auto; margin-right: auto; }

  /* รายการฟีเจอร์ 4 ข้อ — เรียงเป็น 2 คอลัมน์ ไม่ใช่แถวยาวๆ 4 แถวในกล่องกว้าง 1000px */
  .biz-shell:not(.has-side) .card:has(.biz-feature) {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 28px;
  }
  .biz-shell:not(.has-side) .card:has(.biz-feature) > h3 { grid-column: 1 / -1; }
  /* เส้นคั่นล่างของสองใบสุดท้ายไม่ต้องมี (มันคือแถวสุดท้ายของแต่ละคอลัมน์) */
  .biz-shell:not(.has-side) .biz-feature:nth-last-child(-n+2) { border-bottom: 0; }

  /* การ์ดราคา 4 แพ็ก — เรียงแถวเดียวเทียบกันได้ทันที (เดิมตก 2×2 แล้วใบ "ฟรี"
     ซึ่งมีฟีเจอร์ข้อเดียว เหลือช่องว่างครึ่งการ์ด ดูเป็นหลุม) */
  .biz-shell:not(.has-side) .plan-grid { grid-template-columns: repeat(4, 1fr); }
}