/* ------------------------------------------------------------------ *
 * Footer 4 แถบ (inc/footer.php)
 *
 * พื้นสว่าง ตัวอักษรเข้ม — พาเลตต์ใหม่ #c08d7c สว่างเกินกว่าจะเอาไปเป็นพื้น
 * ทั้งแผงแล้ววางตัวอักษรขาวทับ (contrast 2.86:1 ตกเกณฑ์ AA)
 * ที่นี่จึงใช้ครีมเป็นพื้นและ --lmg-ink/--lmg-text เป็นตัวอักษร ได้ 5.2:1 ขึ้นไป
 * ------------------------------------------------------------------ */

.lmg-footer {
  font-family: var(--lmg-font-primary);
  color: var(--lmg-text);
  font-size: var(--lmg-text-small);
  line-height: var(--lmg-leading-normal);
}

.lmg-f-wrap {
  max-width: 1340px;
  margin: 0 auto;
  padding-inline: var(--lmg-space-5);
}

/* ---------- แถบ 1: จุดขาย ---------- */

.lmg-f-usp {
  background: var(--lmg-secondary);
  padding-block: var(--lmg-space-6);
  text-align: center;
}

.lmg-f-usp__lead {
  margin: 0;
  font-family: var(--lmg-font-display);
  font-size: var(--lmg-text-h3);
  line-height: var(--lmg-leading-snug);
  color: var(--lmg-ink);
}

.lmg-f-usp__sub {
  margin: var(--lmg-space-2) 0 0;
  color: var(--lmg-text);
}

.lmg-f-usp__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--lmg-space-4);
  margin: var(--lmg-space-5) 0 0;
  padding: 0;
  list-style: none;
}

.lmg-f-usp__list li {
  display: flex;
  gap: var(--lmg-space-3);
  align-items: flex-start;
  justify-content: center;
  text-align: left;
}

.lmg-f-usp__list strong {
  display: block;
  color: var(--lmg-ink);
  font-weight: var(--lmg-fw-semibold);
}

.lmg-f-usp__list span {
  font-size: var(--lmg-text-caption);
  line-height: var(--lmg-leading-normal);
}

.lmg-f-usp__list strong {
  font-size: var(--lmg-text-small);
}

/* ---------- แถบ 2: ลิงก์ ---------- */

.lmg-f-main {
  background: var(--lmg-bg-light);
  padding-block: var(--lmg-space-8);
}

.lmg-f-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--lmg-space-6) var(--lmg-space-5);
  align-items: start;
}

.lmg-f-brand__logo {
  display: inline-block;
  margin-bottom: var(--lmg-space-4);
}

.lmg-f-brand__logo img {
  width: 200px;
  height: auto;
}

.lmg-f-contact {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--lmg-space-3);
}

.lmg-f-contact li {
  display: flex;
  gap: var(--lmg-space-3);
  align-items: flex-start;
}

.lmg-f-contact strong {
  display: block;
  color: var(--lmg-ink);
  font-weight: var(--lmg-fw-semibold);
}

.lmg-f-contact a {
  color: var(--lmg-text);
  text-decoration: none;
}

.lmg-f-contact a:hover,
.lmg-f-contact a:focus-visible {
  color: var(--lmg-primary-dark);
  text-decoration: underline;
}

.lmg-f-ico {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--lmg-primary);
}

.lmg-f-social {
  display: flex;
  gap: var(--lmg-space-2);
  margin-top: var(--lmg-space-5);
}

.lmg-f-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--lmg-line);
  border-radius: 50%;
  color: var(--lmg-primary);
  background: var(--lmg-white);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.lmg-f-social a:hover,
.lmg-f-social a:focus-visible {
  background: var(--lmg-primary);
  border-color: var(--lmg-primary);
  color: var(--lmg-white);
}

.lmg-f-social .lmg-f-ico {
  width: 18px;
  height: 18px;
  margin: 0;
  color: inherit;
}

.lmg-f-col__title {
  margin: 0 0 var(--lmg-space-4);
  font-family: var(--lmg-font-primary);
  font-size: var(--lmg-text-small);
  font-weight: var(--lmg-fw-semibold);
  letter-spacing: var(--lmg-tracking-wide);
  text-transform: uppercase;
  color: var(--lmg-ink);
}

.lmg-f-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--lmg-space-2);
}

.lmg-f-list a {
  color: var(--lmg-text);
  text-decoration: none;
  transition: color 0.2s ease;
}

.lmg-f-list a:hover,
.lmg-f-list a:focus-visible {
  color: var(--lmg-primary-dark);
  text-decoration: underline;
}

/* ---------- แถบ 3: ชำระเงิน ---------- */

.lmg-f-pay {
  background: var(--lmg-bg-light);
  border-top: 1px solid var(--lmg-line);
  padding-block: var(--lmg-space-4);
}

.lmg-f-pay .lmg-f-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--lmg-space-3);
}

.lmg-f-pay__label {
  font-weight: var(--lmg-fw-semibold);
  color: var(--lmg-ink);
}

.lmg-f-pay__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lmg-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lmg-f-pay__list li {
  padding: 6px 14px;
  border: 1px solid var(--lmg-line);
  border-radius: 999px;
  background: var(--lmg-white);
  font-size: var(--lmg-text-caption);
}

/* ---------- แถบ 4: ลิขสิทธิ์ ---------- */

.lmg-f-legal {
  background: var(--lmg-secondary);
  padding-block: var(--lmg-space-4);
}

.lmg-f-legal p {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--lmg-space-2) var(--lmg-space-4);
  font-size: var(--lmg-text-caption);
  color: var(--lmg-ink);
  text-align: center;
}

/* ---------- แท็บเล็ต / มือถือ ---------- */

@media (max-width: 1024px) {
  .lmg-f-grid {
    grid-template-columns: 1fr 1fr;
  }

  .lmg-f-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 767px) {
  .lmg-f-usp__list {
    grid-template-columns: 1fr;
    gap: var(--lmg-space-3);
    text-align: left;
    max-width: 22rem;
    margin-inline: auto;
  }

  .lmg-f-usp__list li {
    justify-content: flex-start;
  }

  .lmg-f-main {
    padding-block: var(--lmg-space-6);
  }

  .lmg-f-grid {
    gap: var(--lmg-space-5);
  }

  .lmg-f-pay .lmg-f-wrap {
    justify-content: center;
    text-align: center;
  }
}