/* ======================================================
//  MARK: Services 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 (.services) {
    :scope {
      container-type: inline-size;
      background-color: var(--wp--preset--color--base);
      padding-block: clamp(4.8125rem, 4.428rem + 1.538cqi, 5.8125rem) clamp(3.5rem, 2.923rem + 2.308cqi, 5rem);
      padding-inline: 1.5rem;
    }

    .services__heading {
      margin-block: 0 clamp(2.5rem, 2.308rem + 0.769cqi, 3rem);
      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;
    }

    .services__list {
      display: grid;
      gap: 2.5rem 2rem;
      max-inline-size: 70rem;
      margin-inline: auto;
    }

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

    .services__card {
      background-color: var(--wp--preset--color--base);
      border: 0.0625rem dashed var(--wp--custom--color--card-border);
      border-radius: 0.625rem;
      padding-block: 2rem;
      padding-inline: clamp(1.5rem, 1.115rem + 1.538cqi, 2.5rem);
    }

    .services__card-img {
      display: block;
      inline-size: 100%;
      block-size: auto;
      border-radius: 0.625rem;
      object-fit: cover;
      aspect-ratio: 304 / 174;
    }

    .services__card-title {
      margin-block: 1rem;
      font-size: clamp(1.25rem, 1.154rem + 0.385cqi, 1.5rem);
      font-weight: 700;
      color: var(--wp--custom--color--brand);
    }

    .services__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;
    }
  }
}