/* ─────────────────────────────────────────────────────────────────────
   print.css — กติกาสำหรับ "พิมพ์ / บันทึกเป็น PDF" เท่านั้น
   โหลดด้วย media="print" จึงไม่มีผลใด ๆ กับหน้าจอ

   ขนาดหน้า A4 แนวนอน เพราะงานออกแบบต้นฉบับเป็นสัดส่วนแนวนอน (1330×734)
   ถ้าใช้ A4 แนวตั้ง ความกว้างจะเหลือ ~794px ซึ่งจะไปเข้าเงื่อนไข
   @media(max-width:900px) แล้วกลายเป็นเลย์เอาต์มือถือ
   ───────────────────────────────────────────────────────────────────── */

@page { size: 297mm 210mm; margin: 0; }

/* พิมพ์สีพื้นและภาพทั้งหมด ไม่ใช่แค่ตัวอักษร */
*, *::before, *::after {
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

html, body { overflow: visible !important; background: #fff; }

/* ── สิ่งที่มีไว้กดบนหน้าจอ ไม่มีความหมายบนกระดาษ ───────────────── */
.skip,
.nav,                 /* แถบเมนู: ลอยทับภาพ/ติดขอบบน ใช้กับกระดาษไม่ได้ */
.sys__btn,            /* ปุ่มลิงก์ไปหน้าอื่น */
.back,                /* ← กลับไปหน้าเปรียบเทียบระบบ */
.form,                /* ฟอร์มกรอกข้อมูล กรอกบน PDF ไม่ได้ */
.msg,
.cta__row a[href^="#"] { display: none !important; }

/* บล็อกที่ซ่อนไว้บนหน้าจอ ให้โผล่เฉพาะตอนพิมพ์ */
.printonly[hidden] { display: block !important; }

a { color: inherit; text-decoration: none; }

/* ── หน้าปก: ภาพฮีโร่เต็มหน้ากระดาษพอดี ───────────────────────── */
.hero {
  aspect-ratio: auto !important;
  height: 210mm !important;
  break-after: page;
}

/* ── จุดตัดหน้า ──────────────────────────────────────────────── */
h1, h2, h3 { break-after: avoid; }
img, figure { break-inside: avoid; }

.block, .tagline, .band,
.std, .stats > div, .shots,
.sys, .port__cards article, .res, .svc, .ai__in,
.quote__in, .foot,
.masthead, .anchor, .walk__intro, .step, .note, .cta {
  break-inside: avoid;
}

.std, .quote, .walk { break-before: page; }

/* ── หัวกระดาษของหน้ารายละเอียดระบบ (แทนแถบเมนูที่ซ่อนไป) ──────── */
.brandline[hidden] {
  margin-bottom: 26px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .04em;
  color: #fff;
}
.brandline[hidden] span { font-weight: 300; opacity: .74; }

/* ── กล่องติดต่อที่ใช้แทนฟอร์มบนกระดาษ ────────────────────────── */
.q-contact[hidden] {
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 14px;
  padding: 26px 28px;
  color: #fff;
  line-height: 1.95;
}
.q-contact[hidden] h3 { font-size: 19px; font-weight: 600; margin-bottom: 10px; }
.q-contact[hidden] p  { font-size: 15.5px; }
.q-contact[hidden] b  { font-weight: 500; color: rgba(255, 255, 255, .72); }

/* ── หนึ่งหัวข้อ หนึ่งหน้า ────────────────────────────────────────
   ต้นฉบับเป็นสไลด์ Canva แนวนอน บนกระดาษจึงคืนรูปแบบนั้น
   แต่ละหัวข้อขึ้นหน้าใหม่ ยืดเต็มแผ่น และจัดเนื้อหาไว้กลางหน้า
   ไม่เช่นนั้นแถบสีจะจบกลางหน้าแล้วเหลือขอบขาวครึ่งแผ่น
   ─────────────────────────────────────────────────────────────── */
.std, .sys, .port, .res, .svc, .ai, .wrap:has(> .stats) {
  min-height: 210mm;
  display: flex;
  align-items: center;
  break-before: page;
}
.std { align-items: stretch; }               /* ภาพซ้ายเต็มความสูงหน้า */
.std > .std__in,
.sys > .wrap, .port > .wrap, .res > .wrap, .ai > .wrap { flex: 1; min-width: 0; }

.svc, .wrap:has(> .stats) { flex-direction: column; justify-content: center; }
.svc > *, .wrap:has(> .stats) > * { width: 100%; }

.ai__in { padding-bottom: 0; }
.shots { padding-bottom: 0; }

.quote { break-before: page; }               /* ส่วนท้ายตามมาในหน้าเดียวกัน */

/* ── หน้ารายละเอียดระบบ (ongrid / hybrid / offgrid) ──────────────── */
.masthead, .anchor { min-height: 210mm; display: flex; align-items: center; }
.masthead > .wrap, .anchor > .wrap { flex: 1; min-width: 0; }
.anchor { break-before: page; }

/* แผนภาพต้องอยู่หน้าเดียวกับคำอธิบายสี จึงจำกัดความสูงไว้ */
.anchor figure img {
  max-height: 166mm;
  width: auto;
  max-width: 100%;
  margin-inline: auto;
}

.sec { break-inside: avoid; }
.walk + .sec { break-before: page; }        /* หมายเหตุ + ปุ่มติดต่อ + ส่วนท้าย = หน้าปิดท้าย */