/* ── Where Products Break ─────────────────────────────────── */
.productbreak-section {
  /* === Typography defaults — overridden by ACF per-instance === */
  --atg-section-title-size: clamp(36px, 4.8vw, 56px);
  --atg-section-title-plain-color: var(--text-white, #ffffff);
  --atg-card-title-size: clamp(24px, 2.4vw, 34px);
  --atg-card-title-plain-color: var(--text-white, #ffffff);
  --atg-card-title-accent-color: #9cd5dc;
  --atg-card-content-size: 15px;
  --atg-card-content-color: var(--text-muted, #8b949e);

  position: relative;
  padding: 120px 0;
}

/* ── Header ───────────────────────────────────────────────── */
.productbreak__title {
  margin: 0 0 64px;
  text-align: center;
  font-family: var(--font-heading, "Inter", system-ui, sans-serif);
  font-size: var(--atg-section-title-size);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--atg-section-title-plain-color);
}

/* ── Cards stack ──────────────────────────────────────────── */
.productbreak__cards {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.productbreak__card {
  width: 100%;
  padding: 56px;
  background: rgba(8, 18, 35, 0.4);
  border: 1px solid rgba(0, 195, 208, 0.08);
  border-radius: 16px;
}

/* ── Card title ───────────────────────────────────────────── */
.productbreak__card-title {
  margin: 0 0 32px;
  font-family: var(--font-heading, "Inter", system-ui, sans-serif);
  font-size: var(--atg-card-title-size);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.productbreak__card-title-main {
  display: block;
  color: var(--atg-card-title-plain-color);
}
.productbreak__card-title-accent {
  display: block;
  margin-top: 20px;
  background: linear-gradient(180deg, #ffffff 39.17%, #278fb8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Card description (rich content from WYSIWYG) ─────────── */
.productbreak__card-rich-content {
  margin-top: 32px;
  font-family: var(--font-body, "Inter", system-ui, sans-serif);
  font-size: var(--atg-card-content-size);
  line-height: 1.7;
  color: var(--atg-card-content-color);
}
.productbreak__card-rich-content p {
  margin: 0 0 16px;
}
.productbreak__card-rich-content p:last-child {
  margin-bottom: 0;
}

/* Unordered list — cyan dot bullets */
.productbreak__card-rich-content ul {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.productbreak__card-rich-content ul li {
  position: relative;
  padding-left: 22px;
}
.productbreak__card-rich-content ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--primary, #00c3d0);
}

/* Ordered list */
.productbreak__card-rich-content ol {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  counter-reset: pb-ol;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.productbreak__card-rich-content ol li {
  position: relative;
  padding-left: 28px;
  counter-increment: pb-ol;
}
.productbreak__card-rich-content ol li::before {
  content: counter(pb-ol) ".";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--primary, #00c3d0);
  font-weight: 600;
}

/* Inline formatting */
.productbreak__card-rich-content strong,
.productbreak__card-rich-content b {
  color: var(--text-white, #ffffff);
  font-weight: 600;
}
.productbreak__card-rich-content em,
.productbreak__card-rich-content i {
  font-style: italic;
}
.productbreak__card-rich-content a {
  color: var(--primary, #00c3d0);
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 195, 208, 0.3);
  transition: border-color 0.2s ease;
}
.productbreak__card-rich-content a:hover {
  border-bottom-color: rgba(0, 195, 208, 0.8);
}

.productbreak__card-rich-content > *:last-child {
  margin-bottom: 0;
}

/* ── Tablet ───────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .productbreak-section {
    padding: 80px 0;
  }
  .productbreak__cards {
    gap: 20px;
  }
}
@media (max-width: 1024px) and (min-width: 768px) {
  .productbreak__title {
    margin-bottom: 48px;
  }
  .productbreak__card {
    padding: 40px;
  }
}

/* ── Mobile ───────────────────────────────────────────────── */
@media (max-width: 767px) {
  .productbreak-section {
    --atg-card-content-size: 14px;
    padding: 60px 0;
  }
  .productbreak__title {
    margin-bottom: 36px;
  }
  .productbreak__card {
    padding: 32px;
  }
  .productbreak__card-title {
    margin-bottom: 24px;
  }
  .productbreak__card-title-accent {
    margin-top: 16px;
  }
  .productbreak__card-rich-content {
    margin-top: 24px;
  }
}