/**
 * 綠點回饋機制 — Figma node 125:128（points 區塊）
 * 僅用於 index-copy.html
 */

.pub-section--points-v2 {
  --points-v2-rail-gutter: clamp(24px, calc((100% - 1245px) / 2), 120px);
  --points-v2-scale: 1.2;
  --points-v2-card-width: 383px; /* 319 × 1.2 */
  --points-v2-card-visual-h: 409px; /* 341 × 1.2 */
  --points-v2-caption-width: 336px; /* 280 × 1.2 */
  --points-v2-caption-overlap: 88px; /* 73 × 1.2 */
  --points-v2-card-text-rail: 158px; /* 132 × 1.2 */
  --points-v2-caption-min-h: 214px; /* 178 × 1.2 */
  --points-v2-grid-gap: 48px; /* 40 × 1.2 */
  padding:
    100px
    var(--points-v2-rail-gutter)
    100px !important;
  background: #fff;
}

.pub-section--points-v2 .pub-section__inner--points {
  max-width: none;
  width: 100%;
  margin: 0 auto;
  padding-left: 0;
  padding-right: 0;
}

/* ── Header ── */
.pub-points-v2__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-width: 640px;
  margin: 0 auto 55px;
  text-align: center;
}

.pub-points-v2__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-family: 'Inter', 'Noto Sans TC', sans-serif;
  font-size: 11px;
  font-weight: 600;
  line-height: 16.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #e60012;
}

.pub-points-v2__eyebrow-mark {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  background: #e60012;
}

.pub-points-v2__title {
  margin: 0;
  font-family: 'Noto Sans TC', 'PingFang TC', sans-serif;
  font-size: 36px;
  font-weight: 600;
  line-height: 48px;
  color: #111;
}

.pub-points-v2__desc {
  margin: 0;
  font-family: 'Noto Sans TC', 'PingFang TC', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 25.6px;
  color: rgba(17, 17, 17, 0.6);
}

/* ── 三卡橫列 ── */
.pub-points-v2__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, var(--points-v2-card-width)));
  align-items: stretch;
  gap: var(--points-v2-grid-gap);
  justify-content: center;
  width: 100%;
  max-width: calc(3 * var(--points-v2-card-width) + 2 * var(--points-v2-grid-gap));
  margin: 0 auto;
}

.pub-points-v2__card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: calc(var(--points-v2-card-visual-h) + var(--points-v2-card-text-rail));
}

/* ── 圖片區 383 × 409（原 319 × 341 放大 120%） ── */
.pub-points-v2__visual {
  position: relative;
  width: 100%;
  height: var(--points-v2-card-visual-h);
  border-radius: 8px;
  overflow: hidden;
}

.pub-points-v2__visual img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  pointer-events: none;
}

/* ── 白底說明卡（疊在圖片左下） ── */
.pub-points-v2__caption {
  position: absolute;
  left: 0;
  top: calc(var(--points-v2-card-visual-h) - var(--points-v2-caption-overlap));
  z-index: 2;
  box-sizing: border-box;
  width: var(--points-v2-caption-width);
  min-height: var(--points-v2-caption-min-h);
  background: #fff;
  border-top-right-radius: 4px;
}

.pub-points-v2__caption--what {
  padding: 19px 24px 20px;
}

.pub-points-v2__caption--earn,
.pub-points-v2__caption--redeem {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 20px;
}

.pub-points-v2__caption-title {
  margin: 0;
  font-family: 'Noto Sans TC', 'PingFang TC', sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 24.3px;
  letter-spacing: 0.01em;
  color: #111;
}

.pub-points-v2__caption--what .pub-points-v2__caption-title {
  margin-bottom: 16px;
}

.pub-points-v2__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.pub-points-v2__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: 'Noto Sans TC', 'PingFang TC', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: rgba(17, 17, 17, 0.75);
}

.pub-points-v2__item--accent {
  color: #111;
}

.pub-points-v2__bullet {
  flex-shrink: 0;
  margin-top: 10px;
  border-radius: 50%;
  background: #111;
}

.pub-points-v2__bullet--sm {
  width: 4px;
  height: 4px;
}

.pub-points-v2__bullet--md {
  width: 5px;
  height: 5px;
  background: #dc2626;
}

.pub-points-v2__em {
  font-family: 'Inter', 'Noto Sans TC', sans-serif;
  font-weight: 700;
  color: #df2f2f;
}

@media (max-width: 1100px) {
  .pub-points-v2__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: none;
    gap: clamp(16px, 3vw, var(--points-v2-grid-gap));
  }

  .pub-points-v2__card {
    --points-v2-card-visual-h: clamp(312px, 36vw, 409px);
    --points-v2-caption-overlap: clamp(74px, 8.6vw, 88px);
  }

  .pub-points-v2__caption {
    width: min(var(--points-v2-caption-width), 88%);
  }
}

@media (max-width: 767px) {
  .pub-section--points-v2 {
    padding-top: 100px !important;
    padding-bottom: 76px !important;
  }

  .pub-points-v2__grid {
    grid-template-columns: 1fr;
    max-width: 432px; /* 360 × 1.2 */
    gap: 38px; /* 32 × 1.2 */
  }

  .pub-points-v2__card {
    --points-v2-card-visual-h: 409px;
    min-height: 0;
  }

  .pub-points-v2__caption {
    position: relative;
    top: auto;
    width: 100%;
    min-height: 0;
    margin-top: calc(-1 * var(--points-v2-caption-overlap));
    border-top-right-radius: 4px;
  }

  .pub-points-v2__title {
    font-size: clamp(28px, 7vw, 36px);
    line-height: 1.25;
  }
}