/* ==========================================================================
   cover-information.css
   คาร์รูเซลวารสารประชาสัมพันธ์ — โรงเรียนบางแก้วประชาสรรค์

   Coverflow ที่ขับด้วยตำแหน่ง scroll จริง ๆ ทุกเฟรม (ไม่ใช่สลับสองสถานะ)
   ปกกลางคมชัดเต็มขนาด ปกข้าง ๆ หมุนถอยเข้าไปในระนาบลึก
   ฐานยังเป็น scroll-snap เพื่อให้ลากบนมือถือได้ลื่นแบบเนทีฟ
   ทุกอย่างถูก scope ไว้ใต้ .cover-carousel จึงไม่กระทบส่วนอื่นของหน้า
   ========================================================================== */

@import url(https://fonts.bunny.net/css?family=jura:400,500,600);

.cover-carousel {
  /* palette */
  --cc-ink: #0f172b;
  --cc-ink-60: rgba(15, 23, 43, 0.6);
  --cc-ink-30: rgba(15, 23, 43, 0.3);
  --cc-paper: #f6f7fa;
  --cc-mist: #e7ecf4;
  --cc-gold: #b8862b;

  /* ปก */
  --cover-w: 250px;
  --cover-ratio: 3 / 4;
  --card-radius: 14px;

  /* ปุ่ม */
  --btn: 44px;
  --dot-slot: 16px;
  --dot-window: 9;

  --speed: 320ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  position: relative;
  width: min(calc(100% - 2rem), 940px);
  margin-inline: auto;
  color: var(--cc-ink);
  -webkit-tap-highlight-color: transparent;
}

/* ==========================================================================
   HOST SECTION
   streesp.css ตรึงทุก <section> ไว้ที่ height: 850px — ปล่อยเฉพาะอันที่มี
   คาร์รูเซลให้สูงตามเนื้อหา section อื่นยังคงความสูงเดิม
   ========================================================================== */

section:has(.cover-carousel) {
  height: auto;
  padding-block-end: 1.75rem;
}

/* ==========================================================================
   STAGE — พื้นหลังนุ่ม ๆ ที่ปกลอยอยู่ข้างบน
   ========================================================================== */

.cover-carousel .cc-stage {
  position: relative;
  border-radius: 22px;
  background:
    radial-gradient(90% 120% at 50% 100%, rgba(15, 23, 43, 0.07), transparent 62%),
    linear-gradient(180deg, var(--cc-paper), var(--cc-mist));
  box-shadow: inset 0 0 0 1px rgba(15, 23, 43, 0.05);
  overflow: hidden;
}

/* เงาใต้ปกกลาง — ให้ปกที่อยู่ตรงกลางดูวางอยู่บนพื้น */
.cover-carousel .cc-floor {
  position: absolute;
  bottom: 1.6rem;
  left: 50%;
  z-index: 0;
  width: calc(var(--cover-w) * 0.92);
  height: 26px;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(15, 23, 43, 0.3), transparent);
  filter: blur(7px);
  pointer-events: none;
}

/* ==========================================================================
   TRACK
   ========================================================================== */

.cover-carousel .list {
  /* ล้างกฎ .list เดิมใน streesp.css (บรรทัด 417-427) */
  position: relative;
  inset: auto;
  transform: none;
  transition: none;
  width: auto;
  height: auto;
  margin: 0;
  list-style: none;

  display: flex;
  align-items: center;
  gap: 0.75rem;

  padding-block: 2.25rem 3rem;
  padding-inline: max(0px, calc(50% - var(--cover-w) / 2)); /* ให้ปกแรก/ปกสุดท้ายอยู่กลางได้ */

  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;

  /* ปกริมสองข้างจางกลืนพื้นหลัง และ mask ทำให้ z-index ของปกอยู่ในกรอบนี้
     ปุ่มกับแถบด้านล่างจึงลอยอยู่เหนือปกเสมอ */
  z-index: 1;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}

.cover-carousel .list::-webkit-scrollbar {
  display: none;
}

.cover-carousel .list:focus-visible {
  outline: 2px dashed var(--cc-ink-30);
  outline-offset: -6px;
  border-radius: 18px;
}

.cover-carousel.is-dragging .list {
  cursor: grabbing;
}

/* ==========================================================================
   ITEMS
   transform ทั้งหมดอยู่บน .cc-card ไม่ใช่ .item — เพราะ scroll-snap
   คิดจากกล่องที่ถูก transform แล้ว ถ้าขยับ .item จุด snap จะเลื่อนตาม
   ========================================================================== */

.cover-carousel .item {
  flex: 0 0 var(--cover-w);
  position: relative; /* z-index กำหนดจาก JS ตามระยะห่างจากกลาง */
  display: block;
  margin: 0;
  scroll-snap-align: center;
  scroll-snap-stop: normal;
}

.cover-carousel .cc-card {
  position: relative;
  display: block;
  width: 100%;
  border-radius: var(--card-radius);
  background: #fff;
  overflow: hidden;
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  box-shadow:
    0 1px 2px rgba(15, 23, 43, 0.16),
    0 18px 30px -14px rgba(15, 23, 43, 0.45);
}

.cover-carousel .cc-card img {
  display: block;
  width: 100%;
  height: auto;
  /* .list img เดิมใส่ padding 5px กับเส้นขอบสีชมพูไว้ — ล้างทั้งคู่ */
  padding: 0;
  margin: 0;
  border: 0;
  aspect-ratio: var(--cover-ratio);
  object-fit: cover;
  object-position: center top;
  border-radius: inherit;
  background: linear-gradient(180deg, #eef1f6, #e2e7f0);
  user-select: none;
  -webkit-user-drag: none;
}

/* ม่านมืดที่ค่อย ๆ เข้มขึ้นตามระยะห่างจากกลาง */
.cover-carousel .cc-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(15, 23, 43, 0.16), rgba(15, 23, 43, 0.5));
  opacity: var(--dim, 0);
  pointer-events: none;
}

/* ก่อน JS วางตำแหน่งเฟรมแรก ซ่อนไว้ก่อน กันปก 100 ใบกระพริบ */
.cover-carousel.cc-enhanced .cc-card {
  opacity: 0;
}

.cover-carousel .item.cc-live .cc-card {
  will-change: transform, opacity;
}

.cover-carousel .item.cc-live .cc-card:focus-visible {
  outline: 3px solid var(--cc-gold);
  outline-offset: 3px;
}

/* ==========================================================================
   ปุ่มก่อนหน้า / ถัดไป
   ========================================================================== */

.cover-carousel .cc-btn {
  position: absolute;
  top: calc(50% - 0.4rem);
  z-index: 4;
  width: var(--btn);
  height: var(--btn);
  display: grid;
  place-content: center;
  padding: 0;
  translate: 0 -50%;
  font: 500 0.95rem/1 "Jura", sans-serif;
  color: var(--cc-ink);
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(15, 23, 43, 0.1);
  border-radius: 50%;
  box-shadow: 0 6px 16px -6px rgba(15, 23, 43, 0.5);
  backdrop-filter: blur(6px);
  cursor: pointer;
  transition:
    background var(--speed) var(--ease),
    color var(--speed) var(--ease),
    scale var(--speed) var(--ease),
    opacity var(--speed) var(--ease);
}

.cover-carousel .cc-btn--prev {
  left: 0.75rem;
}

.cover-carousel .cc-btn--next {
  right: 0.75rem;
}

.cover-carousel .cc-btn:hover,
.cover-carousel .cc-btn:focus-visible {
  background: var(--cc-ink);
  color: #fff;
  scale: 1.08;
}

.cover-carousel .cc-btn:focus-visible {
  outline: 2px solid var(--cc-gold);
  outline-offset: 3px;
}

.cover-carousel .cc-btn[disabled] {
  opacity: 0.3;
  cursor: default;
  scale: 1;
}

/* ==========================================================================
   แถบความคืบหน้า — บอกว่าอยู่ตรงไหนของทั้งชุด
   ========================================================================== */

.cover-carousel .cc-rule {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 4;
  height: 2px;
  background: rgba(15, 23, 43, 0.08);
}

.cover-carousel .cc-rule span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--cc-gold);
  transition: width var(--speed) var(--ease);
}

/* ==========================================================================
   คำบรรยายปกที่อยู่ตรงกลาง
   ========================================================================== */

.cover-carousel .cc-caption {
  display: block;
  margin-block: 0.9rem 0;
  font: 600 1.05rem/1.3 "Jura", sans-serif;
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--cc-ink);
  transition:
    opacity 160ms linear,
    translate 160ms var(--ease);
}

.cover-carousel .cc-caption.is-swapping {
  opacity: 0;
  translate: 0 4px;
}

/* ==========================================================================
   แถวควบคุม — ตัวนับ, จุดบอกตำแหน่ง, ปุ่มเล่น/หยุด
   จุดเลื่อนเป็นหน้าต่างวิ่งตาม ปก 100 ใบจึงไม่กลายเป็นจุด 100 จุด
   ========================================================================== */

.cover-carousel .cc-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  margin-block-start: 0.5rem;
}

.cover-carousel .cc-count {
  min-width: 4.5rem;
  font: 400 0.8rem/1 "Jura", sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  text-align: right;
  color: var(--cc-ink-60);
}

.cover-carousel .cc-markers {
  width: calc(var(--dot-slot) * var(--dot-window));
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 24%, #000 76%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 24%, #000 76%, transparent);
}

.cover-carousel .cc-strip {
  display: flex;
  transition: translate 420ms var(--ease);
}

.cover-carousel .cc-dot {
  flex: none;
  width: var(--dot-slot);
  height: var(--dot-slot);
  display: grid;
  place-items: center;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}

.cover-carousel .cc-dot i {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cc-ink);
  opacity: 0.22;
  transition:
    scale 260ms var(--ease),
    opacity 260ms var(--ease),
    background-color 260ms var(--ease);
}

.cover-carousel .cc-dot.is-current i {
  background: var(--cc-gold);
  opacity: 1;
  scale: 1.5;
  box-shadow: 0 0 0 4px rgba(184, 134, 43, 0.15);
}

.cover-carousel .cc-dot.is-far i {
  scale: 0.6;
  opacity: 0.14;
}

.cover-carousel .cc-dot.is-out i {
  scale: 0.35;
  opacity: 0;
}

.cover-carousel .cc-dot:hover i,
.cover-carousel .cc-dot:focus-visible i {
  opacity: 0.85;
}

.cover-carousel .cc-dot:focus-visible {
  outline: 2px solid var(--cc-gold);
  outline-offset: -2px;
  border-radius: 50%;
}

.cover-carousel .cc-play {
  width: 26px;
  height: 26px;
  display: grid;
  place-content: center;
  padding: 0;
  font-size: 0.5rem;
  line-height: 1;
  color: var(--cc-ink);
  background: none;
  border: 1px solid rgba(15, 23, 43, 0.25);
  border-radius: 50%;
  opacity: 0.5;
  cursor: pointer;
  transition:
    opacity 150ms var(--ease),
    background-color 150ms var(--ease),
    color 150ms var(--ease);
}

.cover-carousel .cc-play:hover,
.cover-carousel .cc-play:focus-visible {
  opacity: 1;
  background: var(--cc-ink);
  color: #fff;
}

.cover-carousel .cc-play:focus-visible {
  outline: 2px solid var(--cc-gold);
  outline-offset: 2px;
}

/* ==========================================================================
   จอแคบ
   ========================================================================== */

@media (max-width: 820px) {
  .cover-carousel {
    --cover-w: min(58vw, 210px);
    --btn: 38px;
    --dot-window: 7;
  }

  .cover-carousel .list {
    gap: 0.5rem;
    padding-block: 1.5rem 2.25rem;
  }

  .cover-carousel .cc-btn--prev {
    left: 0.35rem;
  }

  .cover-carousel .cc-btn--next {
    right: 0.35rem;
  }

  .cover-carousel .cc-caption {
    font-size: 0.95rem;
  }
}

/* ==========================================================================
   ลดการเคลื่อนไหว
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .cover-carousel .cc-card,
  .cover-carousel .cc-strip,
  .cover-carousel .cc-dot i,
  .cover-carousel .cc-btn,
  .cover-carousel .cc-caption,
  .cover-carousel .cc-rule span {
    transition: none;
  }
}