/* ==================================================
   CONTACT.CSS — Page Specific Styles (contact.html / contact-th.html)
   Thai Flour Industry | Master Design System

   โครงหน้าตามภาพอ้างอิงที่ลูกค้าส่งมา
   1. Contact hero — ซ้าย: หัวข้อ + ข้อมูลติดต่อพร้อมไอคอนวงกลม / ขวา: การ์ดฟอร์มพื้นขาว
   2. Locations   — การ์ดที่ตั้งสามใบเรียงแถว (เป็นปุ่มเลือกแผนที่) + แผนที่แถบเตี้ยด้านล่าง
   3. Help / FAQ  — การ์ดภาพด้านซ้าย + รายการคำถามปุ่มบวก และลายรวงข้าวบนพื้นหลัง
   มือถือ/แท็บเล็ตเรียงคอลัมน์เดียวทุกส่วน แยกสองคอลัมน์ตั้งแต่ 1024px
   ================================================== */

/* หัวส่วนของ Locations และ FAQ */
.contact-head {
  max-width: 720px;
  margin-bottom: var(--space-32);
}

.contact-head h2 {
  letter-spacing: -0.01em;
}

.contact-head p {
  margin-top: var(--space-8);
  color: var(--color-text-muted);
}

@media (min-width: 1024px) {
  .contact-head { margin-bottom: var(--space-48); }
}

/* ==================================================
   1. CONTACT HERO + FORM
   ================================================== */
.contact-hero {
  padding-block: var(--space-32) var(--space-64);
  background-color: var(--color-surface);
}

/* เดสก์ท็อป: ส่วนนี้สูงเต็มหนึ่งหน้าจอพอดี (หักความสูงแถบเมนูที่ body เว้นไว้ด้านบน)
   เนื้อหาจัดกึ่งกลางแนวตั้ง ส่วนถัดไปจึงไม่โผล่ขึ้นมาในจอแรก
   --navbar-height ถูกเขียนค่าจริงโดย navbar.js / svh กันแถบที่อยู่ของเบราว์เซอร์ทำให้ความสูงกระโดด
   มือถือเนื้อหายาวกว่าจออยู่แล้ว จึงไม่บังคับความสูง */
@media (min-width: 1024px) {
  .contact-hero {
    display: flex;
    align-items: center;
    min-height: calc(100vh - var(--navbar-height));
    min-height: calc(100svh - var(--navbar-height));
    padding-block: var(--space-12);
  }

  .contact-hero__inner {
    width: 100%;
  }
}

.contact-hero__inner {
  display: grid;
  gap: var(--space-40);
}

@media (min-width: 1024px) {
  .contact-hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: var(--space-64);
    align-items: stretch;
  }
}

/* คอลัมน์ซ้าย: รายการข้อมูลติดต่อต่อท้ายคำอธิบายทันที (ลูกค้าขอให้ยกขึ้นมา ไม่ดันลงไปชิดล่างแบบภาพอ้างอิง) */
.contact-hero__intro {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--space-40);
}

.contact-hero__title {
  margin-block: 0 var(--space-12);
  letter-spacing: -0.02em;
}

.contact-hero__lead {
  max-width: 48ch;
  color: var(--color-text-muted);
}

/* ---------- ข้อมูลติดต่อพร้อมไอคอน ---------- */
.contact-info {
  display: grid;
  gap: var(--space-24);
}

.contact-info__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-16);
}

.contact-info__icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-deep-red);
}

.contact-info__icon svg {
  width: 20px;
  height: 20px;
}

.contact-info__item > div {
  display: flex;
  flex-direction: column;
  min-width: 0;
  color: var(--color-text-muted);
  line-height: 1.6;
}

.contact-info__label {
  margin-bottom: var(--space-2);
  color: var(--color-text);
  font-weight: var(--fw-medium);
}

.contact-info__item a {
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}

.contact-info__item a:hover {
  color: var(--color-deep-red);
}

/* ---------- การ์ดฟอร์ม ---------- */
.contact-card {
  padding: var(--space-24) var(--space-16);
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

@media (min-width: 640px) {
  .contact-card { padding: var(--space-32); }
}

.contact-card__title {
  font-size: var(--fs-h4);
}

.contact__intro {
  margin-block: var(--space-4) var(--space-24);
  color: var(--color-text-muted);
  font-size: var(--fs-small);
}

.contact__intro .required,
.form-check .required {
  color: var(--color-deep-red);
  font-weight: var(--fw-semibold);
}

/* ---------- Form Layout ---------- */
.contact-form {
  display: grid;
  gap: var(--space-16);
}

.contact-form__row {
  display: grid;
  gap: var(--space-16);
}

@media (min-width: 640px) {
  .contact-form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ช่องกรอกแบบพื้นเทาไม่มีเส้นขอบ (ตามภาพอ้างอิง) — เขียนทับเฉพาะในการ์ดนี้ ไม่กระทบฟอร์มหน้าอื่น */
.contact-card .form-field {
  gap: var(--space-4);
}

.contact-card .form-field label {
  font-size: var(--fs-small);
}

.contact-card .form-field input,
.contact-card .form-field select,
.contact-card .form-field textarea {
  background-color: var(--color-surface);
  border-color: transparent;
  border-radius: var(--radius-md);
}

.contact-card .form-field input:focus,
.contact-card .form-field select:focus,
.contact-card .form-field textarea:focus {
  background-color: var(--color-white);
  border-color: var(--color-deep-red);
}

.contact-card .form-field .error-text:empty {
  min-height: 0;
}

/* ---------- ย่อการ์ดฟอร์มให้สูงไม่เกินหนึ่งหน้าจอ ---------- */
/* ช่องกรอกเตี้ยลง ช่องไฟระหว่างฟิลด์แคบลง และซ่อนช่องข้อความ error ที่ยังว่าง
   (ช่อง error ของช่องยินยอมอยู่นอก .form-field — ถ้าไม่ซ่อน กริดจะนับเป็นแถวว่างพร้อมช่องไฟอีกหนึ่งช่อง)
   ช่วงที่มีข้อความ error ขึ้น การ์ดจะสูงขึ้นตามจำนวน error ซึ่งยอมรับได้ */
.contact-card .contact-form {
  gap: var(--space-12);
}

.contact-card .contact-form__row {
  gap: var(--space-12);
}

.contact-card .form-field input,
.contact-card .form-field select,
.contact-card .select__button {
  min-height: 44px;
  padding-block: var(--space-8);
}

.contact-card .form-field textarea {
  min-height: 96px;
  padding-block: var(--space-8);
}

.contact-card .form-field .hint {
  line-height: 1.5;
}

.contact-card .contact-form > .error-text:empty {
  display: none;
}

.contact-card .form-check label {
  line-height: 1.5;
}

.contact-card .contact-card__title {
  line-height: 1.3;
}

.contact-card .contact__intro {
  margin-block: var(--space-2) var(--space-16);
}

.contact-card .form-field label {
  line-height: 1.4;
}

/* เดสก์ท็อป: ยกการ์ดขึ้นใกล้แถบเมนู ลดขอบใน และย่อข้อความยินยอม/ปุ่ม
   ให้ทั้งการ์ดอยู่ในจอเดียวตั้งแต่จอสูงราว 768px ขึ้นไป */
@media (min-width: 1024px) {
  .contact-card { padding: var(--space-24) var(--space-32); }

  .contact-card .form-field textarea { min-height: 72px; }

  .contact-card .form-check label {
    font-size: var(--fs-caption);
  }

  .contact-card .btn--block {
    min-height: 44px;
    padding-block: var(--space-8);
  }

  .contact-card .contact-terms {
    margin-top: var(--space-8);
    padding-top: var(--space-8);
  }
}

/* ---------- ดรอปดาวน์ (สร้างโดย contact.js แทนรายการของ <select>) ---------- */
/* ปุ่มหน้าตาเหมือนช่องกรอกอื่นในการ์ด แผงรายการใช้สไตล์เดียวกับเมนูย่อยบนแถบเมนู (.navbar__submenu)
   ถ้าสคริปต์ไม่ทำงาน <select> เดิมยังแสดงและใช้งานได้ตามปกติ */
.select {
  position: relative;
}

/* <select> ตัวจริงที่ซ่อนไว้ — กฎ .form-field select ใน components.css ให้กว้าง 100% และสูง 48px
   ซึ่งชนะ .visually-hidden (ความเฉพาะเจาะจงสูงกว่า) กล่องล่องหนจึงยื่นเลยขอบจอบนมือถือ ต้องย่อกลับตรงนี้ */
.form-field select.visually-hidden {
  width: 1px;
  height: 1px;
  min-height: 0;
  padding: 0;
  border: 0;
}

.select__button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  width: 100%;
  min-height: 48px;
  padding: var(--space-12) var(--space-16);
  background-color: var(--color-surface);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--color-text);
  font: inherit;
  font-size: var(--fs-body);
  text-align: start;
  cursor: pointer;
  transition: border-color var(--transition-base), box-shadow var(--transition-base), background-color var(--transition-base);
}

.select__button.is-placeholder {
  color: var(--color-text-muted);
}

.select__button:focus-visible,
.select.is-open .select__button {
  background-color: var(--color-white);
  border-color: var(--color-deep-red);
  box-shadow: 0 0 0 4px rgba(155, 52, 38, 0.12);
  outline: none;
}

.select__icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  transition: transform var(--transition-base);
}

.select.is-open .select__icon {
  transform: rotate(180deg);
  color: var(--color-deep-red);
}

.select__list {
  position: absolute;
  inset-block-start: calc(100% + var(--space-8));
  inset-inline: 0;
  z-index: 20;
  max-height: 320px;
  overflow-y: auto;
  padding: var(--space-8);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  list-style: none;
}

.select__list:focus {
  outline: none;
}

.select__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  padding: var(--space-12);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: 1.4;
  cursor: pointer;
}

.select__option.is-active {
  background-color: var(--color-surface);
  color: var(--color-deep-red);
}

/* ตัวที่เลือกอยู่ — พื้นเหลืองอ่อนแบบเมนูหน้าปัจจุบันบนแถบเมนู พร้อมเครื่องหมายถูก */
.select__option[aria-selected='true'] {
  background-color: rgba(255, 182, 83, 0.24);
  color: var(--color-deep-red);
}

.select__option[aria-selected='true']::after {
  content: '';
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: var(--icon-check) no-repeat center / contain;
  mask: var(--icon-check) no-repeat center / contain;
}

.contact-card .btn--block {
  margin-top: var(--space-4);
}

/* Honeypot — ซ่อนจากผู้ใช้จริง แต่บอทยังมองเห็น */
.contact-form__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Status Message ---------- */
.contact-form__status:empty {
  display: none;
}

.contact-form__status {
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
}

.contact-form__status.is-success {
  padding: var(--space-12) var(--space-16);
  background-color: var(--color-leaf-green);
  border-radius: var(--radius-sm);
  color: var(--color-mahogany);
}

.contact-form__status.is-error {
  padding: var(--space-12) var(--space-16);
  background-color: rgba(155, 52, 38, 0.1);
  border-radius: var(--radius-sm);
  color: var(--color-deep-red);
}

/* ---------- สรุปเงื่อนไข (กางได้) ---------- */
.contact-terms {
  margin-top: var(--space-12);
  padding-top: var(--space-12);
  border-top: 1px solid var(--color-border);
  font-size: var(--fs-small);
}

.contact-terms summary {
  color: var(--color-text);
  font-weight: var(--fw-medium);
  cursor: pointer;
}

.contact-terms__list {
  display: grid;
  gap: var(--space-8);
  margin-top: var(--space-12);
}

.contact-terms__list li {
  position: relative;
  padding-inline-start: var(--space-16);
  color: var(--color-text-muted);
}

.contact-terms__list li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.7em;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background-color: var(--color-deep-red);
}

/* ==================================================
   2. LOCATIONS + GOOGLE MAP
   ================================================== */
/* แผนที่ใช้กรอบเดียว สลับที่ตั้งด้วยการ์ดด้านซ้าย — เบากว่าการฝัง iframe สามอันพร้อมกัน
   (การ์ดทำงานผ่าน contact.js ซึ่งเปลี่ยนค่า src ของ iframe)
   การ์ดเรียงเป็นแถวเหนือแผนที่ แผนที่เป็นแถบเตี้ยสูงคงที่ แทนกรอบ 16:9 เต็มความกว้างแบบเดิม */
.locations {
  display: grid;
  gap: var(--space-16);
}

@media (min-width: 1024px) {
  .locations { gap: var(--space-24); }
}

.location-list {
  display: grid;
  gap: var(--space-12);
}

@media (min-width: 768px) {
  .location-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-16);
  }
}

.location-card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.location-card:hover {
  box-shadow: var(--shadow-sm);
}

/* การ์ดที่แผนที่แสดงอยู่ */
.location-card:has(.is-active) {
  border-color: var(--color-deep-red);
  box-shadow: var(--shadow-md);
}

.location-card__select {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-16) var(--space-16) var(--space-8);
  background-color: transparent;
  border: 0;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}

@media (min-width: 640px) {
  .location-card__select { padding-inline: var(--space-24); }
}

.location-card__kind {
  color: var(--color-text-muted);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.location-card__select.is-active .location-card__kind {
  color: var(--color-deep-red);
}

.location-card__title {
  font-size: var(--fs-h6);
  font-weight: var(--fw-semibold);
  color: var(--color-mahogany);
}

.location-card__address {
  color: var(--color-text-muted);
  font-size: var(--fs-small);
  line-height: 1.6;
}

.location-card__select {
  flex-grow: 1;
}

/* แถวลิงก์ท้ายการ์ด: เบอร์โทร + ลิงก์เปิด Google Maps (ลิงก์แชร์ของลูกค้า เปิดแท็บใหม่) */
.location-card__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8) var(--space-16);
  margin: 0 var(--space-16) var(--space-16);
}

@media (min-width: 640px) {
  .location-card__links { margin-inline: var(--space-24); }
}

.location-card__tel,
.location-card__map {
  color: var(--color-deep-red);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
}

.location-card__map {
  padding-inline-start: var(--space-16);
  border-inline-start: 1px solid var(--color-border);
}

.map-frame {
  overflow: hidden;
  height: 280px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

@media (min-width: 768px) {
  .map-frame { height: 340px; }
}

@media (min-width: 1024px) {
  .map-frame { height: 380px; }
}

.map-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ==================================================
   3. HELP CENTER / FAQ
   ================================================== */
/* ลายรวงข้าวสองรวงบนพื้นหลัง — ไฟล์ SVG ใช้เป็น mask สีจริงมาจาก background-color (โทเคนสีทอง)
   z-index: -1 ใต้เนื้อหา และ isolation กันไม่ให้ลายทะลุไปอยู่หลังพื้นของส่วนอื่น */
.help {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--color-surface);
}

.help::before,
.help::after {
  content: '';
  position: absolute;
  z-index: -1;
  width: clamp(150px, 22vw, 320px);
  /* ไฟล์ rice-stalk.svg เป็นลายเส้นจาก Illustrator กรอบจัตุรัส (viewBox 62 × 62) */
  aspect-ratio: 1 / 1;
  background-color: var(--color-golden-yellow);
  -webkit-mask: url('../../element/rice-stalk.svg') no-repeat center / contain;
  mask: url('../../element/rice-stalk.svg') no-repeat center / contain;
  pointer-events: none;
}

/* รวงใหญ่มากมุมขวาบน — ตั้งใจให้ล้นขอบขวาและขอบบนของส่วน แล้วโดน overflow: hidden ตัดทิ้ง
   เหมือนรวงเล็กมุมซ้ายล่าง ลายจึงดูเหมือนยื่นเข้ามาจากนอกกรอบ */
.help::before {
  inset-block-start: -10%;
  inset-inline-end: -22%;
  /* ย่อลง 30% จาก clamp(360px, 58vw, 900px) แล้วขยายกลับขึ้น 10% */
  width: clamp(277px, 44.66vw, 693px);
  opacity: 0.35;
  transform: rotate(-6deg);
}

/* รวงเล็กมุมซ้ายล่าง กลับด้านซ้าย-ขวา */
.help::after {
  inset-block-end: -6%;
  inset-inline-start: -3%;
  width: clamp(120px, 16vw, 240px);
  /* คงกรอบสัดส่วนสูงแบบเดิมไว้ — ลายวางกึ่งกลางกรอบ (contain) ถ้าเปลี่ยนเป็นจัตุรัส ลายจะเลื่อนลงไปโดนตัดมากกว่าเดิม */
  aspect-ratio: 290 / 480;
  opacity: 0.25;
  transform: scaleX(-1) rotate(-12deg);
}

.help__grid {
  display: grid;
  gap: var(--space-24);
}

@media (min-width: 1024px) {
  .help__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: var(--space-32);
    /* stretch = การ์ดภาพสูงเท่าคอลัมน์รายการคำถามพอดี */
    align-items: stretch;
  }
}

/* การ์ดภาพ — มือถืออยู่ใต้รายการคำถาม (คำถามสำคัญกว่า) เดสก์ท็อปอยู่ซ้ายและสูงเท่ารายการคำถาม */
.help-card {
  position: relative;
  order: 2;
  display: flex;
  align-items: flex-end;
  min-height: 300px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  color: var(--color-white);
}

@media (min-width: 1024px) {
  .help-card {
    order: 0;
    /* ความสูงมาจากแถวของกริด (align-items: stretch) จึงไม่ตั้งความสูงเอง
       min-height: 0 ล้างค่า 300px ของจอเล็กทิ้ง ไม่งั้นการ์ดอาจสูงเกินรายการคำถาม */
    min-height: 0;
  }
}

.help-card__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ฝ้าไล่เฉดจากล่างขึ้นบน ข้อความขาวจึงอ่านออกทุกส่วนของภาพ */
.help-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--color-mahogany-dark) 92%, transparent) 0%,
    color-mix(in srgb, var(--color-mahogany-dark) 55%, transparent) 55%,
    transparent 100%
  );
}

.help-card__body {
  position: relative;
  z-index: 1;
  padding: var(--space-24);
}

.help-card__title {
  color: var(--color-white);
  font-size: var(--fs-h4);
}

.help-card__body p {
  margin-block: var(--space-8) var(--space-16);
  color: color-mix(in srgb, var(--color-white) 88%, transparent);
}

/* ---------- รายการคำถาม ---------- */
/* ใช้ <details>/<summary> ของเบราว์เซอร์ตรง ๆ — กางและหุบได้เองโดยไม่ต้องมีสคริปต์
   และโปรแกรมอ่านหน้าจอรู้จักสถานะกาง/หุบอยู่แล้ว */
.faq-list {
  display: grid;
  gap: var(--space-12);
}

.faq-item {
  background-color: var(--color-white);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition-base);
}

.faq-item[open] {
  border-color: var(--color-border);
}

.faq-item__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  padding: var(--space-16) var(--space-16) var(--space-16) var(--space-24);
  color: var(--color-text);
  font-size: var(--fs-h6);
  font-weight: var(--fw-medium);
  cursor: pointer;
  list-style: none;
}

/* ซ่อนสามเหลี่ยมเริ่มต้นของเบราว์เซอร์ แล้ววาดปุ่มบวกในวงกลมเอง
   เส้นแนวตั้งหดเหลือศูนย์ตอนกาง เครื่องหมายบวกจึงกลายเป็นลบ */
.faq-item__question::-webkit-details-marker {
  display: none;
}

.faq-item__question::after {
  content: '';
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  background:
    linear-gradient(var(--color-deep-red), var(--color-deep-red)) center / 12px 2px no-repeat,
    linear-gradient(var(--color-deep-red), var(--color-deep-red)) center / 2px 12px no-repeat,
    var(--color-surface);
  transition: background-size var(--transition-base);
}

.faq-item[open] .faq-item__question::after {
  background-size: 12px 2px, 2px 0, auto;
}

.faq-item__answer {
  padding: 0 var(--space-24) var(--space-24);
  color: var(--color-text-muted);
}

.faq-item__answer a {
  color: var(--color-deep-red);
  font-weight: var(--fw-medium);
}

.faq-item__answer p + p {
  margin-top: var(--space-12);
}

@media (prefers-reduced-motion: reduce) {
  .faq-item__question::after,
  .location-card {
    transition: none;
  }
}

/* คำโปรย FAQ ให้อยู่บรรทัดเดียวบนแท็บเล็ต/เดสก์ท็อป (มือถือตัดบรรทัดตามปกติ ไม่ให้ล้นจอ) */
@media (min-width: 768px) {
  /* กล่องหัวส่วนจำกัดไว้ 720px — ขยายเฉพาะส่วนนี้ให้ประโยคอยู่บรรทัดเดียวได้ */
  .contact-head:has(.contact-head__lead--one-line) {
    max-width: none;
  }

  .contact-head .contact-head__lead--one-line {
    max-width: none;
    white-space: nowrap;
  }
}