/*
 * Shared offer-process heading typography.
 * Used by all standard offer pages and by the reactive-power landing.
 * The component must look identical on each offer; keep layout, cards,
 * hero, and form styling in their existing owners.
 */
.wp-block-post-content .asta-offer-process__eyebrow {
  margin: 0 0 6px;
  color: var(--business-green-dark, var(--asta-color-green-dark));
  font-size: clamp(1.15rem, 1.7vw, 1.35rem);
  font-weight: 600;
  line-height: 1.3;
}

/* Gutenberg may wrap the component label in a paragraph element. */
.wp-block-post-content .asta-offer-process__eyebrow :is(p, span) {
  margin: 0;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

@media (max-width: 680px) {
  .wp-block-post-content .asta-offer-process__eyebrow {
    font-size: 1rem;
  }
}


/*
 * Mobile process contract shared by regular offers and the compensation page.
 * This stylesheet is enqueued after offer-design.css, so the mobile layout
 * does not inherit the desktop 80px title slot and 252px card minimum.
 */
@media (max-width: 680px) {
  body.asta-offer-standard .wp-block-post-content .asta-offer-process .asta-process-steps,
  body.page-id-9959 .wp-block-post-content .asta-process-steps {
    width: 100%;
    max-width: 100%;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    margin-top: 20px;
    padding-top: 20px;
  }

  body.asta-offer-standard .wp-block-post-content .asta-offer-process .asta-process-steps > .asta-feature-card,
  body.page-id-9959 .wp-block-post-content .asta-process-steps > .asta-feature-card {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 0 !important;
    height: auto !important;
    padding: 38px 22px 24px;
    justify-content: flex-start;
    align-items: center;
    gap: 14px;
    text-align: center;
  }

  body.asta-offer-standard .wp-block-post-content .asta-offer-process .asta-process-steps > .asta-feature-card h3,
  body.page-id-9959 .wp-block-post-content .asta-process-steps > .asta-feature-card h3 {
    display: block;
    width: 100%;
    max-width: none;
    min-height: 0;
    height: auto;
    margin: 0 !important;
    font-size: clamp(1.125rem, 4.8vw, 1.375rem);
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    overflow-wrap: break-word;
  }

  body.asta-offer-standard .wp-block-post-content .asta-offer-process .asta-process-steps > .asta-feature-card .asta-feature-card__description,
  body.page-id-9959 .wp-block-post-content .asta-process-steps > .asta-feature-card .asta-feature-card__description {
    width: 100%;
    max-width: 34ch;
    margin: 0 auto;
    font-size: 1rem;
    line-height: 1.55;
    text-align: center;
  }

  body.asta-offer-standard .wp-block-post-content .asta-offer-process .asta-process-steps > .asta-feature-card :is(.asta-feature-card__icon, .asta-feature-card__image-icon),
  body.page-id-9959 .wp-block-post-content .asta-process-steps > .asta-feature-card :is(.asta-feature-card__icon, .asta-feature-card__image-icon) {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    margin: 0 auto !important;
  }

  body.page-id-9959 .wp-block-post-content .asta-offer-process__eyebrow {
    margin-bottom: 6px;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
  }
}


/*
 * Compensation's native Gutenberg section does not have the
 * .asta-offer-process wrapper used by the regular offers. Match that
 * wrapper here rather than relying on card typography alone.
 * Keep these rules scoped to the one offer's immediate process section.
 */
body.page-id-9959 .wp-block-post-content > section.asta-section:has(.asta-process-steps) {
  box-sizing: border-box;
  position: relative;
  z-index: 2;
  width: min(calc(100% - 40px), 1260px);
  max-width: none;
  margin: -48px auto 0;
  padding: 34px clamp(22px, 3vw, 40px) 38px;
  border: 1px solid var(--business-border, var(--asta-color-border-green, #dfe7dd));
  border-radius: 20px;
  background: var(--business-surface, var(--asta-color-surface-green, #f5f8f3));
  box-shadow: 0 18px 44px rgb(32 38 45 / 10%);
}
body.page-id-9959 .wp-block-post-content > section.asta-section:has(.asta-process-steps) :is(h2, .asta-offer-process__title) {
  margin: 0;
  color: var(--business-ink, var(--asta-color-ink, #20262d));
  font-size: clamp(2.1rem, 3.7vw, 3rem);
  font-weight: 700;
  line-height: 1.08;
  text-align: left;
}
body.page-id-9959 .wp-block-post-content > section.asta-section:has(.asta-process-steps) .asta-process-steps {
  margin-top: clamp(22px, 3vw, 32px);
}
body.page-id-9959 .wp-block-post-content > section.asta-section:has(.asta-process-steps) .asta-offer-process__eyebrow {
  margin: 0 0 6px;
  color: var(--business-green-dark, var(--asta-color-green-dark, #347d0e));
  font-size: clamp(1.15rem, 1.7vw, 1.35rem);
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  text-transform: none;
}
@media (max-width: 680px) {
  body.page-id-9959 .wp-block-post-content > section.asta-section:has(.asta-process-steps) {
    width: calc(100% - 28px);
    margin: -28px auto 0;
    padding: 25px 18px 28px;
    border-radius: 16px;
  }
  body.page-id-9959 .wp-block-post-content > section.asta-section:has(.asta-process-steps) :is(h2, .asta-offer-process__title) {
    font-size: clamp(1.875rem, 7vw, 2.25rem);
    line-height: 1.12;
  }
  body.page-id-9959 .wp-block-post-content > section.asta-section:has(.asta-process-steps) .asta-process-steps {
    margin-top: 20px;
  }
  body.page-id-9959 .wp-block-post-content > section.asta-section:has(.asta-process-steps) .asta-offer-process__eyebrow {
    margin-bottom: 6px;
    font-size: 1rem;
    line-height: 1.3;
  }
}