/* ============================================================
   EDITORIAL — TONE PATCH (rev.5)
   ปรับตามคำขอลูกค้า
     · ตัดปุ่ม Request a Quote และฟอร์มกรอกข้อมูลออกทั้งหมด
     · ส่วน Contact เป็นแผงช่องทางติดต่อโดยตรง กดโทร/ส่งอีเมลได้ทันที
     · footer ไล่เฉดต่อเนื่องจากสี Contact ไม่มีรอยต่อกระชาก

   บันไดโทนสีของหน้านี้ (ไล่จากบนลงล่าง)
     01 Hero        #F2EFE9  กระดาษอุ่น
     02 About       #F2EFE9  กระดาษอุ่น
     03 Principles  #E8E2D7  ทราย
     04 Solutions   #F2EFE9  กระดาษอุ่น
     05 Engineering #232C38  น้ำเงินหมึก
     06 Projects    #F2EFE9  กระดาษอุ่น
     07 Contact     #182029 → #131A22
     Footer         #131A22 → #0F151C

   ต้องโหลดไฟล์นี้ต่อท้าย editorial.css เสมอ
   ============================================================ */

:root {
  /* ---- บันไดโทนสว่าง ---- */
  --ed-paper:      #F2EFE9;
  --ed-paper-tint: #E8E2D7;
  --ed-paper-card: #FBFAF7;
  --ed-stone:      #D5CCBE;

  /* ---- บันไดโทนเข้ม ---- */
  --ed-ink:        #232C38;
  --ed-ink-deep:   #182029;
  --ed-ink-bridge: #131A22;
  --ed-ink-black:  #0F151C;

  /* ---- ตัวอักษรบนพื้นเข้ม ---- */
  --ed-on-dark:       #EBE7DF;
  --ed-on-dark-muted: rgba(235, 231, 223, .60);
  --ed-on-dark-faint: rgba(235, 231, 223, .34);
  --ed-accent-dark:   #C6A868;

  --line-color: rgba(14, 15, 17, .13);
}

/* ============================================================
   1) พื้นหลังกระดาษอุ่น + เส้นกริด
   ============================================================ */
html { background: var(--ed-paper); }

body.ed::before {
  background-image: linear-gradient(90deg, rgba(14,15,17,.055) 1px, transparent 1px);
}

.ed-topbar { background: var(--ed-paper); }
.ed-header.is-solid {
  background: rgba(242, 239, 233, .94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.ed-hero { background: var(--ed-paper); }
.ed-section {
  background: var(--ed-paper);
  border-top: 1px solid var(--ed-stone);
  padding-block: clamp(72px, 8.5vw, 136px);
}
.ed-section--tint { background: var(--ed-paper-tint); }

.ed-figure__media { background: var(--ed-paper-tint); }
.ed-figure__media--paper { background: var(--ed-paper-card); }
.ed-works .project__media { background: var(--ed-paper-tint); }
.ed-hero__band { background: var(--ed-paper-tint); }
.ed-hero__foot { border-top-color: var(--ed-stone); }
.ed-eng__figure { margin-top: 0; }

/* ============================================================
   2) ซ่อนปุ่มขอใบเสนอราคาทุกจุด (เผื่อมีตกค้างในไฟล์อื่น)
   ============================================================ */
.ed-header .header__quote,
.ed-header .ed-quote,
.ed .mobile-menu__cta,
.ed-inquiry { display: none !important; }

/* ช่องทางติดต่อในเมนูมือถือ (แทนที่ปุ่ม CTA เดิม) */
.mobile-menu__contact {
  display: flex; flex-direction: column; gap: 10px;
  padding-top: var(--sp-3); border-top: 1px solid var(--ed-stone);
}
.mobile-menu__contact a { font-size: 1rem; color: var(--c-graphite); }
.mobile-menu__contact a:hover { color: var(--c-accent); }

/* ============================================================
   3) ENGINEERING — บล็อกสีเข้มกลางหน้า
   ============================================================ */
.ed-section--dark {
  background: var(--ed-ink);
  color: var(--ed-on-dark);
  border-top-color: rgba(255, 255, 255, .10);
}
.ed-section--dark .ed-index { color: var(--ed-accent-dark); border-bottom-color: rgba(255,255,255,.22); }
.ed-section--dark .ed-side__label { color: var(--ed-on-dark-muted); }
.ed-section--dark .ed-display { color: var(--ed-on-dark); }
.ed-section--dark .ed-lead { color: var(--ed-on-dark-muted); }
.ed-section--dark .ed-sub { color: var(--ed-on-dark-muted); border-bottom-color: rgba(255,255,255,.16); }

.ed-section--dark .ed-figure__media--paper {
  background: var(--ed-paper-card);
  border-color: rgba(255, 255, 255, .14);
}
.ed-section--dark .ed-eng__media figcaption,
.ed-section--dark .ed-figure figcaption {
  color: var(--ed-on-dark-muted);
  border-top-color: rgba(255, 255, 255, .16);
}
.ed-section--dark .ed-figure__num { color: var(--ed-accent-dark); }
.ed-section--dark .ed-eng__items { color: var(--ed-on-dark); }

.ed-section--dark .ed-timeline .timeline__step { border-left-color: rgba(255,255,255,.18); }
.ed-section--dark .ed-timeline .timeline__step::before {
  border-color: var(--ed-accent-dark); background: var(--ed-ink);
}
.ed-section--dark .ed-timeline .timeline__num { color: var(--ed-accent-dark); }
.ed-section--dark .ed-timeline .timeline__step h4 { color: var(--ed-on-dark); }

/* ============================================================
   4) CONTACT — แผงช่องทางติดต่อ (ไม่มีฟอร์มแล้ว)
   ============================================================ */
.ed-section--deep {
  background: linear-gradient(
    180deg,
    var(--ed-ink-deep) 0%,
    var(--ed-ink-deep) 78%,
    var(--ed-ink-bridge) 100%
  );
  color: var(--ed-on-dark);
  border-top-color: rgba(255, 255, 255, .08);
}
.ed-section--deep .ed-index { color: var(--ed-accent-dark); border-bottom-color: rgba(255,255,255,.22); }
.ed-section--deep .ed-side__label { color: var(--ed-on-dark-muted); }
.ed-section--deep .ed-display { color: var(--ed-on-dark); }
.ed-section--deep .ed-lead { color: var(--ed-on-dark-muted); }

/* วางแผงติดต่อคู่กับแผนที่ */
.ed-contact {
  display: grid; grid-template-columns: 6fr 6fr;
  gap: clamp(40px, 6vw, 88px); align-items: start;
  margin-top: clamp(48px, 6vw, 80px);
}
@media (max-width: 992px) { .ed-contact { grid-template-columns: 1fr; } }

/* ---- รายการช่องทางติดต่อ: กดได้ทั้งแถว ---- */
.ed-reach { border-top: 1px solid rgba(255, 255, 255, .16); }

.ed-reach__item {
  display: grid; grid-template-columns: 1fr; gap: 6px;
  padding: clamp(20px, 2.6vw, 28px) 0;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  transition: padding-left var(--dur-2) var(--ease), color var(--dur-1) var(--ease);
}
a.ed-reach__item:hover { padding-left: 12px; }

.ed-reach__label {
  font-size: .75rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ed-on-dark-muted);
}
html[lang="th"] .ed-reach__label, html[lang="zh"] .ed-reach__label {
  text-transform: none; letter-spacing: .04em; font-size: .8125rem;
}

.ed-reach__value {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.25rem, 2.2vw, 1.75rem); line-height: 1.25;
  color: var(--ed-on-dark);
  transition: color var(--dur-1) var(--ease);
  word-break: break-word;
}
a.ed-reach__item:hover .ed-reach__value { color: var(--ed-accent-dark); }

/* ที่อยู่: ตัวเล็กกว่า อ่านเป็นย่อหน้า ไม่ใช่ลิงก์ */
.ed-reach__value--sm {
  font-family: var(--font-body); font-size: .9375rem; line-height: 1.7;
  color: var(--ed-on-dark-muted); max-width: 42ch;
}
.ed-reach__item--static { cursor: default; }

/* ---- แผนที่ ---- */
.ed-contact__map .map {
  margin-top: 0; border: 1px solid rgba(255, 255, 255, .14); overflow: hidden;
}
.ed-map iframe {
  width: 100%; height: clamp(320px, 42vh, 460px); border: 0;
  filter: grayscale(1) contrast(.9) brightness(.86);
}

@media (prefers-reduced-motion: reduce) {
  a.ed-reach__item:hover { padding-left: 0; }
}

/* ============================================================
   5) FOOTER — รับช่วงสีต่อจาก Contact แบบไร้รอยต่อ
   ============================================================ */
.ed-footer {
  position: relative;
  background: linear-gradient(
    180deg,
    var(--ed-ink-bridge) 0%,
    #111820 42%,
    var(--ed-ink-black) 100%
  );
  color: var(--ed-on-dark-muted);
  border-top: 0;
  padding-top: clamp(64px, 8vw, 112px);
}
.ed-footer::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 120px;
  background: linear-gradient(180deg, var(--ed-ink-bridge) 0%, rgba(19, 26, 34, 0) 100%);
  pointer-events: none;
}
.ed-footer > .container { position: relative; z-index: 1; }

.ed-footer h3 { color: var(--ed-on-dark); }
.ed-footer__nav a:hover,
.ed-footer__addr a:hover { color: var(--ed-accent-dark); }
.ed-footer__mark { -webkit-text-stroke-color: rgba(235, 231, 223, .15); }
.ed-footer__legal { border-top-color: rgba(255, 255, 255, .10); }
.ed-footer__legal p:last-child { color: var(--ed-on-dark-faint); }

/* ============================================================
   6) เก็บรายละเอียดให้ทั้งหน้าดูมีน้ำหนัก
   ============================================================ */
.ed-hero__title { font-weight: 400; color: #14181D; }
.ed-display { font-weight: 400; color: #14181D; }
.ed-cols p, .ed-types, .ed-cap p, .ed-value__body p { color: #3A3E42; }

.ed-value__letter { -webkit-text-stroke-color: var(--ed-stone); }
.ed-value:hover { background: rgba(255, 255, 255, .55); }

.ed-caps, .ed-values { border-top-color: var(--ed-stone); }
.ed-cap, .ed-value { border-bottom-color: var(--line-color); }
.ed-table .ctable thead th { border-bottom-color: #4A4F55; }

.ccard { background: var(--ed-paper-card); }
.ccard--accent { background: var(--ed-paper-tint); border-color: var(--ed-stone); }

.ed .filter { border-color: var(--line-color); }
.ed .filter.is-active { background: var(--ed-ink); border-color: var(--ed-ink); }

.ed .to-top { background: var(--ed-ink); }
.ed .to-top:hover { background: var(--ed-ink-black); }

.scroll-progress span { background: var(--ed-accent-dark); }
.ed .mobile-menu { background: var(--ed-paper); }
/* ============================================================
   7) rev.6 — แก้การแสดงผล
   ============================================================ */

/* 7.1 เส้นกริดพื้นหลัง
   เดิมวาดไว้ที่ body::before แต่ทุก section มีพื้นสีทึบทับจนมองไม่เห็น
   ย้ายมาวาดเป็นพื้นหลังของแต่ละ section โทนสว่างโดยตรง */
body.ed::before { display: none; }
.ed-hero,
.ed-section:not(.ed-section--dark):not(.ed-section--deep) {
  background-image: linear-gradient(90deg, rgba(14, 15, 17, .045) 1px, transparent 1px);
  background-size: calc(100% / 6) 100%;
}
@media (max-width: 768px) {
  .ed-hero,
  .ed-section:not(.ed-section--dark):not(.ed-section--deep) { background-image: none; }
}

/* 7.2 ข้อความท้าย footer สองฝั่งไม่ตรงแนว
   สาเหตุ: กฎ p + p { margin-top } ใน typography.css ดันย่อหน้าที่สองลง */
.ed-footer__legal { align-items: baseline; }
.ed-footer__legal p + p { margin-top: 0; }

/* 7.3 บรรทัดข้อมูลกำกับใน Hero ชิดกันเป็นกลุ่มเดียว */
.ed-meta__line + .ed-meta__line { margin-top: 2px; }

/* 7.4 ประเภทงานบนมือถือ: เรียงเป็นรายการ ไม่ให้เครื่องหมาย / ตกไปขึ้นบรรทัดใหม่ */
@media (max-width: 768px) {
  .ed-types { flex-direction: column; align-items: flex-start; gap: 6px; }
  .ed-types .ed-slash { display: none; }
}

/* 7.5 หัวหน้าผลงานรวม (projects.html) */
.ed-pagehead { padding-block: clamp(56px, 7vw, 104px) clamp(40px, 5vw, 64px); border-top: 0; }
.ed-pagehead .ed-works { margin-top: 0; }
.ed-section--flush { padding-top: 0; border-top: 0; }

/* 7.6 การตัดบรรทัดหัวข้อ 3 ภาษา
   - ไทย: i18n.js ห่อวลีด้วย .phrase ให้ขึ้นบรรทัดใหม่เฉพาะระหว่างวลี
   - จีน: ความกว้างเดิมวัดเป็น ch (ความกว้างอักษรละติน) แคบเกินสำหรับอักษรจีน
          และเปิด balance ไม่ให้เหลืออักษรตัวเดียวค้างบรรทัดสุดท้าย */
.phrase { display: inline-block; }
.ed-hero__title, .ed-display, .ed-quote-block p { text-wrap: balance; }
.ed-lead, .ed-cols p { text-wrap: pretty; }
html[lang="zh"] .ed-display { max-width: 15em; }
html[lang="zh"] .ed-quote-block p { max-width: 17em; }

/* 7.7 หัวข้อภาษาจีน: ขึ้นบรรทัดใหม่เฉพาะหลังเครื่องหมายวรรคตอน
   และตรงจุดตัดวลีที่มองไม่เห็น (​ ในไฟล์ zh.json) ไม่ตัดกลางคำ
   ถ้าวลีใดยาวเกินจอจริง ๆ overflow-wrap จะตัดให้ ไม่ล้นจอ */
html[lang="zh"] .ed-hero__title,
html[lang="zh"] .ed-display,
html[lang="zh"] .ed-quote-block p {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* ============================================================
   8) rev.8 — ตัด section Contact ออก / ย้ายแผนที่ลง footer
   footer ทำหน้าที่เป็นปลายทางของเมนู "Contact" (id="contact")
   ============================================================ */
.ed-footer { scroll-margin-top: 76px; }

/* wordmark ซ้าย + แผนที่ขวา อยู่แถวเดียวกัน */
.ed-footer__bottom {
  display: grid; grid-template-columns: 1fr auto;
  align-items: end; gap: var(--gutter);
  padding-bottom: clamp(24px, 3vw, 48px);
}
.ed-footer__bottom .ed-footer__mark { padding-bottom: 0; overflow: hidden; }

.ed-footer__map {
  width: clamp(300px, 30vw, 420px);
  border: 1px solid rgba(255, 255, 255, .14);
  overflow: hidden;
}
.ed-footer__map iframe {
  display: block; width: 100%; height: clamp(200px, 17vw, 240px); border: 0;
  filter: grayscale(1) contrast(.9) brightness(.86);
}

/* จอเล็ก: แผนที่เต็มความกว้าง อยู่เหนือ wordmark */
@media (max-width: 992px) {
  .ed-footer__bottom { grid-template-columns: 1fr; gap: var(--sp-4); }
  .ed-footer__map { width: 100%; order: -1; }
  .ed-footer__map iframe { height: 260px; }
}

/* ============================================================
   9) rev.9 — ฟอร์มติดต่อบนพื้นเข้มของ footer
   ช่องกรอกแบบเส้นใต้เส้นเดียว (กลิ่นอายสิ่งพิมพ์) ไม่มีกล่องขาวทึบ
   ============================================================ */
.ed-enquiry {
  display: grid; grid-template-columns: 5fr 7fr; gap: clamp(40px, 6vw, 96px);
  align-items: start;
  padding-bottom: clamp(56px, 7vw, 96px); margin-bottom: clamp(48px, 6vw, 80px);
  border-bottom: 1px solid rgba(255, 255, 255, .10);
}
.ed-enquiry .ed-index { color: var(--ed-accent-dark); border-bottom-color: rgba(255,255,255,.22); max-width: 180px; }
.ed-enquiry .ed-display { color: var(--ed-on-dark); margin-top: var(--sp-3); }
.ed-enquiry .ed-lead { color: var(--ed-on-dark-muted); max-width: 40ch; }

.ed-form__trap { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.ed-form__grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gutter); }
.ed-form .field { margin-bottom: var(--sp-3); }
.ed-form .field--full { grid-column: 1 / -1; }

.ed-form .field label {
  font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ed-on-dark-muted);
}
html[lang="th"] .ed-form .field label, html[lang="zh"] .ed-form .field label {
  text-transform: none; letter-spacing: .04em; font-size: .8125rem;
}

.ed-form .field input,
.ed-form .field select,
.ed-form .field textarea {
  background: transparent; color: var(--ed-on-dark);
  border: 0; border-bottom: 1px solid rgba(255, 255, 255, .22); border-radius: 0;
  padding: 10px 0;
}
.ed-form .field textarea { min-height: 110px; }
.ed-form .field input:focus,
.ed-form .field select:focus,
.ed-form .field textarea:focus { border-bottom-color: var(--ed-accent-dark); outline: none; }
/* โฟกัส: เส้นใต้สีทองหนาขึ้น (ไม่ใช้กรอบสี่เหลี่ยม ให้เข้ากับสไตล์เส้นใต้) */
.ed-form .field input:focus-visible,
.ed-form .field select:focus-visible,
.ed-form .field textarea:focus-visible { outline: none; box-shadow: 0 1px 0 0 var(--ed-accent-dark); }
.ed-form .field textarea::placeholder { color: var(--ed-on-dark-faint); }

/* ตัวเลือกใน dropdown: ให้อ่านออกบนทุกระบบ */
.ed-form .field select { appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ed-on-dark-muted) 50%),
                    linear-gradient(135deg, var(--ed-on-dark-muted) 50%, transparent 50%);
  background-position: calc(100% - 10px) 55%, calc(100% - 5px) 55%;
  background-size: 5px 5px; background-repeat: no-repeat; padding-right: 24px; }
.ed-form .field select option { background: var(--ed-ink-deep); color: var(--ed-on-dark); }

.ed-form .field.has-error input,
.ed-form .field.has-error textarea { border-bottom-color: #E0857D; }
.ed-form .field__error { color: #F0A39C; }

.ed-form__foot { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-1); }
.ed-form__submit {
  padding: 15px 34px; font-size: .9375rem; font-weight: 500; letter-spacing: .04em;
  background: var(--ed-on-dark); color: var(--ed-ink-deep); border: 1px solid var(--ed-on-dark);
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.ed-form__submit:hover { background: var(--ed-accent-dark); border-color: var(--ed-accent-dark); color: var(--ed-ink-black); }
.ed-form__submit:disabled { opacity: .55; cursor: progress; }

.ed-form .form__status { margin: 0; font-size: .9375rem; color: var(--ed-on-dark-muted); max-width: 46ch; }
.ed-form .form__status[data-state="ok"] { color: var(--ed-accent-dark); }
.ed-form .form__status[data-state="error"] { color: #F0A39C; }
.ed-form .form__status a { color: var(--ed-on-dark); text-decoration: underline; text-underline-offset: 3px; }
.ed-form .form__status a:hover { color: var(--ed-accent-dark); }

@media (max-width: 992px) { .ed-enquiry { grid-template-columns: 1fr; gap: var(--sp-4); } }
@media (max-width: 560px) {
  .ed-form__grid { grid-template-columns: 1fr; }
  .ed-form__submit { width: 100%; }
}