@use '../../abstracts' as *;

// Секция промо под картой — зазор после блока карты (как бывший gap у .page-doctors__tail)
.page-doctors__promo {
  margin-top: 80px;

  @include between($bp-md, $until-991) {
    margin-top: 80px;
  }

  @media (max-width: 767px) {
    margin-top: 24px;
  }

  // Figma 26:471 (576): контент сверху → фото 420px снизу; поле + кнопка столбиком; не трогаем детальную
  @include sm {
    margin-top: 60px;

    .doctor-promo-cta__inner {
      gap: 0;
    }

    .doctor-promo-cta__content {
      padding: 30px;
      gap: 30px;
    }

    .doctor-promo-cta__heading {
      font-size: 32px;
    }

    .doctor-promo-cta__row {
      flex-direction: column;
      gap: 20px;
    }

    .doctor-promo-cta__field {
      flex: none;
      width: 100%;
    }

    .doctor-promo-cta__submit {
      width: 100%;
    }

    .doctor-promo-cta__media {
      order: 0;
      height: 420px;
      min-height: 420px;
      border-radius: 0 0 $radius-md $radius-md;
    }

    .doctor-promo-cta__photo {
      height: 100%;
      min-height: 0;
    }
  }

  @media (max-width: #{$bp-xs}) {
    margin-top: 0;
    padding-top: 60px;
    background: $color-bg-filter;

    .doctor-promo-cta__inner {
      background: unset;
      gap: 25px;
    }

    .doctor-promo-cta__heading {
      font-size: 26px;
    }

    .doctor-promo-cta__content {
      padding: 0;
      gap: 20px;
    }

    .doctor-promo-cta__media {
      height: unset;
      min-height: unset;
      border-radius: unset;
    }

    .doctor-promo-cta__photo {
      height: 240px;
      object-fit: cover;
    }
  }
}

// Секция промо после вынесения из .page-doctors — отступ до подвала (как __main.css в DoctorSmile_2026)
.page-doctors__promo--footer {
  margin-bottom: 80px;

  @include md {
    margin-bottom: 60px;
  }

  @include sm {
    margin-bottom: 60px;
  }

  @media (max-width: #{$bp-xs}) {
    margin-bottom: 0;
  }
}