/* =========================
   Benefits Grid
   Desktop: 3 cols, icon left + text right
   Mobile: 1 col, icon top + centered text
   ✅ Goal: icon size ALWAYS the same on all breakpoints
   ========================= */

.benefitsGrid {
  background: var(--benefits-bg, #fffef2);
  padding: clamp(28px, 5vw, 72px) 0;
}

/* =========================
   Title / Intro
   ========================= */

.benefitsGrid__title {
  font-family: "Optima", "URW Classico", "Segoe UI", serif;
  font-weight: 700;
  font-size: clamp(26px, 3.2vw, 44px);
  line-height: 1.12;
  color: #1f1f1f;
  margin: 0 0 clamp(20px, 4vw, 64px) 0;
}

.benefitsGrid__intro {
  margin: 0 0 clamp(22px, 3.2vw, 44px) 0;
  max-width: 78ch;

  font-family: "Suisse Int'l", "Suisse Intl", "Inter", -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(14px, 1.15vw, 16px);
  line-height: 1.7;
  color: rgba(31, 31, 31, 0.92);
}

/* 防止 Craft/RichText 输出把间距拉爆 */
.benefitsGrid__intro :where(p, ul, ol, li) { margin: 0; }
.benefitsGrid__intro p { margin: 0; }

/* =========================
   Grid
   ========================= */

.benefitsGrid__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 46px);
  align-items: start;
}

/* =========================
   Card (base)
   ========================= */

.benefitsCard{
  display: grid;
  grid-template-columns: var(--benefits-iconSize, 72px) 1fr;
  gap: clamp(14px, 2vw, 26px);
  align-items: start;
}

/* ✅ icon 占位：无论图片本身多大，都被“装进同一个盒子” */
.benefitsCard__icon{
  width: var(--benefits-iconSize, 8rem);
  height: var(--benefits-iconSize, 8rem);
  display: grid;
  place-items: center;
  overflow: hidden;              /* ✅ 防止不同 SVG 视觉溢出导致大小不一致 */
}

/* ✅ 统一 icon 实际渲染尺寸（核心） */
.benefitsCard__iconImg{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;           /* ✅ 不变形，只缩放进盒子 */
  object-position: center;
}

/* 无 icon 时占位 */
.benefitsCard__iconPlaceholder{
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: rgba(0,0,0,0.06);
}

/* content */
.benefitsCard__content{
  min-width: 0;
}

.benefitsCard__heading {
  margin: 0 0 8px 0;

  font-family: "Suisse Int'l", "Suisse Intl", "Inter", -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(16px, 1.35vw, 20px);
  line-height: 1.25;
  color: #1f1f1f;
}

.benefitsCard__note {
  margin-left: 6px;
  font-weight: 700;
}

.benefitsCard__body {
  margin: 0;

  font-family: "Suisse Int'l", "Suisse Intl", "Inter", -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(13px, 1.05vw, 15px);
  line-height: 1.65;
  color: rgba(31, 31, 31, 0.88);
}

.benefitsCard__body :where(p, ul, ol, li) { margin: 0; }
.benefitsCard__body p { margin: 0; }
.benefitsCard__body ul,
.benefitsCard__body ol { margin: 8px 0 0 18px; }
.benefitsCard__body li { margin: 6px 0; }

/* =========================
   Responsive
   ========================= */

/* Tablet: 2 cols */
@media (max-width: 980px) {
  .benefitsGrid__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mobile: 1 col + centered
   ✅ 注意：icon 仍保持同一个 size，不再放大到 15rem
*/
@media (max-width: 600px) {
  .benefitsGrid__title {
    text-align: center;
  }

  .benefitsGrid__intro {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  .benefitsGrid__grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .benefitsCard {
    grid-template-columns: 1fr;
    gap: 14px;
    text-align: center;
    justify-items: center;
  }

  /* ✅ 仍然统一：所有卡片 icon 一样大 */
  .benefitsCard__icon {
    width: var(--benefits-iconSize, 72px);
    height: var(--benefits-iconSize, 72px);
  }

  .benefitsCard__content {
    max-width: 34ch;
  }

  .benefitsCard__body ul,
  .benefitsCard__body ol {
    text-align: left;
    margin-left: 20px;
  }
}