/* ============================================================================
   M4 — แถบคำพูดวิ่งสวนทาง (marquee 2 แถว)
   ต้นแบบ: section "LOVED BY CREATORS WORLDWIDE" ของ openart.ai
   ทุกคลาสขึ้นต้น .mk4- (กันชนกับบล็อกอื่นในหน้า landing เดียวกัน)

   หลักที่ยึด:
   - ขยับได้แค่ transform (G4) — ตัว track เท่านั้นที่ถูกเลื่อน
   - สีเน้นสีเดียว (G6) — ทองของ --accent + ตัวอักษรบนทอง --accent-ink
     🔴 คู่โทเคน accent/accent-ink ต้องมาด้วยกันเสมอ (R6-11 · 29 ส.ค. 2569): โหมดสว่างทับ
     --mk-accent เป็นทองเข้ม (#6F5620) แล้ว --mk-accent-ink ต้องพลิกเป็นสีสว่าง (#FFF8EC)
     ไม่งั้นได้ "ดำบนทองเข้ม" contrast 2.36 — ค่าคู่นี้อยู่ที่ motion-core.css (.mk-light/.mk-auto)
     และมีด่าน scripts/ux/check-mk-token-pairs.mjs จับบล็อกที่ทับตัวหนึ่งโดยไม่ทับอีกตัว
   - reduced-motion / ?mk-noallow=1 → .is-static = นิ่งสนิท + อ่านครบทุกใบ (G5)
   ========================================================================= */

.mk4 {
  --mk4-gap: 16px;
  --mk4-cardw: 320px;
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;              /* กันแถบเลื่อนแนวนอนของทั้งหน้า */
  padding: 2px 0;
}

.mk4-row { position: relative; }
.mk4-row + .mk4-row { margin-top: 2px; }

/* หน้าต่างของแถว — ขอบซ้าย/ขวาเฟดหายเข้าพื้นหลังด้วย mask
   (ไม่ใช่ gradient ทับ ⇒ ใช้ได้กับพื้นหลังทุกสี ไม่ต้องรู้ว่าพื้นข้างหลังคือสีอะไร) */
.mk4-view {
  /* clip ไม่ใช่ hidden: hidden สร้าง "กล่องที่เลื่อนได้" ซึ่งเบราว์เซอร์/เครื่องมือทดสอบ
     อาจสั่ง scrollLeft ให้เองตอน focus หรือ scrollIntoView แล้วภาพจะเพี้ยนจาก
     transform ที่เราคุมอยู่ — clip ตัดขอบเหมือนกันแต่ไม่มีอะไรให้เลื่อนเลย */
  overflow: hidden;              /* fallback: Safari เก่ายังไม่รู้จัก clip — ถ้าทิ้งบรรทัดนี้ การ์ดจะล้นออกนอกบล็อก */
  overflow: clip;
  padding: 12px 0;               /* เผื่อที่ให้การ์ดยกขึ้นตอนถูกชี้ + เงา */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}

.mk4-track {
  display: flex;
  gap: var(--mk4-gap);
  width: max-content;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

/* ── การ์ดข้อความ ─────────────────────────────────────────────────────────── */
.mk4-card {
  flex: 0 0 var(--mk4-cardw);
  width: var(--mk4-cardw);
  box-sizing: border-box;
  margin: 0;
  padding: 16px 17px 14px;
  border: 1px solid var(--line, rgba(255, 255, 255, .14));
  border-radius: 18px;
  background: var(--surface, #1C1A17);
  color: var(--ink-2, #F2EDE4);
  /* เงาผ่านโทเคน — โหมดสว่าง (.mk-light/.mk-auto) ตั้งเป็น none ตามกติกาเจ้าของ A-27 "เงานอกใบไม่ควรมี" */
  box-shadow: var(--mk-sh-quote, inset 0 1px 0 rgba(255, 255, 255, .05), 0 10px 24px rgba(0, 0, 0, .28));
  transition:
    background-color .2s var(--ease, cubic-bezier(.4, 0, .2, 1)),
    color .2s var(--ease, cubic-bezier(.4, 0, .2, 1)),
    border-color .2s var(--ease, cubic-bezier(.4, 0, .2, 1)),
    box-shadow .22s var(--ease, cubic-bezier(.4, 0, .2, 1)),
    transform .22s var(--ease, cubic-bezier(.4, 0, .2, 1));
}

.mk4-card:focus-visible { outline: 2px solid var(--accent, #D5B86F); outline-offset: 3px; }

/* ชี้/แตะ/โฟกัส = พื้นสีเน้น + ยกขึ้น (สีเดียวทั้งชุด — G6) */
.mk4-card.is-hot {
  background: var(--accent, #D5B86F);
  color: var(--accent-ink, #241F16);
  border-color: var(--accent, #D5B86F);
  transform: translateY(-5px);
  box-shadow: var(--mk-sh-quote-hot, 0 16px 34px rgba(0, 0, 0, .34));
}

/* ── ดาว ─────────────────────────────────────────────────────────────────── */
.mk4-stars { display: flex; gap: 2px; line-height: 1; }
.mk4-star { font-size: 13px; line-height: 1; color: var(--accent, #D5B86F); }
.mk4-star:not(.is-on) { color: var(--ink-faint, rgba(255, 255, 255, .45)); }
.mk4-card.is-hot .mk4-star { color: var(--accent-ink, #241F16); }
.mk4-card.is-hot .mk4-star:not(.is-on) { color: var(--accent-ink-faint, rgba(36, 31, 22, .3)); }

/* ── ข้อความ ─────────────────────────────────────────────────────────────── */
.mk4-text {
  margin: 10px 0 13px;
  font-size: 14.5px;
  line-height: 1.62;
  letter-spacing: -.1px;
  color: inherit;
  /* ภาษาไทยไม่มีช่องว่างระหว่างคำ ⇒ ต้องอนุญาตให้ตัดที่ไหนก็ได้ ไม่งั้นล้นการ์ด */
  overflow-wrap: anywhere;
  word-break: break-word;
  /* เพดาน 3 บรรทัดตอนวิ่ง = การ์ดสูงเท่ากันทุกใบ และไม่มีทางล้นขอบ */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  min-height: 4.86em;            /* 3 บรรทัด × 1.62 */
}

/* ── บรรทัดผู้พูด ────────────────────────────────────────────────────────── */
.mk4-by {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-top: 11px;
  border-top: 1px solid var(--mk-divider, rgba(255, 255, 255, .07));
}
.mk4-card.is-hot .mk4-by { border-top-color: var(--accent-line, rgba(36, 31, 22, .18)); }

.mk4-ava {
  flex: 0 0 30px;
  width: 30px; height: 30px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(213, 184, 111, .16);
  background-size: cover; background-position: center;
  color: var(--accent, #D5B86F);
  font: 800 12px/1 var(--f-body, ui-sans-serif, system-ui, sans-serif);
  overflow: hidden;
}
.mk4-ava.has-img { color: transparent; background-color: #1a1815; }
.mk4-card.is-hot .mk4-ava { background-color: var(--accent-ink, #241F16); color: var(--accent, #D5B86F); }

.mk4-who { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.mk4-who b {
  font-size: 12.5px; font-weight: 800; color: var(--ink, #fff);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mk4-who i {
  font-style: normal; font-size: 10.5px; letter-spacing: .31px;
  text-transform: uppercase; color: var(--ink-muted, #B8AE9C);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mk4-card.is-hot .mk4-who b { color: var(--accent-ink, #241F16); }
.mk4-card.is-hot .mk4-who i { color: var(--accent-ink-2, rgba(36, 31, 22, .72)); }

/* ── โหมดนิ่ง: reduced-motion · Save-Data · ?mk-noallow=1 ─────────────────
   ไม่ใช่ "หยุดค้างกลางคัน" — ต้องจัดใหม่ให้อ่านได้ครบทุกใบ:
   ตัดสำเนา · เลิกเฟดขอบ · ตัดเพดาน 3 บรรทัด · ให้การ์ดขึ้นบรรทัดใหม่เอง */
.mk4.is-static .mk4-view {
  overflow: visible;
  -webkit-mask-image: none;
          mask-image: none;
}
/* กริดแทนแถวยาว — ไม่ใช่ flex-wrap เพราะการ์ดกว้างตายตัวจะเหลือใบเดี่ยวโดดท้ายบรรทัด */
.mk4.is-static .mk4-track {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  width: auto;
  will-change: auto;
}
.mk4.is-static .mk4-card { flex: initial; width: auto; }
.mk4.is-static .mk4-row + .mk4-row { margin-top: var(--mk4-gap); }
.mk4.is-static .mk4-text {
  display: block;
  -webkit-line-clamp: none;
  overflow: visible;
  min-height: 0;
}
.mk4.is-static .mk4-card { transition: none; }
.mk4.is-static .mk4-card.is-hot { transform: none; }

/* ── มือถือ: การ์ดเล็กลง (ความกว้างจริงถูกตั้งเป็น inline var โดย JS) ────── */
@media (max-width: 640px) {
  .mk4-card { padding: 14px 15px 12px; border-radius: 16px; }
  .mk4-text { font-size: 13.5px; margin: 9px 0 12px; }
  .mk4-view {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mk4-card { transition: none; }
}