/* ===========================================================================
   SPU HUB — เนื้อหาในแท็บโซเชียล (ใช้คู่กับ spu-tabs-social)
   โหลดทุกหน้าผ่าน functions.php ข้อ 11

     hub-cards            การ์ดแนวตั้ง 4 ใบ (TikTok / Reels)
     hub-cards--reels     + ไอคอน Reels มุมขวาบน
     hub-ig               Instagram — รูปใหญ่ซ้าย 1 + รูปเล็ก 3×2
     hub-more             (ใส่ที่รูปสุดท้าย) ทับด้วยข้อความ "ดูภาพทั้งหมด"
     [spu_youtube]        SPU Tube — player + รายการวิดีโอ (shortcode)

   ใส่ class ที่ Container  ->  Advanced -> CSS Classes
   ขนาดวัดจาก Figma ที่จอกว้าง 1440
   =========================================================================== */

/* ---- การ์ดแนวตั้ง ------------------------------------------------------ */

.hub-cards {
  --hc-cols:   4;
  --hc-gap:    12px;
  --hc-ratio:  311 / 425;
  --hc-radius: 16px;

  display: grid !important;
  grid-template-columns: repeat(var(--hc-cols), minmax(0, 1fr));
  gap: var(--hc-gap) !important;
  padding: 0 !important;
}
.hub-cards > .elementor-element { width: auto !important; max-width: none !important; margin: 0 !important; }

.hub-cards .elementor-widget-image,
.hub-ig .elementor-widget-image { position: relative; overflow: hidden; }

.hub-cards img {
  display: block;
  width: 100% !important;
  height: auto;
  aspect-ratio: var(--hc-ratio);
  object-fit: cover;
  border-radius: var(--hc-radius);
  transition: transform .35s cubic-bezier(.2, .7, .2, 1), filter .2s ease;
}
.hub-cards a:hover img,
.hub-cards a:focus-visible img { transform: translateY(-4px); filter: brightness(1.06); }
.hub-cards a:focus-visible { outline: 3px solid #ff0080; outline-offset: 3px; border-radius: var(--hc-radius); display: block; }

/* ไอคอน Reels มุมขวาบน */
.hub-cards--reels .elementor-widget-image::after {
  content: "";
  position: absolute;
  top: 12px;
  right: 12px;
  width: 26px;
  height: 26px;
  pointer-events: none;
  background: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5zm-3 6v9a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V8H4zm4.6-4 2.4 3h2.6L12.2 4H8.6zm6 0 2.4 3H20a3 3 0 0 0-3-3h-2.4zM10 10.5v7l6-3.5-6-3.5z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5zm-3 6v9a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V8H4zm4.6-4 2.4 3h2.6L12.2 4H8.6zm6 0 2.4 3H20a3 3 0 0 0-3-3h-2.4zM10 10.5v7l6-3.5-6-3.5z'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 1px 3px rgb(0 0 0 / .5));
}

/* ---- Instagram — สไลด์รูป 1:1 ซ้าย + รูปแนวตั้ง 3 คอลัมน์ ------------- */
/* 1.3665fr = 425/311 สไลด์จัตุรัสกับรูปแนวตั้ง 311:425 จึงสูงเท่ากัน */

.hub-ig {
  --ig-gap: 12px;
  --ig-max: 1084px;
  --ig-radius: 16px;

  display: grid !important;
  grid-template-columns: 1.3665fr 1fr 1fr 1fr;
  gap: var(--ig-gap) !important;
  max-width: var(--ig-max);
  margin: 0 auto !important;
  padding: 0 !important;
}
.hub-ig > .elementor-element { width: auto !important; max-width: none !important; margin: 0 !important; }

.hub-ig img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 311 / 425;
  object-fit: cover;
  border-radius: var(--ig-radius);
  transition: filter .2s ease;
}

.hub-ig__slide { position: relative !important; display: block !important; min-width: 0; aspect-ratio: 1; overflow: hidden; border-radius: var(--ig-radius); }
.hub-ig__track {
  position: relative !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  width: 100% !important;
  height: 100%;
  touch-action: pan-y;
  transition: transform .45s cubic-bezier(.2, .7, .2, 1);
}
.hub-ig__track > .elementor-element { flex: 0 0 100% !important; width: 100% !important; max-width: none !important; min-width: 0; margin: 0 !important; }
@media (prefers-reduced-motion: reduce) { .hub-ig__track { transition: none; } }
.hub-ig__track img { aspect-ratio: 1; border-radius: 0; }

.hub-ig .hub-ig__nav {
  all: unset;
  box-sizing: border-box;
  position: absolute;
  z-index: 2;
  top: 50%;
  width: 34px;
  height: 34px;
  margin-top: -17px;
  border-radius: 50%;
  background: rgb(0 0 0 / .45);
  cursor: pointer;
  transition: background-color .2s ease;
}
.hub-ig .hub-ig__nav:hover { background: #e6007e; }
.hub-ig .hub-ig__nav:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.hub-ig .hub-ig__nav::before { content: ""; position: absolute; top: 11px; width: 10px; height: 10px; border-top: 2px solid #fff; border-right: 2px solid #fff; }
.hub-ig .hub-ig__nav.is-prev { left: 10px; }
.hub-ig .hub-ig__nav.is-next { right: 10px; }
.hub-ig .hub-ig__nav.is-prev::before { left: 13px; transform: rotate(-135deg); }
.hub-ig .hub-ig__nav.is-next::before { left: 9px; transform: rotate(45deg); }
.hub-ig__dots { position: absolute; z-index: 2; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 7px; pointer-events: none; }
.hub-ig .hub-ig__dot { all: unset; box-sizing: border-box; width: 9px; height: 9px; border-radius: 50%; background: rgb(255 255 255 / .55); box-shadow: 0 0 3px rgb(0 0 0 / .4); cursor: pointer; pointer-events: auto; }
.hub-ig .hub-ig__dot.is-on { background: #e6007e; }
.hub-ig .hub-ig__dot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.hub-ig .elementor-widget-container,
.hub-ig .elementor-widget-container > a,
.hub-ig figure { height: 100%; margin: 0; }
.hub-ig a { display: block; height: 100%; }
.hub-ig a:hover img { filter: brightness(1.08); }
.hub-ig a:focus-visible { outline: 3px solid #ff0080; outline-offset: 2px; }

/* รูปสุดท้าย — ข้อความ "ดูภาพทั้งหมด" ทับรูปมืด (มาจาก Caption ของ Image widget) */
.hub-more figure { position: relative; }
.hub-more img { filter: brightness(.35); }
.hub-more a:hover img { filter: brightness(.5); }
.hub-more figcaption {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 !important;
  color: #fff !important;
  font-size: 24px !important;      /* Elementor ใส่ขนาด caption จากฟอนต์ Global มาให้ */
  pointer-events: none;
}
.hub-more figcaption::after {
  content: "\203A";
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  color: #111;
  font-size: 22px;
  line-height: 28px;
  text-align: center;
  font-weight: 700;
}

/* ---- SPU Tube — player + รายการ -------------------------------------- */

.spu-yt {
  --yt-max:    1105px;
  --yt-gap:    22px;
  --yt-radius: 16px;
  --yt-accent: #ff0080;

  display: grid;
  grid-template-columns: minmax(0, 680fr) minmax(0, 402fr);
  gap: var(--yt-gap);
  max-width: var(--yt-max);
  margin: 0 auto;
  align-items: stretch;
}

.spu-yt__player {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}
.spu-yt__player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.spu-yt__poster {
  all: unset;
  position: absolute;
  inset: 0;
  display: block;
  cursor: pointer;
}
.spu-yt__poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.spu-yt__poster::before {           /* เงาด้านบนให้ชื่อวิดีโออ่านออก */
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 34%;
  background: linear-gradient(to bottom, rgb(0 0 0 / .65), transparent);
}
.spu-yt__now {
  position: absolute;
  top: 14px;
  left: 18px;
  right: 18px;
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.spu-yt__play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 68px;
  height: 48px;
  transform: translate(-50%, -50%);
  border-radius: 14px;
  background: #ff0000;
  transition: transform .2s ease;
}
.spu-yt__play::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-35%, -50%);
  border-style: solid;
  border-width: 10px 0 10px 17px;
  border-color: transparent transparent transparent #fff;
}
.spu-yt__poster:hover .spu-yt__play { transform: translate(-50%, -50%) scale(1.08); }
.spu-yt__poster:focus-visible { outline: 3px solid var(--yt-accent); outline-offset: -3px; }

.spu-yt__list {
  list-style: none;
  margin: 0;
  padding: 12px;
  background: #0d0d0e;
  border-radius: var(--yt-radius);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.spu-yt__list li { margin: 0; flex: 1 1 0; min-height: 0; }

.spu-yt__item {
  all: unset;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 26px 128px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 100%;
  padding: 4px;
  border-radius: 8px;
  cursor: pointer;
  color: #fff;
}
.spu-yt__item:hover { background: rgb(255 255 255 / .06); }
.spu-yt__item:focus-visible { outline: 2px solid var(--yt-accent); }
.spu-yt__item img { width: 128px; aspect-ratio: 16 / 9; object-fit: cover; display: block; border-radius: 4px; }
.spu-yt__title {
  font-size: 13px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ไอคอนเล่น / กำลังเล่น */
.spu-yt__icon {
  justify-self: center;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent #fff;
}
.spu-yt__item[aria-current="true"] .spu-yt__icon {
  width: 16px;
  height: 22px;
  border: 0;
  background: linear-gradient(90deg, #fff 0 5px, transparent 5px 11px, #fff 11px 16px);
}
.spu-yt__item[aria-current="true"] .spu-yt__title { font-weight: 600; }

.spu-yt__empty { text-align: center; }
.spu-yt__empty a { color: #fff; text-decoration: underline; }

/* แท็บ SPU Magazine: ปก + แบนเนอร์ 2 รูป เป็น Image widget เปลี่ยนรูป/ลิงก์ใน Elementor ได้ (lib/hub-magazine-elementor.php)
   --r กว้าง/สูงของปก · --b กว้าง/สูงของแบนเนอร์ · ปกกำหนดความสูงแถว แบนเนอร์ยืดตาม */
.e-con.spu-magel {
  --r: .7672;
  --b: 2.5924;
  --magel-gap: 16px;
  display: grid !important;
  grid-template-columns: 42fr 58fr;
  gap: var(--magel-gap);
  align-items: stretch;
}
.e-con.spu-magel__news { display: flex !important; flex-direction: column; gap: var(--magel-gap); min-width: 0; min-height: 0; }
.spu-magel__img { width: 100%; min-width: 0; margin: 0 !important; overflow: hidden; background: #0d0d0e; }
.spu-magel__img a { display: block; height: 100%; }
.spu-magel__img img { display: block; width: 100% !important; height: 100% !important; max-width: none; object-fit: cover; transition: transform .35s; }
.spu-magel__img:hover img { transform: scale(1.04); }
.spu-magel__cover .jet-listing-grid__items { margin: 0 !important; }   /* ปกเป็น Listing Grid ดึง API ฉบับล่าสุด */
.spu-magel__cover .jet-listing-grid__item { padding: 0 !important; }
.spu-magel__cover :is(.jet-listing-grid, .jet-listing-grid__items, .jet-listing-grid__item, .jet-engine-listing-overlay-wrap, .elementor, .e-con, .elementor-widget, .jet-listing-dynamic-image) {
  display: block !important;   /* ชั้นใน Listing เป็น flex หดตามรูป ปกเลยไม่เต็มคอลัมน์ */
  width: 100% !important;
  max-width: none !important;
  margin: 0;
}
.spu-magel__cover img { aspect-ratio: var(--r); height: auto !important; }
.spu-magel__news .spu-magel__img { flex: 1 1 0; min-height: 0; }
.spu-magel__news .spu-magel__img:last-child img { object-position: 100% 50%; }   /* ตัวหนังสืออยู่ฝั่งขวาของรูป */

/* ---- จอเล็ก ------------------------------------------------------------ */

@media (max-width: 1024px) {
  .hub-cards { --hc-gap: 10px; }
  .spu-yt { grid-template-columns: 1fr; }
  .spu-yt__list li { flex: 0 0 auto; }   /* เรียงต่อใต้วิดีโอ รายการไม่มีความสูงให้แบ่ง flex 1 1 0 ทำให้ทุกแถวสูง 0 ทับกันหมด */
}

@media (max-width: 600px) {
  /* มือถือ: คำนวณความกว้างคอลัมน์ให้ปกกับแบนเนอร์ 2 รูปสูงเท่ากันพอดี ไม่ตัดรูป */
  .e-con.spu-magel { grid-template-columns: 1fr calc((100% - var(--magel-gap) * (1 + var(--r))) / (1 + 2 * var(--r) / var(--b))); }
  .spu-magel__news .spu-magel__img { flex: none; }
  .spu-magel__news .spu-magel__img img { aspect-ratio: var(--b); height: auto !important; }
}

@media (max-width: 767px) {
  /* แบบ mobile: การ์ดแนวตั้ง 2 คอลัมน์ 2 แถว */
  .hub-cards { --hc-cols: 2; --hc-gap: 8px; --hc-radius: 12px; }
  .hub-ig { grid-template-columns: 1fr 1fr 1fr; --ig-gap: 6px; }
  .hub-ig > .elementor-element:first-child { grid-column: 1 / -1; grid-row: auto; }
  .hub-more figcaption { font-size: 15px !important; }
  .spu-yt__item { grid-template-columns: 20px 104px minmax(0, 1fr); gap: 8px; }
  .spu-yt__item img { width: 104px; }
  .spu-yt__now { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .hub-cards img, .spu-yt__play { transition: none; }
}


/* ###########################################################################
   Ranking — การ์ดรางวัลบนแท่นเรืองแสง
   ใส่ class  spu-rank  ที่ widget JetElements "Advanced Carousel"
   (selector ของข้อความยาว เพราะ JetElements ใส่ฟอนต์/สี/ชิดซ้ายมาให้ทุก widget ด้วย selector 3–4 class)
   ตั้งใน widget:  Slides to Show = 3,  Centered = เปิด,  Dots = เปิด
   รูปของแต่ละการ์ด = โลโก้พื้นโปร่งใส (แท่นกับแสงชมพู CSS วาดให้)
   ########################################################################### */

.spu-rank {
  --rk-h:       487px;     /* ความสูงการ์ด */
  --rk-stage:   320px;     /* ความสูงส่วนแท่น (ด้านบน) */
  --rk-logo:    205px;     /* ความสูงโลโก้ */
  --rk-glow:    rgb(255 0 128 / .55);
  --rk-gap:     20px;      /* ระยะห่างครึ่งหนึ่งระหว่างการ์ด */
  --rk-scale:   1.17;      /* ขยายการ์ดตรงกลาง */
}

.spu-rank .slick-list { padding-top: 46px !important; padding-bottom: 46px !important; }
.spu-rank .jet-carousel__item { padding: 0 var(--rk-gap); }

.spu-rank .jet-carousel__item-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: var(--rk-h);
  overflow: hidden;
  border-radius: 16px;
  background: #1b1b1d;
  transition: transform .45s cubic-bezier(.2, .7, .2, 1), opacity .3s ease;
  opacity: .82;
}
.spu-rank .slick-center .jet-carousel__item-inner { transform: scale(var(--rk-scale)); opacity: 1; }

/* แท่น + แสงชมพู */
.spu-rank .jet-carousel__item-inner::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--rk-stage);
  background:
    url("img/rank-podium.png") center bottom / 100% auto no-repeat,
    radial-gradient(ellipse 75% 42% at 50% 86%, var(--rk-glow), transparent 72%),
    #000;
}

.spu-rank .jet-carousel__item-img {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  height: var(--rk-logo) !important;
  width: auto !important;
  max-width: 80%;
  object-fit: contain;
  margin: 40px auto 0;
  filter: drop-shadow(0 8px 14px rgb(0 0 0 / .5));
}

.elementor-widget-jet-carousel.spu-rank .jet-carousel .jet-carousel__item .jet-carousel__content {
  position: relative;
  z-index: 1;
  margin-top: calc(var(--rk-stage) - var(--rk-logo) - 40px);
  padding: 22px 18px 0;
  text-align: center;
  color: #fff;
}
.elementor-widget-jet-carousel.spu-rank .jet-carousel .jet-carousel__item .jet-carousel__content .jet-carousel__item-title {
  margin: 0 0 8px;
  color: #fff;
  font-family: "Noto Sans Thai", sans-serif;
  font-weight: 700;
  font-size: clamp(15px, 1.5vw, 17px);   /* ชื่อยาวสุด "มาตรฐานระดับสากล 5 ดาว" ต้องอยู่บรรทัดเดียว: 17px กว้าง 187px พื้นที่จริงจอเล็กเหลือ ~170px */
  line-height: 1.35;
}
/* ลิงก์ในหัวข้อ: Site Settings ของ Elementor ตั้งฟอนต์ลิงก์เป็น Sarabun 16px ทับค่าหัวข้อ */
.elementor-widget-jet-carousel.spu-rank .jet-carousel .jet-carousel__item .jet-carousel__content .jet-carousel__item-title a {
  font: inherit;
  color: inherit;
}
.elementor-widget-jet-carousel.spu-rank .jet-carousel .jet-carousel__item .jet-carousel__content .jet-carousel__item-text {
  color: #d7d7dc;
  font-size: 13px;
  line-height: 1.6;
}

/* จุดด้านล่าง */
.spu-rank .jet-slick-dots { display: flex; justify-content: center; gap: 8px; margin: 6px 0 0 !important; padding: 0; }
.spu-rank .jet-slick-dots li { margin: 0 !important; padding: 0 !important; }
.spu-rank .jet-slick-dots li span {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #4a4a50 !important;
}
.spu-rank .jet-slick-dots li.slick-active span { background: #fff !important; }

@media (max-width: 767px) {
  .spu-rank { --rk-h: 420px; --rk-stage: 270px; --rk-logo: 165px; --rk-scale: 1; --rk-gap: 8px; }
  .spu-rank .slick-list { padding-top: 10px !important; padding-bottom: 10px !important; }
  .elementor-widget-jet-carousel.spu-rank .jet-carousel .jet-carousel__item .jet-carousel__content .jet-carousel__item-title { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .spu-rank .jet-carousel__item-inner { transition: none; }
}