/* ───────────── Magic UI (พอร์ตเป็น CSS ล้วน ไม่มี React) ─────────────
   ๑. Bento Grid  — ประตูสำรวจธรรมขนาดไม่เท่ากันตามความสำคัญ
   ๒. Border Beam — แสงทองไล่ตามขอบการ์ดเด่น ช้าๆ เหมือนแสงตกบนแผ่นจาร
   ๓. Blur Fade   — การ์ดค่อยๆ ชัดขึ้นเมื่อเลื่อนมาถึง
   ทุกตัวหยุดนิ่งเมื่อผู้ใช้ตั้ง prefers-reduced-motion */

/* ── ๑. Bento Grid ── */
.mu-bento-wrap { margin: var(--space-8) 0 var(--space-6); }
.mu-bento-wrap .shelf-divider { margin: 0 0 var(--space-4); }

.mu-bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 172px;
  gap: var(--space-4);
}
.mu-tile.is-room   { grid-column: span 2; grid-row: span 2; }
.mu-tile.is-chart  { grid-column: span 1; grid-row: span 2; }
.mu-tile.is-map,
.mu-tile.is-paticca { grid-column: span 2; }
.mu-tile.is-listen img { object-position: 12% 30%; }
.mu-tile.is-canon img  { object-position: 85% 40%; }

.mu-tile {
  /* ข้อความวางบนภาพเสมอ → ตรึงสีอ่อนบนพื้นเข้ม ไม่พลิกตามธีม */
  --tile-ink: #fbf5e6;
  --tile-ink-soft: #e9dcbd;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
  padding: var(--space-4) var(--space-6) var(--space-4) var(--space-4);
  border: 1px solid color-mix(in srgb, #a07c2c 34%, var(--line));
  border-radius: 12px;
  overflow: hidden;
  background: #2a2318;
  color: var(--tile-ink);
  text-decoration: none;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.mu-tile:hover,
.mu-tile:focus-visible {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, #d9b968 70%, transparent);
  box-shadow: var(--shadow-deep);
}
.mu-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.mu-tile img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms cubic-bezier(.2,.7,.2,1);
}
.mu-tile:hover img { transform: scale(1.045); }
/* ม่านไล่จากล่าง กันข้อความจมภาพ */
.mu-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(20, 15, 8, .05) 10%, rgba(20, 15, 8, .5) 42%, rgba(20, 15, 8, .84) 70%, rgba(20, 15, 8, .94) 100%);
}
.mu-tile.is-room::before,
.mu-tile.is-chart::before {
  background: linear-gradient(180deg, rgba(20, 15, 8, 0) 30%, rgba(20, 15, 8, .62) 58%, rgba(20, 15, 8, .92) 100%);
}
.mu-kicker, .mu-tile h3, .mu-tile p, .mu-meta { text-shadow: 0 1px 8px rgba(10, 7, 3, .7); }

.mu-kicker {
  font: 600 12px/1.4 var(--sans);
  letter-spacing: .08em;
  color: #e7c98a;
}
.mu-tile h3 {
  margin: 0;
  font: 600 clamp(17px, 1.6vw, 21px)/1.35 var(--serif);
  color: var(--tile-ink);
  text-wrap: balance;
}
.mu-tile.is-room h3 { font-size: clamp(22px, 2.4vw, 30px); }
.mu-tile p {
  margin: 0;
  font: 400 13.5px/1.6 var(--sans);
  color: var(--tile-ink-soft);
}
.mu-tile:not(.is-room):not(.is-chart) p { display: none; }
.mu-meta {
  margin-top: 6px;
  font: 500 12.5px/1.4 var(--sans);
  color: #e7c98a;
}
.mu-go {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(20, 15, 8, .5);
  border: 1px solid rgba(231, 201, 138, .45);
  color: #f3dfb0;
  font-size: 15px;
  transition: transform 220ms ease, background 220ms ease;
}
.mu-tile:hover .mu-go { transform: translateX(2px); background: rgba(160, 124, 44, .75); }

@media (max-width: 960px) {
  .mu-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 160px; }
  .mu-tile.is-chart { grid-column: span 1; grid-row: span 2; }
  .mu-tile.is-map, .mu-tile.is-paticca { grid-column: span 2; }
}
@media (max-width: 620px) {
  .mu-bento { grid-template-columns: 1fr; grid-auto-rows: 150px; }
  .mu-tile.is-room { grid-column: auto; grid-row: span 2; }
  .mu-tile.is-chart, .mu-tile.is-map, .mu-tile.is-paticca { grid-column: auto; grid-row: auto; }
  .mu-tile.is-chart p { display: none; }
}

/* ── ๒. Border Beam ──
   วงแหวน conic-gradient ซ้อนบนขอบ แล้ว mask ให้เหลือแค่เส้นขอบหนา --beam-w */
@property --beam-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.mu-beam { position: relative; }
.mu-beam::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  padding: var(--beam-w, 1.5px);
  border-radius: inherit;
  background: conic-gradient(
    from var(--beam-angle),
    transparent 0 68%,
    rgba(217, 185, 104, .0) 72%,
    rgba(217, 185, 104, .95) 84%,
    #fff6dc 88%,
    rgba(217, 185, 104, .0) 93%,
    transparent 100%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: mu-beam var(--beam-dur, 11s) linear infinite;
  animation-delay: var(--beam-delay, 0s);
  pointer-events: none;
}
@keyframes mu-beam { to { --beam-angle: 360deg; } }

/* ── ๓. Blur Fade ──
   สถานะซ่อนใส่โดย JS เท่านั้น (.mu-fade) → ไม่มี JS ก็ยังเห็นครบ */
.mu-fade {
  opacity: 0;
  filter: blur(6px);
  translate: 0 10px;
  transition:
    opacity 700ms ease,
    filter 700ms ease,
    translate 700ms cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--mu-delay, 0ms);
}
.mu-fade.mu-in { opacity: 1; filter: none; translate: 0 0; }

@media (prefers-reduced-motion: reduce) {
  .mu-beam::after { animation: none; --beam-angle: 135deg; }
  .mu-fade { opacity: 1; filter: none; translate: none; transition: none; }
  .mu-tile, .mu-tile img, .mu-go { transition: none; }
}

/* ── ๔. Marquee — แถบอุปมาธรรม ──
   สองแถวเลื่อนสวนกันช้าๆ · ชุดการ์ดซ้ำสองรอบใน track แล้วเลื่อน -50% ให้วนต่อเนียน
   (ชุดที่สองเป็นสำเนา aria-hidden + inert) · ชี้แถวไหนแถวนั้นหยุด · มีปุ่มหยุดทั้งแถบ */
.mu-upama { margin: var(--space-8) 0 var(--space-6); }
.mu-upama-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: var(--space-4);
}
.mu-upama-head .shelf-divider { flex: 1; margin: 0; }
.mu-upama-sub {
  margin: calc(var(--space-2) * -1) 0 var(--space-4);
  text-align: center;
  font: 400 13px/1.5 var(--sans);
  color: var(--muted);
}
.mu-pause {
  flex: none;
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink-soft);
  font: 500 12.5px/1 var(--sans);
  cursor: pointer;
}
.mu-pause:hover { color: var(--ink); border-color: var(--accent-line); }

.mu-rows {
  display: grid;
  gap: var(--space-3);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.mu-row { overflow: hidden; padding: 4px 0; }
.mu-track {
  display: flex;
  width: max-content;
  gap: var(--space-3);
  animation: mu-marquee var(--mu-dur, 90s) linear infinite;
}
.mu-group { display: flex; gap: var(--space-3); }
.mu-row.is-rev .mu-track { animation-direction: reverse; }
.mu-row:hover .mu-track,
.mu-row:focus-within .mu-track,
.mu-upama.is-paused .mu-track { animation-play-state: paused; }
@keyframes mu-marquee { to { transform: translateX(calc(-50% - var(--space-3) / 2)); } }

.mu-upa {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 12px;
  width: 340px;
  height: 100px;
  padding: 8px 12px 8px 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  color: inherit;
  text-decoration: none;
  transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}
.mu-upa:hover,
.mu-upa:focus-visible {
  border-color: var(--accent-line);
  box-shadow: var(--shadow-soft);
  transform: translateY(-1px);
}
.mu-upa:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mu-upa img {
  width: 112px;
  height: 84px;
  border-radius: 6px;
  object-fit: cover;
  background: var(--paper-edge);
}
.mu-upa-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mu-upa-kind {
  align-self: flex-start;
  padding: 1px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font: 600 11px/1.5 var(--sans);
  color: var(--ink-soft);
}
.mu-upa.is-pali .mu-upa-kind { border-color: var(--accent-line); color: var(--accent-strong); }
.mu-upa.is-attha .mu-upa-kind { border-color: color-mix(in srgb, #3f8f96 55%, transparent); color: #2f6f75; }
:root.dark .mu-upa.is-attha .mu-upa-kind { color: #8fd0d4; }
.mu-upa-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin: 0;
  font: 600 14px/1.45 var(--serif);
  color: var(--ink);
}
.mu-upa-subject {
  overflow: hidden;
  margin: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  font: 400 12.5px/1.4 var(--sans);
  color: var(--muted);
}
.mu-upa-subject b { font-weight: 600; color: var(--accent-strong); }

@media (max-width: 620px) {
  .mu-upa { width: 288px; grid-template-columns: 96px 1fr; }
  .mu-upa img { width: 96px; height: 72px; }
}

/* ลดการเคลื่อนไหว: ไม่วิ่ง ใช้ปัดแนวนอนแทน (ไม่มีชุดสำเนา) */
@media (prefers-reduced-motion: reduce) {
  .mu-rows { -webkit-mask-image: none; mask-image: none; }
  .mu-row { overflow-x: auto; scroll-snap-type: x mandatory; }
  .mu-track { animation: none; }
  .mu-upa { scroll-snap-align: start; transition: none; }
  .mu-group[aria-hidden="true"] { display: none; }
  .mu-pause { display: none; }
}