/* ======================================================
//  MARK: Concerns Section
//
//  Fluid clamp() values calculated for:
//    Mobile (400px viewport, 352px content-box) -> PC (1440px viewport, 1392px content-box)
//    1cqi = 3.52px at 400px, 13.92px at 1440px
// ====================================================== */

@layer components {
  @scope (.concerns) {
    :scope {
      container-type: inline-size;
      background-color: var(--wp--preset--color--base);
      padding-block: clamp(3.5rem, 2.992rem + 2.308cqi, 5rem);
      padding-inline: 1.5rem;
    }

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

    .concerns__heading-accent {
      color: var(--wp--custom--color--brand);
      text-decoration: underline;
    }

    .concerns__bubbles {
      position: relative;
      max-inline-size: 50rem;
      margin-inline: auto;
      block-size: clamp(20.9375rem, 16.495rem + 20.192cqi, 34.0625rem);
    }

    .concerns__bubble {
      position: absolute;
      z-index: 2;
    }

    .concerns__circle {
      inline-size: clamp(7.5rem, 5.385rem + 9.615cqi, 13.75rem);
      block-size: clamp(7.5rem, 5.385rem + 9.615cqi, 13.75rem);
      border: 0.1875rem solid var(--wp--custom--color--border);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: var(--wp--preset--color--base);
    }

    .concerns__text {
      margin: 0;
      font-size: clamp(0.8125rem, 0.664rem + 0.673cqi, 1.25rem);
      font-weight: 500;
      color: var(--wp--preset--color--contrast);
      text-align: center;
      white-space: nowrap;
      line-height: 1.5;
    }

    .concerns__text-accent {
      color: var(--wp--custom--color--brand);
    }

    .concerns__bubble--1 {
      inset-inline-start: 50%;
      inset-block-start: 0;
      transform: translateX(-50%);
    }

    .concerns__bubble--2 {
      inset-inline-start: 0;
      inset-block-start: clamp(4.0625rem, 5.234rem - 1.346cqi, 4.9375rem);
    }

    .concerns__bubble--3 {
      inset-inline-end: 0;
      inset-block-start: clamp(4.0625rem, 5.234rem - 1.346cqi, 4.9375rem);
    }

    .concerns__bubble--4 {
      inset-inline-start: 7%;
      inset-block-start: clamp(13.4375rem, 11.111rem + 10.577cqi, 20.3125rem);
    }

    .concerns__bubble--5 {
      inset-inline-end: 7%;
      inset-block-start: clamp(13.4375rem, 11.111rem + 10.577cqi, 20.3125rem);
    }

    .concerns__ill {
      position: absolute;
      inset-inline-start: 50%;
      inset-block-start: clamp(8.0625rem, 6.582rem + 6.731cqi, 12.4375rem);
      transform: translateX(-50%);
      inline-size: clamp(8.875rem, 5.152rem + 16.923cqi, 19.875rem);
      block-size: auto;
      pointer-events: none;
      z-index: 3;
    }
  }
}