/* =========================================================
   Global Story Slider — Swiper slider กลาง
   ใช้คู่กับ global-story.css (pattern ข้อความ)

   Variants
   --hero    : Top Stories    ข้อความขาว, เงา desktop ซ้าย→ขวา / mobile ล่าง→บน
   --card    : Editor's Picks กรอบขาวครอบข้อความ, เงาล่าง→บน
   --overlay : Op-ed          ข้อความขาว ไม่มีกรอบ, เงาล่าง→บน

   ทุก variant: desktop ภาพ width:100% height:auto
                mobile ภาพ crop center สูง 100vh, bullet อยู่กึ่งกลาง

   ขนาด/ระยะอิงความกว้างของ slider (cqi) ไม่ใช่ viewport
   จึงสเกลถูกทั้งกรณีสุดขอบจอ และกรณีอยู่ใน container ที่มี padding

   มี Swiper core CSS ที่จำเป็นในไฟล์นี้แล้ว ไม่ต้องโหลด swiper-bundle.css
   ========================================================= */

.global-story-slider {
  container-type: inline-size;
  position: relative;
  width: 100%;

  /* ---- ค่ากลาง (แต่ละ variant ตั้งทับ) ---- */
  --gss-inline: 6.25cqi;
  --gss-content-bottom: 5.8cqi;
  --gss-pagination-bottom: 2.45cqi;
  --gss-dot: 8px;
  --gss-dot-active: 20px;
  --gss-dot-gap: 12px;
  --gss-ease: cubic-bezier(.65, 0, .35, 1);
  --gss-shade: none;

  /* ถ้าโหลด swiper-bundle.css ไว้ ค่าพวกนี้กันไม่ให้ค่าเดิมทับ */
  --swiper-pagination-bullet-horizontal-gap: 0px;
  --swiper-wrapper-transition-timing-function: var(--gss-ease);
}

/* =========================================================
   Swiper core
   ========================================================= */
.global-story-slider__swiper {
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.global-story-slider .swiper-wrapper {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  box-sizing: content-box;
  transition-property: transform;
  transition-timing-function: var(--gss-ease);
}

.global-story-slider__slide {
  position: relative;
  flex-shrink: 0;
  width: 100%;
  overflow: hidden;
  background: #000;
}

.global-story-slider .swiper-notification {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1000;
  opacity: 0;
  pointer-events: none;
}

/* =========================================================
   Media
   ========================================================= */
.global-story-slider__media {
  position: relative;
  display: block;
}

.global-story-slider__img {
  display: block;
  width: 100%;
  height: auto;
}

.global-story-slider__media--empty {
  aspect-ratio: 1920 / 1006;
}

.global-story-slider__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--gss-shade);
}

.global-story-slider .swiper-lazy-preloader {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  box-sizing: border-box;
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
  border: 2px solid rgba(255, 255, 255, .6);
  border-top-color: transparent;
  border-radius: 50%;
  animation: global-gss-spin 1s linear infinite;
}

@keyframes global-gss-spin {
  to { transform: rotate(360deg); }
}

/* =========================================================
   Content
   ========================================================= */
.global-story-slider__content {
  position: absolute;
  z-index: 2;
  right: var(--gss-inline);
  bottom: var(--gss-content-bottom);
  left: var(--gss-inline);
  pointer-events: none; /* ลาก/ปัดผ่านพื้นที่ว่างได้ */
}

.global-story-slider__content a {
  pointer-events: auto;
}

/* =========================================================
   Pagination
   ========================================================= */
.global-story-slider .swiper-pagination.global-story-slider__pagination {
  position: absolute;
  z-index: 3;
  top: auto;
  right: auto;
  bottom: var(--gss-pagination-bottom);
  left: var(--gss-pagination-inline, var(--gss-inline));
  display: flex;
  align-items: center;
  gap: var(--gss-dot-gap);
  width: auto;
  line-height: 0;
  text-align: left;
  transform: none;
}

.global-story-slider .global-story-slider__pagination .swiper-pagination-bullet {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: var(--gss-dot);
  height: var(--gss-dot);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #fff;
  opacity: .5;
  cursor: pointer;
  transition: width .35s var(--gss-ease), opacity .35s ease;
}

/* ขยายพื้นที่แตะสำหรับ touch โดยไม่เปลี่ยนขนาดที่มองเห็น */
.global-story-slider .global-story-slider__pagination .swiper-pagination-bullet::before {
  content: "";
  position: absolute;
  inset: -10px calc(var(--gss-dot-gap) / -2);
}

.global-story-slider .global-story-slider__pagination .swiper-pagination-bullet-active {
  width: var(--gss-dot-active);
  opacity: 1;
}

.global-story-slider .global-story-slider__pagination .swiper-pagination-bullet:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* =========================================================
   Variant: HERO (Top Stories) — mockup 1920 / 1081
   ========================================================= */
.global-story-slider--hero {
  background: #000;

  --gss-inline: 6.25cqi;                                /* 120 / 1920 */
  --gss-content-bottom: 5.8cqi;
  --gss-pagination-bottom: clamp(16px, 2.45cqi, 48px);
  --gss-shade: linear-gradient(
    90deg,
    #000 0%,
    #000 28%,
    rgba(0, 0, 0, .88) 32%,
    rgba(0, 0, 0, .6) 37%,
    rgba(0, 0, 0, .3) 42%,
    rgba(0, 0, 0, .08) 47%,
    rgba(0, 0, 0, 0) 50%
  );

  --global-story-label-size: clamp(12px, 1.25cqi, 24px);
  --global-story-label-gap: clamp(8px, 2cqi, 38px);
  --global-story-title-size: clamp(28px, 3.1cqi, 80px);
  --global-story-title-lh: 1.3;
  --global-story-title-max: 10.5em;
  --global-story-title-gap: clamp(12px, 1.6cqi, 30px);
  --global-story-meta-size: clamp(12px, 1cqi, 19px);
  --global-story-meta-gap: clamp(14px, 1.5cqi, 28px);
  --global-story-sep-height: .65em;
  --global-story-sep-offset: 0;
}

/* =========================================================
   CARD + OVERLAY: typography ร่วมกัน — mockup slider 1482px
   ========================================================= */
.global-story-slider--card,
.global-story-slider--overlay {
  background: #000;

  --gss-pagination-bottom: clamp(14px, 1.6cqi, 28px);   /* ~24 / 1482 */
  --gss-dot: 8px;
  --gss-dot-active: 20px;
  --gss-dot-gap: 12px;

  --global-story-label-size: clamp(12px, 1.15cqi, 18px);
  --global-story-label-gap: clamp(8px, 1.4cqi, 22px);
  --global-story-title-size: clamp(22px, 2.97cqi, 46px); /* 44 / 1482 */
  --global-story-title-lh: 1.38;
  --global-story-title-gap: clamp(12px, 1.7cqi, 28px);
  --global-story-meta-size: clamp(12px, 1.08cqi, 16px);
  --global-story-meta-gap: clamp(12px, 1.6cqi, 26px);
  --global-story-sep-height: .8em;
  --global-story-sep-offset: 0;
}

/* ---------- CARD (Editor's Picks) ---------- */
.global-story-slider--card {
  --gss-inline: clamp(16px, 3.17cqi, 48px);             /* 47 / 1482 */
  --gss-content-bottom: clamp(40px, 4cqi, 64px);        /* 59 / 1482 */
  --gss-card-width: clamp(300px, 44.2cqi, 700px);       /* 655 / 1482 */
  --gss-card-pad: clamp(16px, 2.16cqi, 36px);           /* 32 / 1482 */
  --gss-shade: linear-gradient(
    0deg,
    #000 0%,
    rgba(0, 0, 0, .85) 8%,
    rgba(0, 0, 0, .45) 18%,
    rgba(0, 0, 0, .12) 28%,
    rgba(0, 0, 0, 0) 34%
  );

  --global-story-title-max: none;
}

.global-story-slider--card .global-story-slider__content {
  right: auto;
  width: var(--gss-card-width);
  max-width: calc(100% - var(--gss-inline) * 2);
  box-sizing: border-box;
  padding: var(--gss-card-pad);
  background: #fff;
}

/* ---------- OVERLAY (Op-ed) ---------- */
.global-story-slider--overlay {
  --gss-inline: clamp(16px, 3.9cqi, 64px);              /* 58 / 1482 */
  --gss-pagination-inline: clamp(14px, 3.6cqi, 60px);   /* 53 / 1482 */
  --gss-content-bottom: clamp(48px, 5.4cqi, 84px);      /* 80 / 1482 */
  --gss-shade: linear-gradient(
    0deg,
    #000 0%,
    rgba(0, 0, 0, .92) 12%,
    rgba(0, 0, 0, .7) 25%,
    rgba(0, 0, 0, .4) 38%,
    rgba(0, 0, 0, .15) 50%,
    rgba(0, 0, 0, 0) 60%
  );

  --global-story-title-max: 14em;
}

/* =========================================================
   Mobile
   ========================================================= */
@media (max-width: 767.98px) {

  /* ---- ทุก variant: crop center สูงเต็มจอ, bullet กึ่งกลาง ---- */
  .global-story-slider__slide {
    height: 100vh;
    height: 100svh; /* ไม่ให้ bullet จมใต้แถบ browser */
  }

  .global-story-slider__media {
    position: absolute;
    inset: 0;
  }

  .global-story-slider__img {
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .global-story-slider__media--empty {
    aspect-ratio: auto;
  }

  .global-story-slider .swiper-pagination.global-story-slider__pagination {
    right: 0;
    left: 0;
    justify-content: center;
    width: 100%;
  }

  /* ---- HERO — mockup 1081 ---- */
  .global-story-slider--hero {
    --gss-inline: clamp(20px, 6.5cqi, 48px);
    --gss-pagination-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    --gss-content-bottom: calc(var(--gss-pagination-bottom) + var(--gss-dot) + 28px);
    --gss-dot: 6px;
    --gss-dot-active: 16px;
    --gss-dot-gap: 10px;
    --gss-shade: linear-gradient(
      0deg,
      #000 0%,
      #000 29%,
      rgba(0, 0, 0, .88) 32%,
      rgba(0, 0, 0, .6) 36%,
      rgba(0, 0, 0, .3) 40%,
      rgba(0, 0, 0, .08) 44%,
      rgba(0, 0, 0, 0) 47%
    );

    --global-story-label-size: clamp(12px, 3.4cqi, 16px);
    --global-story-label-gap: clamp(10px, 3.7cqi, 20px);
    --global-story-title-size: clamp(26px, 7.8cqi, 44px);
    --global-story-title-lh: 1.25;
    --global-story-title-max: none;
    --global-story-title-gap: clamp(14px, 4cqi, 24px);
    --global-story-meta-size: clamp(12px, 3.4cqi, 15px);
    --global-story-meta-gap: clamp(12px, 4.5cqi, 24px);
  }

  /* ---- CARD + OVERLAY typography — mockup 624 ---- */
  .global-story-slider--card,
  .global-story-slider--overlay {
    --gss-inline: clamp(16px, 6.4cqi, 40px);            /* 40 / 624 */
    --gss-pagination-inline: var(--gss-inline);
    --gss-dot: 6px;
    --gss-dot-active: 16px;
    --gss-dot-gap: 8px;

    --global-story-label-size: clamp(12px, 2.1cqi, 14px);
    --global-story-label-gap: clamp(8px, 2cqi, 14px);
    --global-story-title-size: clamp(22px, 6.3cqi, 34px); /* 39 / 624 */
    --global-story-title-lh: 1.2;
    --global-story-title-max: none;
    --global-story-title-gap: clamp(12px, 3.5cqi, 20px);
    --global-story-meta-size: 12px;
    --global-story-meta-gap: 12px;
  }

  /* ---- CARD ---- */
  .global-story-slider--card {
    --gss-pagination-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    --gss-content-bottom: calc(var(--gss-pagination-bottom) + var(--gss-dot) + 18px);
    --gss-card-pad: clamp(14px, 3.7cqi, 24px);           /* 23 / 624 */
    --gss-shade: linear-gradient(
      0deg,
      #000 0%,
      rgba(0, 0, 0, .9) 6%,
      rgba(0, 0, 0, .5) 14%,
      rgba(0, 0, 0, .15) 22%,
      rgba(0, 0, 0, 0) 28%
    );
  }

  .global-story-slider--card .global-story-slider__content {
    right: var(--gss-inline);
    width: auto;
    max-width: none;
  }

  /* ---- OVERLAY ---- */
  .global-story-slider--overlay {
    --gss-pagination-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    --gss-content-bottom: calc(var(--gss-pagination-bottom) + var(--gss-dot) + 22px);
    --gss-shade: linear-gradient(
      0deg,
      #000 0%,
      rgba(0, 0, 0, .85) 15%,
      rgba(0, 0, 0, .6) 28%,
      rgba(0, 0, 0, .3) 42%,
      rgba(0, 0, 0, .1) 52%,
      rgba(0, 0, 0, 0) 60%
    );
  }
}

@media (prefers-reduced-motion: reduce) {
  .global-story-slider .global-story-slider__pagination .swiper-pagination-bullet {
    transition: none;
  }

  .global-story-slider .swiper-lazy-preloader {
    animation-duration: 3s;
  }
}