/* ======================================================
//  MARK: Reasons Section
//
//  Fluid clamp() values calculated for:
//    Mobile (400px viewport) -> PC (1440px viewport)
//    1cqi at 400px = 4px, at 1440px = 14.4px
//    slope = (max_px - min_px) / 10.4
//    intercept = min_px - slope * 4
// ====================================================== */

@layer components {
  @scope (.reasons) {
    :scope {
      container-type: inline-size;
      background-color: var(--wp--custom--color--surface-blue);
      padding-block: clamp(3.5rem, 2.923rem + 2.308cqi, 5rem);
      padding-inline: 1.5rem;
    }

    .reasons__heading {
      margin-block: 0 clamp(2.5rem, 2.019rem + 1.923cqi, 3.75rem);
      font-size: clamp(1.5rem, 1.308rem + 0.769cqi, 2rem);
      font-weight: 700;
      color: var(--wp--preset--color--contrast);
      text-align: center;
      line-height: 1;
    }

    .reasons__list {
      display: grid;
      gap: clamp(2rem, 2.692rem - 0.769cqi, 2.5rem);
      max-inline-size: 70rem;
      margin-inline: auto;
    }

    @container (inline-size > 48rem) {
      .reasons__list {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    .reasons__card {
      background-color: var(--wp--preset--color--base);
      padding-block: clamp(2rem, 1.808rem + 0.769cqi, 2.5rem) 1.5rem;
      padding-inline: 1.5rem;
    }

    .reasons__card-img {
      display: block;
      block-size: 8.625rem;
      inline-size: auto;
      margin-inline: auto;
    }

    .reasons__card-title {
      margin-block: 2rem 1rem;
      font-size: 1.25rem;
      font-weight: 700;
      color: var(--wp--custom--color--brand);
    }

    .reasons__card-desc {
      margin-block: 0;
      font-size: clamp(0.875rem, 0.827rem + 0.192cqi, 1rem);
      font-weight: 400;
      color: var(--wp--preset--color--contrast);
      line-height: 1.8;
    }
  }
}