/* responsive.css · magazine grid engine v3 · CSS-ONLY · nginx-injected (after home.css).
 * SINGLE system = @media (legacy data-vw phone-mock neutralized below). Grid owner =
 * <main class="zones">. PATTERN-BASED rows: full-width blocks own their row; same-pattern
 * runs (data-cols=N, set by layout.js) tile N-up cleanly = no gaps. Full-viewport, no cap.
 * [[MAG-LAYOUT-FIX-v2]]
 *
 *   mobile ≤640      : 1 col (all full)
 *   tablet 641–1024  : full = full-width · tiles = 2-up
 *   desktop ≥1025    : full = 12 · data-cols=2 → span6 (2-up) · data-cols=3 → span4 (3-up)
 */

:root { --mag-gutter: clamp(16px, 4vw, 64px); }
html, body { overflow-x: clip; } /* clip (not hidden) → no scroll-container → position:sticky chrome survives · verified 2026-06-09 */

/* ── badge clearance (founder NOTE** 2026-06-10) · .ic-cta/.ic-acc ลอย absolute ที่
 * แถบบนของ imgcard — เนื้อหา (.ct ดันจากล่าง) ห้ามขึ้นไปทับ: จอง top strip ไว้เสมอ
 * (การ์ดเนื้อหาสั้นไม่เปลี่ยน — justify-end เดิม · การ์ดเนื้อหาสูงจะยืดการ์ดแทนการชน) */
.imgcard { padding-top: 56px !important; }

/* ── A9b "8 บริการ" (founder 2026-06-10) ──
 * 1) class ชน: `.foot` ของ page footer (home.css:485 · padding 34/70 + border-top +
 *    margin 26) ทาบ `.svc .foot` ในการ์ด → เส้นคั่น + ช่องว่างล่าง ~100px — ตัดทิ้ง
 * 2) มือถือ/แท็บเล็ต = 4×2 (เดิมถูกแล้ว · กลับมาแน่นเมื่อ foot หาย) · เดสก์ท็อป = 8×1 */
.svc .foot { padding: 0 !important; border-top: 0 !important; margin-top: 10px !important; }
@media (min-width: 1025px) {
  .svc .grid { grid-template-columns: repeat(8, 1fr) !important; }
}

/* neutralize the legacy phone-frame at ALL widths (caps · centering · border · the
 * [data-vw=desktop] .phone 2-col grid). !important beats the data-vw selectors. */
.phone {
  max-width: none !important; width: 100% !important; margin: 0 !important;
  display: block !important; border: 0 !important; border-radius: 0 !important;
  box-shadow: none !important; min-height: auto !important;
  /* display:block does NOT disable multi-column — without this the legacy
   * [data-vw=desktop] .phone{column-count:2} flows every block into 2 uneven newspaper
   * columns (pairing ungrouped blocks like before-trip|plan-routes), the "right column
   * narrower" report. Reset it so @media is the SINGLE responsive system at every width. */
  column-count: 1 !important; columns: auto !important; column-gap: normal !important;
}
[data-vw] .phone, [data-vw="desktop"] .phone { column-count: 1 !important; columns: auto !important; }

/* ── Mobile ≤640 · single column, full-bleed ── */
@media (max-width: 640px) {
  main.zones { display: block; }
  main.zones > [id^="sc-1-home-"] { width: 100%; }
  .dock { max-width: 100% !important; }
}

/* ── grid owner = <main>; shared chrome gutters; full-bleed escapes them ── */
@media (min-width: 641px) {
  .top, .cover, .contents, .access-bar, .foot { padding-left: var(--mag-gutter) !important; padding-right: var(--mag-gutter) !important; }
  main.zones {
    display: grid !important;
    align-items: stretch;            /* #2 · tiled blocks in a row share equal height */
    grid-auto-flow: row;
    padding-left: var(--mag-gutter);
    padding-right: var(--mag-gutter);
  }
  /* every NON-tile child (full blocks + .zone-rule dividers + spacers) spans the full row,
     so it never offsets a tile run — only data-cols blocks tile. #1 · all rows share the
     same L/R gutter (no edge-bleed exceptions). */
  main.zones > :not([data-cols]) { grid-column: 1 / -1; }

  /* #2 · tiled blocks: the section stretches to the row's tallest (align-items:stretch),
     and the block's MAIN card (last child — the header, if any, is the first child) fills
     that height so cards in a row look equal with NO empty gap. */
  main.zones > [data-cols] { display: flex; flex-direction: column; }
  main.zones > [data-cols] > *:last-child { flex: 1 1 auto; min-height: 0; }
  main.zones > [data-cols] > .imgcard, main.zones > [data-cols] > a.imgcard { height: 100%; }
  /* a stretched non-image card (e.g. .mice "Venue·RFP·Quote") distributes its content
     so the bottom row (the 3 cells / .steps) sits at the card bottom — no floating gap. */
  main.zones > [data-cols] > *:last-child:not(.imgcard) { display: flex; flex-direction: column; }
  main.zones > [data-cols] > *:last-child:not(.imgcard) > :last-child { margin-top: auto; }

  /* #4 (Scott 2026-06-06) · a tiled GROUP must share the exact box model of a single
     block's internal multi-col grid (.subgrid/.split/.gb-grid = 1fr/1fr gap var(--gap)
     inside var(--pad) block padding). The column-gap below is var(--gap) and each tile
     drops its CENTER-FACING block padding, so cards extend to the row midpoint — every
     2-col right card (hotel, เส้นทาง, giveback) then shares ONE left edge, every left card
     one left edge. layout.js tags data-tpos by visual position. The outer var(--pad) edge
     padding is kept so the row's outer cards align with full-width blocks. */
  main.zones > [data-cols][data-tpos="first"] { padding-right: 0 !important; }
  main.zones > [data-cols][data-tpos="last"]  { padding-left: 0 !important; }
  main.zones > [data-cols][data-tpos="mid"]   { padding-left: 0 !important; padding-right: 0 !important; }

  /* dock (bottom nav) · tablet + desktop (2026-06-06): full viewport width (drop the
     444/720/600 caps + the left:50%/translateX centering) and trim top/bottom padding
     so the bar height hugs the 54px .fab circle. mobile keeps its own 444 frame. */
  .dock {
    max-width: none !important; width: 100% !important; left: 0 !important; right: 0 !important;
    transform: none !important;
    padding-top: 5px !important;
    padding-bottom: calc(5px + env(safe-area-inset-bottom, 0)) !important;
  }
}

/* ── Tablet 641–1024 · full = full-width · tiles = 2-up ── */
@media (min-width: 641px) and (max-width: 1024px) {
  main.zones { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px var(--gap); align-items: start; }
  /* founder 2026-06-25 (NOTE** กฎถาวร): แท็บเล็ต DEFAULT = เต็มแถว 1-col
   *  → กันบีบ/ตัดบรรทัด/เหลื่อม/ช่องว่างแนวสูง · เห็นเต็มบล็อกเสมอ
   *  เนื้อหา "แน่น" (รูป/การ์ด/ขั้นตอน/แถวสด) = ค่าเริ่มต้นนี้
   * 2 คอลัมน์ "เฉพาะ" บล็อกข้อความสั้นที่ mark .tab-pair (เลือกเอง · คู่สูงเท่ากันด้วย align stretch ในกลุ่มนั้น) */
  main.zones > .block { grid-column: 1 / -1; }
  main.zones > .block.tab-pair { grid-column: span 1; }
  .cover { min-height: 52vh; }
  /* founder 2026-06-10 (มาตรฐาน): ตัวอักษรบวกแบนราบเท่ากันทุกขนาด — tablet +4px
   * สูตรระบบ = calc((ฐานเลขคู่ + var(--fsadd))*var(--fs)) · --fs ยังเป็นของ access-mode */
  :root { --fsadd: 4px; }
}

/* ── Desktop ≥1025 · 12 columns · same-pattern runs tile N-up ── */
@media (min-width: 1025px) {
  main.zones { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px var(--gap); }
  main.zones > [data-cols="2"] { grid-column: span 6; }   /* 2-up */
  main.zones > [data-cols="3"] { grid-column: span 4; }   /* 3-up */
  main.zones > [data-cols="4"] { grid-column: span 3; }   /* 4-up */
  .cover { min-height: 44vh; }
  /* founder 2026-06-10 (มาตรฐาน): เดสก์ท็อป +8px แบนราบทุกขนาด */
  :root { --fsadd: 8px; }
}