/* ======================================================
//  MARK: First View
// ====================================================== */

@layer components {
  @scope (.fv) {
    :scope {
      container-type: inline-size;
      position: relative;
      block-size: clamp(43.6875rem, 42.221rem + 5.865cqi, 47.5rem);
      overflow: hidden;
    }

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

    .fv__overlay {
      position: absolute;
      inset: 0;
      inline-size: 100%;
      block-size: 100%;
      z-index: 1;
    }

    .fv__overlay img {
      inline-size: 100%;
      block-size: 100%;
      object-fit: fill;
    }

    @container (inline-size > 59.875rem) {
      .fv__overlay {
        inset-inline-start: auto;
        inset-inline-end: 0;
        inline-size: 78.68055556%;
      }
    }

    .fv__badge {
      position: absolute;
      inset-inline-start: 1.5rem;
      inset-block-start: clamp(8.25rem, 9.894rem - 1.827cqi, 9.4375rem);
      z-index: 3;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      block-size: 2rem;
      background-color: var(--wp--custom--color--accent);
      border-radius: 0.3125rem;
      font-size: clamp(1rem, 0.904rem + 0.385cqi, 1.25rem);
      font-weight: 700;
      color: var(--wp--custom--color--brand);
      line-height: 1;
      padding: 0.5rem;
      white-space: nowrap;
    }

    .fv__heading {
      position: absolute;
      inset-inline-start: 1.5rem;
      inset-block-start: clamp(11.9375rem, 11.721rem + 0.865cqi, 12.5rem);
      z-index: 3;
      margin: 0;
      font-size: clamp(2rem, 1.615rem + 1.538cqi, 3rem);
      font-weight: 700;
      color: var(--wp--preset--color--base);
      line-height: 1.5;
      text-shadow: 0 0.1875rem 0.375rem rgb(34 34 34 / 0.4);
      white-space: nowrap;
    }

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

    .fv__person {
      position: absolute;
      inset-inline-start: 0;
      inset-block-start: 0;
      inline-size: clamp(21.375rem, 15.413rem + 23.846cqi, 36.875rem);
      block-size: 100%;
      z-index: 2;
      pointer-events: none;
    }

    .fv__person img {
      position: absolute;
      inset-inline-start: 0;
      inset-block-end: 0;
      inline-size: 100%;
      block-size: auto;
      max-inline-size: none;
    }

    .fv__subtext {
      position: absolute;
      inset-inline-start: calc(50% - 0.75rem);
      inset-block-start: clamp(18.9375rem, 17.567rem + 5.481cqi, 22.5rem);
      z-index: 3;
      margin: 0;
      font-size: clamp(0.875rem, 0.731rem + 0.577cqi, 1.25rem);
      font-weight: 500;
      color: var(--wp--preset--color--base);
      line-height: 1.5;
      white-space: nowrap;
    }

    .fv__subtext-inline {
      display: block;
    }

    @container (inline-size > 59.875rem) {
      .fv__subtext-inline {
        display: inline-block;
      }
    }

    .fv__btn {
      position: absolute;
      inset-inline-start: calc(25% + 4.125rem);
      z-index: 3;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      inline-size: clamp(13.125rem, 8.317rem + 19.231cqi, 25.625rem);
      block-size: clamp(3.375rem, 2.99rem + 1.538cqi, 4.375rem);
      border-radius: 100vmax;
      font-size: clamp(1rem, 0.904rem + 0.385cqi, 1.25rem);
      font-weight: 700;
      line-height: 1;
    }

    .fv__btn--phone {
      inset-block-start: clamp(24.875rem, 23rem + 7.5cqi, 29.75rem);
      background-color: var(--wp--preset--color--base);
    }

    .fv__btn--line {
      inset-block-start: clamp(29.25rem, 26.798rem + 9.808cqi, 35.625rem);
      background-color: var(--wp--custom--color--line-green);
    }

    .fv__btn svg {
      flex-shrink: 0;
    }

    .fv__note {
      position: absolute;
      inset-inline: 0;
      inset-block-start: clamp(41rem, 41.606rem - 0.673cqi, 41.4375rem);
      z-index: 3;
      margin: 0;
      font-size: 1rem;
      font-weight: 500;
      color: var(--wp--preset--color--base);
      line-height: 1;
      text-align: center;
    }

    /* Mobile wide: text anchored to the right */
    @container (inline-size > 26rem) and (inline-size <= 59.875rem) {

      .fv__badge,
      .fv__heading,
      .fv__subtext,
      .fv__btn {
        inset-inline-start: auto;
        inset-inline-end: 1.5rem;
      }

      .fv__heading,
      .fv__subtext {
        text-align: end;
      }

      .fv__note {
        inset-inline-start: auto;
        inset-inline-end: 0;
        text-align: end;
        padding-inline-end: 1.5rem;
      }
    }

    /* PC: content shifts to right half */
    @container (inline-size > 59.875rem) {

      .fv__person img {
        inset-inline-start: 5rem;
      }

      .fv__badge {
        inset-inline-start: 50%;
        inline-size: auto;
        block-size: auto;
        padding-inline: 2rem;
        padding-block: 0.75rem;
      }

      .fv__heading {
        inset-inline-start: 50%;
      }

      .fv__subtext {
        inset-inline-start: 50%;
        inline-size: auto;
      }

      .fv__btn {
        inset-inline-start: 50%;
      }

      .fv__note {
        inset-inline-start: 50%;
        inset-inline-end: auto;
        inline-size: clamp(13.125rem, 8.317rem + 19.231cqi, 25.625rem);
      }
    }
  }
}

/* ======================================================
//  MARK: WP unlayered link override
//  WordPress outputs unlayered inline styles for links:
//    a:where(:not(.wp-element-button)) { text-decoration: underline; }
//  Layered styles cannot override unlayered styles.
// ====================================================== */

.fv .fv__btn {
  text-decoration: none;
}

.fv .fv__btn--phone {
  color: var(--wp--custom--color--brand);
}

.fv .fv__btn--line {
  color: var(--wp--preset--color--base);
}