/* ==========================================================================
   KOBIL — SuperApp family: Benefits
   Figma: /superapp/ 5501:34144 (3 cards, mobile 6087:53572) ·
          /digital-workplace-superapp/ 5501:33607 (6 cards, mobile 5501:35326)

   A section head over a grid of icon cards. Identical card design on both
   pages — only the column count (3 vs 3x2) and the card's inner padding
   differ, both driven from the section root.
   ========================================================================== */

.sec-sa-benefits__head {
  max-width: var(--w751);
}

/* /superapp/'s headline is one flowing sentence with a gradient clause in
   the middle; /digital-workplace-superapp/'s is three phrases Figma lays
   out as separate nodes on a single line (gap 8px). Both are one <h2> in
   markup — this only opens the leading up (Figma: 56/50, tighter than the
   1.3 used everywhere else on these pages). */
.sec-sa-benefits__head .sa-title {
  line-height: 1.1;
}

.sec-sa-benefits__lead {
  font-family: var(--font-sans);
  font-size: var(--w18);
  font-weight: 400;
  line-height: var(--w26);
  color: var(--navy-80);
}

.sec-sa-benefits__grid {
  display: grid;
  grid-template-columns: repeat(var(--cards-per-row, 3), minmax(0, 1fr));
  gap: var(--w3);
  margin-top: var(--w40);
}

.sec-sa-benefits__card {
  display: flex;
  flex-direction: column;
  gap: var(--w12);
  /* Figma: /superapp/ pads only the right and vertically (0 24px 0 60px in
     CSS terms), /digital-workplace-superapp/ pads all four sides by 24px
     and keeps a 60px right gutter. */
  padding: var(--card-pad, var(--w24) var(--w60) var(--w24) 0);
  border-radius: var(--radius-sm);
}

.sec-sa-benefits__icon {
  display: block;
  width: var(--w48);
  height: var(--w48);
}

.sec-sa-benefits__card-title {
  font-family: var(--font-sans);
  font-size: var(--w20);
  font-weight: 600;
  line-height: var(--w26);
  color: var(--navy);
}

.sec-sa-benefits__card-text {
  margin-top: var(--w8);
  font-family: var(--font-sans);
  font-size: var(--w16);
  font-weight: 400;
  line-height: var(--w23);
  color: var(--navy-70);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

/* Phone — Figma stacks the cards in one column (6087:53572 / 5501:35326)
   and drops the card title to 18/24. */
@media (max-width: 768px) {
  .sec-sa-benefits__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--m28);
    margin-top: var(--m32);
  }

  .sec-sa-benefits__card {
    padding: 0;
  }

  .sec-sa-benefits__lead {
    font-size: var(--m14);
    line-height: var(--m20);
  }

  .sec-sa-benefits__card-title {
    font-size: var(--m18);
    line-height: var(--m24);
  }

  .sec-sa-benefits__card-text {
    font-size: var(--m14);
    line-height: var(--m20);
  }
}