/**
 * Value Prop Block Styles
 * Layout only — typography/colors come from canonical classes/tokens.
 */

.valueprop {
  background: var(--color-navy-darker, #000a29);
  /*margin-top: 32px;*/
  padding-top: 64px;
  padding-bottom: 64px;
}

.valueprop .container {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

/* Centered header */
.valueprop-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-4);
  max-width: 1000px;
  margin: 0 auto;
}

.valueprop-icon {
  display: block;
  width: auto;
  height: 40px;
  object-fit: contain;
}

.valueprop-heading h2 {
  font-family: var(--font-heading);
  font-size: var(--text-heading-lg);
  font-weight: 700;
  line-height: 1.1;
  color: #ffffff;
}

.valueprop-heading p {
  margin: 0;
}

/* Orange highlight — works whether editors use a colored span or <mark> */
.valueprop-heading mark,
.valueprop-heading .highlight {
  background: none;
  color: var(--color-brand-orange);
}

/* Cards row */
.valueprop-cards {
  display: flex;
  gap: var(--space-5);
  margin: 0 auto;
}

.valueprop-card {
  display: flex;
  max-width: 260px;
  flex-direction: column;
  gap: 16px;
  padding: var(--space-5) var(--space-4);
  border: 1px solid #e2e7ee;
  border-radius: var(--radius-sm);
}

.valueprop-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: linear-gradient(105deg, #003087 22%, #418fde 100%);
  margin-bottom: 43px;
}

.valueprop-card-icon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.valueprop-card-title {
  color: var(--color-navy);
}

.valueprop-card-desc {
  color: var(--color-navy);
}

/* Responsive: 5 → 2 → 1 */
@media (min-width: 601px) and (max-width: 1000px) {
  .valueprop-cards {
    flex-wrap: wrap;
  }

  .valueprop-card {
    flex: 1 1 calc(50% - var(--space-5));
    max-width: calc(50% - var(--space-5));
  }
}

@media (max-width: 600px) {
  .valueprop-cards {
    flex-direction: column;
  }

  .valueprop-card {
    max-width: 260px;
  }

  .valueprop-heading {
    font-size: var(--text-heading-lg);
  }
}