/* ======================================================
//  MARK: Smartphone Class Section
// ====================================================== */

@layer components {
  @scope (.smartphone-class) {
    :scope {
      container-type: inline-size;
      position: relative;
      overflow: hidden;
      padding-block-start: clamp(4rem, 3.615rem + 1.538cqi, 5rem);
      padding-block-end: clamp(2.5rem, 1.538rem + 3.846cqi, 5rem);
      padding-inline: 1.5rem;
    }

    .smartphone-class__bg {
      position: absolute;
      inset: 0;
      inline-size: 100%;
      block-size: 100%;
      object-fit: cover;
      object-position: center;
    }

    .smartphone-class__overlay {
      position: absolute;
      inset: 0;
      background-color: var(--wp--custom--color--brand);
      opacity: 0.95;
    }

    .smartphone-class__heading {
      position: relative;
      margin-block: 0 clamp(2.5rem, 2.308rem + 0.769cqi, 3rem);
      font-size: clamp(1.5rem, 1.308rem + 0.769cqi, 2rem);
      font-weight: 700;
      line-height: 1;
      color: var(--wp--preset--color--base);
      text-align: center;
    }

    .smartphone-class__desc {
      position: relative;
      margin-block: 0 clamp(2.0625rem, 1.894rem + 0.673cqi, 2.5rem);
      font-size: 1rem;
      font-weight: 500;
      line-height: 1.8;
      color: var(--wp--preset--color--base);
    }

    .smartphone-class__btn {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.75rem;
      inline-size: clamp(22rem, 20.606rem + 5.577cqi, 25.625rem);
      block-size: 4.375rem;
      margin-inline: auto;
      background-color: var(--wp--preset--color--base);
      border-radius: 100vmax;
      font-size: clamp(1.125rem, 1.077rem + 0.192cqi, 1.25rem);
      font-weight: 700;
    }

    .smartphone-class__btn-icon {
      inline-size: clamp(0.875rem, 0.779rem + 0.385cqi, 1.125rem);
      block-size: clamp(1.375rem, 1.231rem + 0.577cqi, 1.75rem);
      flex-shrink: 0;
    }

    .smartphone-class__ill {
      position: relative;
      display: block;
      inline-size: clamp(16.9rem, 14.4rem + 10cqi, 23.4rem);
      block-size: auto;
      margin-block-start: 2.5rem;
      margin-inline: auto;
    }

    /* PC: illustration moves to left, text becomes centered */
    @container (inline-size > 48rem) {
      .smartphone-class__desc {
        text-align: center;
      }

      .smartphone-class__ill {
        position: absolute;
        inline-size: clamp(15rem, 11.154rem + 15.385cqi, 18.8125rem);
        inset-inline-start: calc(50% - 299px);
        inset-block-end: 1.5rem;
        translate: -100% 0;
        margin: 0;
      }
    }
  }
}

/* ======================================================
//  MARK: WP unlayered link override
// ====================================================== */

.smartphone-class .smartphone-class__btn {
  text-decoration: none;
  color: var(--wp--custom--color--brand);
}