/* =========================================================================
   Gallery แบบวงล้อการ์ด — การ์ดแนวตั้งเรียงเป็นแนวโค้งเหมือนพัด หมุนไปทางซ้ายเรื่อยๆ
   ใบกลางตั้งตรงสูงสุด ใบข้างเอียงออกและต่ำลงตามโค้ง · ชี้ = วงล้อชะลอจนหยุด + การ์ดเด้งออก · ลาก = หมุนเอง
   คลิก = ซูมเปิดภาพใหญ่แบบ Quick Look
   class:  spu-glide   (ใส่ที่ Container ที่มี Image widget อยู่ข้างใน — เพิ่ม/ลด/เปลี่ยนรูปใน Elementor ได้ตามปกติ)
     hub-more  (ใส่ที่รูปไหนก็ได้) -> ลิงก์ของรูปนั้นกลายเป็นปุ่ม "ดูภาพทั้งหมด" ใต้วงล้อ
   assets/spu-glide.js จัดตำแหน่ง + หมุน + ซูมเปิด
   ปรับเองได้:  selector { --glide-card: 240px; --glide-radius-wheel: 2300px; --glide-step: 5.6; --glide-speed: 0.8; }
   ========================================================================= */
@property --lift { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --grow { syntax: "<number>"; inherits: false; initial-value: 1; }

.spu-glide {
  --glide-card:   240px;     /* ความกว้างการ์ด */
  --glide-hw:     1.4;       /* สูง : กว้าง */
  --glide-radius-wheel: 2300px;   /* รัศมีวงล้อ (ยิ่งมาก โค้งยิ่งแบน) */
  --glide-step:   5.6;       /* องศาระหว่างการ์ด (ยิ่งน้อย ยิ่งชิด/ซ้อนกัน) */
  --glide-speed:  0.8;       /* ความเร็ว: องศาต่อวินาที (0.8 ≈ 35px/วินาที ที่จอคอม) */
  --glide-radius: 20px;
  --glide-accent: #EB008B;
}

/* ก่อน JS ทำงาน (และในหน้าแก้ Elementor): แถวเลื่อนข้างได้ */
.spu-glide:not(.is-glide) {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 16px !important;
  overflow-x: auto;
}
.spu-glide:not(.is-glide) > .elementor-element { flex: 0 0 var(--glide-card) !important; height: calc(var(--glide-card) * var(--glide-hw)); }
.spu-glide:not(.is-glide) > .elementor-element img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--glide-radius); }

.spu-glide.is-glide { display: block !important; position: relative; width: 100%; padding: 0 !important; }

.spu-glide__view {
  position: relative;
  height: calc(var(--glide-card) * var(--glide-hw) + 150px);
  overflow: hidden;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}
.spu-glide__view.is-drag { cursor: grabbing; }

.spu-glide__view > .elementor-element {
  --lift: 0px;
  --grow: 1;
  position: absolute !important;
  top: 46px;
  left: 50%;
  width: var(--glide-card) !important;
  max-width: none !important;
  height: calc(var(--glide-card) * var(--glide-hw));
  margin: 0 0 0 calc(var(--glide-card) / -2) !important;
  padding: 0 !important;
  /* ตำแหน่งบนวงโค้งคำนวณใน JS (ศูนย์กลางวงล้ออยู่ต่ำลงไป --glide-radius-wheel) · หมุน/ย่อ/เด้ง ที่กลางการ์ด */
  transform-origin: 50% 50%;
  transition: --lift .55s cubic-bezier(.34, 1.56, .64, 1), --grow .55s cubic-bezier(.34, 1.56, .64, 1), filter .4s ease;
  filter: drop-shadow(0 22px 20px rgb(0 0 0 / .35));
  will-change: transform;
  cursor: zoom-in;
}
.spu-glide__view > .elementor-element > .elementor-widget-container,
.spu-glide__view > .elementor-element a,
.spu-glide__view > .elementor-element figure { display: block; width: 100%; height: 100%; margin: 0; }
.spu-glide__view > .elementor-element img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  border-radius: var(--glide-radius);
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
  filter: none !important;                /* hub-more เดิมทำให้รูปมืด */
}
.spu-glide__view > .elementor-element figcaption { display: none; }
.spu-glide__view > .elementor-element.is-off { visibility: hidden; }

/* ชี้ = เด้งออกจากวงล้อ + ขยาย + แสงวาวพาดผ่าน */
.spu-glide__view:not(.is-drag) > .elementor-element:hover,
.spu-glide__view > .elementor-element:focus-visible,
.spu-glide__view > .elementor-element.is-up {
  --lift: -34px;
  --grow: 1.08;
  filter: drop-shadow(0 38px 30px rgb(0 0 0 / .5));
}
.spu-glide__view > .elementor-element::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--glide-radius);
  background: linear-gradient(115deg, transparent 35%, rgb(255 255 255 / .45) 50%, transparent 65%) no-repeat;
  background-size: 250% 100%;
  background-position: 130% 0;
  opacity: 0;
  pointer-events: none;
}
.spu-glide__view:not(.is-drag) > .elementor-element:hover::after,
.spu-glide__view > .elementor-element.is-up::after { animation: spu-glide-shine .9s ease-out .12s both; }
@keyframes spu-glide-shine {
  0%   { opacity: 1; background-position: 130% 0; }
  100% { opacity: 1; background-position: -60% 0; }
}
.spu-glide__view > .elementor-element:focus-visible { outline: none; }
.spu-glide__view > .elementor-element:focus-visible img { box-shadow: 0 0 0 3px var(--glide-accent); }

/* ข้อความใต้วงล้อ — คำท้ายประโยคสลับเอง (assets/spu-glide.js: words) */
.spu-glide__words {
  position: relative;
  z-index: 1;                 /* อยู่เหนือขอบล่างของการ์ดใบริมที่โค้งลงมา */
  margin: -78px 0 22px !important;
  padding: 0 16px;
  color: #fff;
  font: 400 clamp(34px, 5vw, 64px)/1.15 "DB HELVETHAICA X BD COND", "Noto Sans Thai", sans-serif;
  letter-spacing: .01em;
  text-align: center;
  text-wrap: balance;
}
.spu-glide__lead { color: rgb(255 255 255 / .92); }
.spu-glide__swap {
  position: relative;
  display: inline-block;
  height: 1.5em;               /* เผื่อสระ/วรรณยุกต์ไทยด้านบน-ล่าง ไม่ให้โดนตัด */
  vertical-align: bottom;
  overflow: hidden;
  transition: width .6s cubic-bezier(.65, 0, .35, 1);
}
.spu-glide__word {
  position: absolute;
  left: 0;
  bottom: 0;
  white-space: nowrap;
  padding-right: .04em;
  background: linear-gradient(90deg, #ff4fb8, var(--glide-accent) 45%, #ff9a3c);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  transform: translateY(100%);
  filter: blur(6px);
  opacity: 0;
  transition: transform .65s cubic-bezier(.22, 1, .36, 1), filter .65s ease, opacity .5s ease;
}
.spu-glide__word.is-in  { transform: translateY(0); filter: blur(0); opacity: 1; }
.spu-glide__word.is-out { transform: translateY(-100%); filter: blur(6px); opacity: 0; }

/* ปุ่มใต้วงล้อ */
.spu-glide__bar { display: flex; justify-content: center; margin-top: 6px; position: relative; }
.spu-glide__all {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 24px;
  border-radius: 23px;
  background: var(--glide-accent);
  color: #fff !important;
  font: 600 15px/1 "Noto Sans Thai", system-ui, sans-serif;
  text-decoration: none !important;
  transition: filter .2s;
}
.spu-glide__all::after { content: "→"; font-weight: 400; }
.spu-glide__all:hover { filter: brightness(1.12); }
.spu-glide__all:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ---- ซูมเปิด (Quick Look) ---- */
.spu-look {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgb(0 0 0 / 0);
  transition: background .4s ease;
  cursor: zoom-out;
}
.spu-look.is-open { background: rgb(0 0 0 / .78); }
.spu-look img {
  position: fixed;
  left: 0;
  top: 0;
  max-width: none;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 30px 80px rgb(0 0 0 / .6);
  transform-origin: 0 0;
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
  will-change: transform;
}
.spu-look__close {
  position: fixed;
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / .14);
  color: #fff;
  font: 400 26px/1 system-ui, sans-serif;
  cursor: pointer;
  opacity: 0;
  transition: opacity .3s .2s, background .2s;
}
.spu-look.is-open .spu-look__close { opacity: 1; }
.spu-look__close:hover { background: #EB008B; }
.spu-look__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (max-width: 1024px) {
  .spu-glide { --glide-card: 200px; --glide-radius-wheel: 1900px; --glide-step: 5.6; }
}
@media (max-width: 767px) {
  .spu-glide { --glide-card: 150px; --glide-radius-wheel: 900px; --glide-step: 9.2; --glide-speed: 1.4; --glide-radius: 14px; }
  .spu-glide__view { height: calc(var(--glide-card) * var(--glide-hw) + 80px); }
  .spu-glide__words { margin-top: -34px !important; }
  .spu-glide__view > .elementor-element { top: 34px; }
  .spu-glide__all { height: 42px; padding: 0 18px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .spu-glide__view > .elementor-element, .spu-look img, .spu-look { transition-duration: .01s !important; }
  .spu-glide__view > .elementor-element::after { animation: none !important; }
  .spu-glide__word, .spu-glide__swap { transition-duration: .01s !important; filter: none !important; }
}