/* =========================
   Prep + Aftercare (Tabs)
   Background: #fffef2
   Title: Optima 700
   Body: Suisse 400
   Subheading: Suisse 700
   ========================= */

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

.prepAftercare__inner {
  max-width: 1180px;
  margin: 0 auto;
}

/* ✅ Title on TOP (not left) */
.prepAftercare__title {
  margin: 0 0 clamp(14px, 2.5vw, 28px) 0;
  text-align: center;
  font-family: "Optima", "URW Classico", "Segoe UI", serif;
  font-weight: 700;
  font-size: clamp(28px, 3.2vw, 52px);
  line-height: 1.1;
  color: #111;
}

/* Intro (Rich text) */
.prepAftercare__intro {
  max-width: 920px;
  margin: 0 auto clamp(16px, 2.5vw, 28px);
  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.2vw, 16px);
  line-height: 1.75;
  color: rgba(17, 17, 17, 0.9);
}

/* Reduce rich-text spacing issues */
.prepAftercare__intro :where(p, ul, ol, li) { margin: 0; }
.prepAftercare__intro p { margin: 0 0 10px 0; }
.prepAftercare__intro p:last-child { margin-bottom: 0; }

/* Tabs */
.prepAftercare__tabs {
  max-width: 980px;
  margin: 0 auto clamp(14px, 2vw, 24px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1.6vw, 18px);
}

.prepAftercare__tab {
  appearance: none;
  border: 2px solid rgba(0,0,0,0.75);
  background: transparent;
  padding: clamp(10px, 1.1vw, 14px) clamp(10px, 1.3vw, 18px);
  cursor: pointer;

  font-family: "Suisse Int'l", "Suisse Intl", "Inter", -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(12px, 1.05vw, 14px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.9);

  transition: background 180ms ease, color 180ms ease, transform 120ms ease;
}

.prepAftercare__tab:hover {
  transform: translateY(-1px);
}

.prepAftercare__tab.is-active {
  background: #111;
  color: #fff;
}

/* Panels */
.prepAftercare__panels {
  max-width: 980px;
  margin: 0 auto;
}

.prepAftercare__panel {
  padding-top: clamp(8px, 1.6vw, 14px);
}

.prepAftercare__panelTitle {
  margin: 0 0 12px 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.6vw, 22px);
  line-height: 1.25;
  color: #111;
}

/* Content (Rich text) */
.prepAftercare__content {
  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.2vw, 16px);
  line-height: 1.75;
  color: rgba(17, 17, 17, 0.9);
}

/* ✅ 解决 Redactor 常见的 ul > li > p 导致的巨大空挡 */
.prepAftercare__content :where(p, ul, ol, li, blockquote) { margin: 0; }

.prepAftercare__content p { margin: 0 0 12px 0; }
.prepAftercare__content p:last-child { margin-bottom: 0; }

.prepAftercare__content ul,
.prepAftercare__content ol {
  margin: 10px 0 14px 20px;
  padding: 0;
}

.prepAftercare__content li {
  margin: 6px 0;
}

.prepAftercare__content li > p {
  margin: 0; /* ✅ 核心：去掉 li 里的 p margin */
}

/* Responsive */
@media (max-width: 860px) {
  .prepAftercare__tabs {
    grid-template-columns: 1fr;
  }
}