/* ==========================================================================
   WHY CHOOSE US
   Benefits of a rowing-specific content partner.
   ========================================================================== */

#why-us {
  background-color: var(--c-bg-alt);
  border-top: 1px solid var(--c-divider);
  border-bottom: 1px solid var(--c-divider);
}

/* -- Header Layout ------------------------------------------------------- */
.why__header {
  max-width: 840px;
}

.why__header .section-headline {
  max-width: 24ch;
}

.why__header p + p {
  margin-top: var(--sp-md);
}

/* -- Grid Adjustments ---------------------------------------------------- */
.grid--why {
  display: grid;
  gap: var(--sp-lg);
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 900px) {
  .grid--why {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .grid--why {
    grid-template-columns: 1fr;
  }
}

/* -- Card Specifics ------------------------------------------------------ */
#why-us .card {
  display: flex;
  flex-direction: column;
  background-color: var(--c-surface);
  transition: transform var(--duration) var(--ease-out),
              box-shadow var(--duration) var(--ease-out),
              border-color var(--duration) var(--ease-out);
}

#why-us .card__icon {
  width: 32px;
  height: 32px;
  color: var(--c-primary);
  margin-bottom: var(--sp-md);
  transition: transform var(--duration) var(--ease-spring);
}

#why-us .card:hover .card__icon {
  transform: scale(1.15) translateY(-2px);
}

#why-us .card__icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

#why-us .card__title {
  font-family: var(--ff-heading);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  color: var(--c-text);
  margin-bottom: var(--sp-xs);
  line-height: var(--lh-snug);
}

#why-us .card__text {
  flex-grow: 1; /* Aligns shorter cards properly in flex container */
}