/* Research Brief — Takeaways */

.rb-takeaways {
  background: #fff;
  font-family: var(--rb-font);
  color: var(--rb-body);
}

.rb-takeaways__grid {
  display: grid;
  gap: 20px;
  margin: 0;
  padding: 0;
  /* The number is decorative — the ordered list carries the real sequence. */
  list-style: none;
  /* Fallback for browsers without container queries. */
  grid-template-columns: repeat(auto-fit, minmax(var(--rb-card-min, 260px), 1fr));
}

/*
 * Two columns, measured against the section's own width so the same rule holds
 * on a landing page and inside a blog post. With the shipped four cards that is
 * a 2×2; a last card that would sit alone spans the row, so any count works.
 */
@supports (container-type: inline-size) {
  .rb-takeaways .rb-container {
    container-type: inline-size;
    container-name: rbtake;
  }

  .rb-takeaways__grid {
    grid-template-columns: 1fr;
  }

  @container rbtake (min-width: 560px) {
    .rb-takeaways__grid {
      grid-template-columns: repeat(2, 1fr);
    }

    .rb-takeaways__grid > :last-child:nth-child(odd) {
      grid-column: span 2;
    }
  }
}

.rb-takeaways__card {
  padding: 32px 34px;
  border-radius: 18px;
  background: var(--rb-tint);
  border: 1px solid #e6ebf8;
}

.rb-takeaways__label {
  display: block;
  margin-bottom: 16px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .12em;
}

.rb-takeaways__text {
  margin: 0;
  font-size: 20px;
  line-height: 1.5;
  text-wrap: pretty;
  font-weight: 500;
  color: var(--rb-navy);
}