/* ==========================================================================
   THE STANDARD GLOBAL — Social share
   variant: --hero (ไอคอนขาวใน hero) / --bar (แถบท้ายบทความ)
   ========================================================================== */

.global-share {
  --gs-size: 32px;
  --gs-icon: 16px;
  --gs-tip-bg: var(--global-ink, #000);
  --gs-tip-fg: var(--global-paper, #fff);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  font-family: var(--fontBody);
  color: var(--global-ink, #000);
}

.global-share__label {
  font-size: clamp(14px, 1.1cqi, 18px);
  line-height: 1.3;
}

.global-share__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.global-share__item {
  margin: 0;
  padding: 0;
  list-style: none;
}

.global-share__item::before {
  content: none;
}

/* ---------- ปุ่มวงกลม ---------- */

.global-share__btn,
.global-share__btn:visited {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--gs-size);
  height: var(--gs-size);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  color: inherit;
  font: inherit;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s;
}

.global-share__btn svg {
  display: block;
  width: var(--gs-icon);
  height: var(--gs-icon);
  flex: 0 0 auto;
}

.global-share__btn:hover,
.global-share__btn:focus-visible {
  border-color: var(--global-red, #E31E24);
  background: var(--global-red, #E31E24);
  color: #fff;
  text-decoration: none;
}

.global-share__btn:focus-visible {
  outline: 2px solid var(--global-red, #E31E24);
  outline-offset: 3px;
}

/* ---------- Copy link: สลับไอคอนเป็นเครื่องหมายถูก ---------- */

.global-share__icon-copy,
.global-share__icon-done {
  display: contents;
}

.global-share__icon-done,
.global-share__copy.is-done .global-share__icon-copy {
  display: none;
}

.global-share__copy.is-done .global-share__icon-done {
  display: contents;
}

.global-share__copy.is-done,
.global-share__copy.is-done:hover {
  border-color: var(--global-ink, #000);
  background: var(--global-ink, #000);
  color: var(--global-paper, #fff);
}

/* ข้อความสำหรับ screen reader (ข้อความที่มองเห็นอยู่ใน tooltip) */
.global-share__status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Tooltip: ชื่อช่องทางตอน hover / "Link copied" ตอนกด ---------- */

.global-share__btn {
  position: relative;
}

.global-share__btn::before,
.global-share__btn::after {
  position: absolute;
  left: 50%;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s ease, transform .2s cubic-bezier(.22, .61, .36, 1);
}

/* ลูกศร */
.global-share__btn::before {
  content: "";
  bottom: calc(100% + 4px);
  border: 5px solid transparent;
  border-top-color: var(--gs-tip-bg);
  border-bottom-width: 0;
  transform: translate(-50%, 4px);
}

/* กล่องข้อความ */
.global-share__btn::after {
  content: attr(data-tip);
  bottom: calc(100% + 9px);
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--gs-tip-bg);
  color: var(--gs-tip-fg);
  font-family: var(--fontBody);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: .01em;
  white-space: nowrap;
  transform: translate(-50%, 4px) scale(.94);
  transform-origin: 50% 100%;
}

@media (hover: hover) {
  .global-share__btn:hover::before,
  .global-share__btn:hover::after {
    opacity: 1;
  }

  .global-share__btn:hover::before {
    transform: translate(-50%, 0);
  }

  .global-share__btn:hover::after {
    transform: translate(-50%, 0) scale(1);
  }
}

.global-share__btn:focus-visible::before,
.global-share__btn.is-tip::before {
  opacity: 1;
  transform: translate(-50%, 0);
}

.global-share__btn:focus-visible::after,
.global-share__btn.is-tip::after {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

/* ปุ่มริมซ้าย/ขวา → ชิดขอบ ไม่ให้ tooltip ล้นจอ (ลูกศรยังอยู่กลางปุ่ม) */
.global-share__item:first-child .global-share__btn::after {
  left: 0;
  transform-origin: 0 100%;
}

.global-share__item:last-child .global-share__btn::after {
  left: auto;
  right: 0;
  transform-origin: 100% 100%;
}

.global-share__item:first-child .global-share__btn::after,
.global-share__item:last-child .global-share__btn::after {
  transform: translate(0, 4px) scale(.94);
}

.global-share__item:first-child .global-share__btn:focus-visible::after,
.global-share__item:first-child .global-share__btn.is-tip::after,
.global-share__item:last-child .global-share__btn:focus-visible::after,
.global-share__item:last-child .global-share__btn.is-tip::after {
  transform: translate(0, 0) scale(1);
}

@media (hover: hover) {
  .global-share__item:first-child .global-share__btn:hover::after,
  .global-share__item:last-child .global-share__btn:hover::after {
    transform: translate(0, 0) scale(1);
  }
}

/* ==========================================================================
   Hero (พื้นดำ)
   ========================================================================== */

.global-share--hero {
  --gs-tip-bg: #fff;
  --gs-tip-fg: #000;
  --gs-size: clamp(32px, 2.2cqi, 42px);
  --gs-icon: clamp(14px, .95cqi, 18px);
  margin-top: clamp(16px, 1.6cqi, 30px);
  color: #fff;
}

.global-share--hero .global-share__copy.is-done,
.global-share--hero .global-share__copy.is-done:hover {
  border-color: #fff;
  background: #fff;
  color: #000;
}

/* ==========================================================================
   Bar (ท้ายบทความ)
   ========================================================================== */

.global-share--bar {
  justify-content: space-between;
  margin-top: clamp(32px, 4cqi, 72px);
  padding: clamp(14px, 1.4cqi, 24px) 0;
  border-top: 2px solid var(--global-ink, #000);
  /*border-bottom: 1px solid var(--global-ink, #000);*/
}

/* ==========================================================================
   Mobile ≤ 767.98px
   ========================================================================== */

@media (max-width: 767.98px) {
  /* ปุ่มใหญ่ขึ้นเล็กน้อยให้แตะง่าย: 6 ปุ่ม × 38 + ช่องว่าง 5 × 10 = 278px
     พอดีจอแคบสุด 320px (เนื้อที่จริง ~280px หลังหัก gutter) */
  .global-share {
    --gs-size: 38px;
    --gs-icon: 16px;
    gap: 12px;
  }

  .global-share__list {
    gap: 10px;
  }

  .global-share--hero {
    margin-top: 18px;
  }

  /* แถบท้ายบทความ: หัวข้ออยู่บรรทัดบน ไอคอนบรรทัดล่าง */
  .global-share--bar {
    flex-direction: column;
    align-items: flex-start;
    padding: 16px 0 18px;
  }

  .global-share--bar .global-share__label {
    font-size: 15px;
  }

  /* hover ไม่มีบนจอสัมผัส → tooltip ขึ้นเฉพาะตอนกด (เช่น Link copied) */
  .global-share__btn:not(.is-done):hover {
    border-color: currentColor;
    background: transparent;
    color: inherit;
  }

  .global-share__btn:active {
    border-color: var(--global-red, #E31E24);
    background: var(--global-red, #E31E24);
    color: #fff;
  }
}

@media (prefers-reduced-motion: reduce) {
  .global-share__btn,
  .global-share__btn::before,
  .global-share__btn::after {
    transition: none;
  }
}