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

// --- Обёртка карты: на ≤991 не тянем 100vw (ломает ширину документа и центр .container). ---
// Full-bleed только для широкого вьюпорта; на планшете/мобиле — 100% родителя (см. Figma 22-521, 22-86).
.doctor-detail__breakout {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  box-sizing: border-box;

  @include up($bp-md2) {
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
}

.doctor-clinics-map {
  position: relative;
  min-height: 400px;
  border-radius: $radius-md;
  overflow: hidden;

  // 768–992: Figma 124:3114 — карточка сверху (2 колонки), 30px, карта снизу
  @include between($bp-md, $until-991) {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: visible;
  }

  // ≤576: Figma 124:3115 — как планшетный столбик (карточка → карта), не оверлей
  @include sm {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: visible;
  }

  // Слой Яндекс.Карт (до инициализации API — плейсхолдер как в макете)
  &__map {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: $color-detail-map-placeholder linear-gradient(
      135deg,
      $color-detail-soft-bg 0%,
      $color-detail-gradient-mid 50%,
      $color-detail-soft-bg 100%
    );

    @include between($bp-md, $until-991) {
      position: relative;
      inset: auto;
      order: 2;
      width: 100%;
      height: $doctor-clinics-map-height-tablet;
      min-height: $doctor-clinics-map-height-tablet;
      flex-shrink: 0;
      border-radius: 0 0 $radius-md $radius-md;
    }

    @include sm {
      position: relative;
      inset: auto;
      order: 2;
      width: 100%;
      height: 100%;
      min-height: 532px;
      flex-shrink: 0;
      border-radius: 0 0 $radius-md $radius-md;
    }

    // Карта перекрывает фон; клики проходят к карте (карточка адресов выше по z-index)
    &.is-ready {
      background: none;
    }
  }

  // Статическая карта (img) или тайлы API; без рамки, на весь блок
  &__embed {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
    object-position: center center;
    pointer-events: none;
  }

  &__shell {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    min-height: 400px;
    padding: 77px $container-pad;
    padding-left: max(
      #{$container-pad},
      calc((100vw - #{$container-max + 2 * $container-pad}) / 2 + #{$container-pad})
    );

    @include between($bp-lg, $until-1919) {
      padding-left: max(
        #{$container-pad},
        calc((100vw - #{$container-max-lg + 2 * $container-pad}) / 2 + #{$container-pad})
      );
    }

    @include between($bp-md2, $until-1439) {
      padding-left: max(
        #{$container-pad-md2},
        calc((100vw - #{$bp-md2}) / 2 + #{$container-pad-md2})
      );
    }

    @include between($bp-md, $until-991) {
      order: 1;
      min-height: 0;
      align-items: stretch;
      align-self: stretch;
      width: 100%;
      max-width: none;
      padding: 0 $container-pad-md2;
      margin-bottom: 30px;
      box-sizing: border-box;
    }

    @include sm {
      order: 1;
      min-height: 0;
      align-items: stretch;
      align-self: stretch;
      width: 100%;
      max-width: none;
      padding: 0 $container-pad-sm;
      margin-bottom: 30px;
      box-sizing: border-box;
    }

    @media (max-width: #{$bp-xs}) {
      order: 1;
      min-height: 0;
      align-items: stretch;
      align-self: stretch;
      width: 100%;
      max-width: none;
      padding: 0 $container-pad-mobile;
      margin-bottom: 30px;
      box-sizing: border-box;
    }
  }
}

.clinic-locations-card {
  width: 100%;
  max-width: 593px;

  @include between($bp-lg, $until-1919) {
    max-width: 540px;
  }

  @include between($bp-md2, $until-1439) {
    max-width: 441px;
  }
  padding: 30px;
  border-radius: $radius-md;
  border: 1px solid $color-dark-blue;
  background: $color-white;
  display: flex;
  flex-direction: column;
  gap: 30px;
  box-sizing: border-box;

  @include between($bp-md, $until-991) {
    max-width: none;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 24px;
    row-gap: 24px;
    padding: 24px 30px;
    align-items: start;

    &__title {
      grid-column: 1 / -1;
      margin: 0;
    }

    &__item {
      min-width: 0;
    }
  }

  @include sm {
    max-width: none;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 0;
    border: unset;
    align-items: stretch;

    &__title {
      margin: 0;
      line-height: 1;
      letter-spacing: -2.8px;
    }

    &__item {
      min-width: 0;
    }

    &__name {
      line-height: 1.6;
    }

    &__line {
      line-height: 1;
    }

  }

  &__title {
    margin: 0;
    font-family: $font-heading;
    font-size: 36px;
    font-weight: 700;
    line-height: normal;
    color: $color-text;

    @include between($bp-md, $until-991) {
      line-height: 1.3;
    }

    @media (max-width: #{$bp-xs}) {
      margin-top: -2px;
      margin-left: -1px;
      font-size: 24px;
      letter-spacing: unset;
    }
  }

  &__item {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  &__details {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  &__name {
    margin: 0;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.3;
    color: $color-dark-blue;

    @include between($bp-md, $until-991) {
      line-height: 1.6;
    }

    @media (max-width: #{$bp-xs}) {
      line-height: 1.2;
    }
  }

  &__line {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    color: $color-text;
  }

  &__dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    margin-top: 0.45em;
    border-radius: 50%;
    background: $color-blue;
  }

  &__phone {
    margin: 0;
    font-size: 20px;
    font-weight: 500;
    line-height: normal;

    @include sm {
      line-height: 1;
    }

    a {
      color: inherit;
      text-decoration: none;

      &:hover {
        text-decoration: underline;
      }
    }
  }
}

// --- Промо «бесплатный приём» (Figma 124:3291; планшет 768–992 — node 22-1345) ---
.doctor-promo-cta {
  width: 100%;

  // Разметка: class="container doctor-promo-cta__inner" — две равные колонки; minmax(0,1fr) вместо 1fr, иначе min-content шире у колонки с текстом/картинкой
  &__inner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 30px;
    border-radius: $radius-md;
    overflow: hidden;
    background: $color-doctor-hero-bg;
    box-sizing: border-box;

    // 360: фото на всю ширину окна — выходим за padding .container; иначе overflow:hidden обрезает breakout
    @media (max-width: #{$bp-xs}) {
      overflow-x: visible;
      overflow-y: visible;
    }

    @include md2 {
      grid-template-columns: minmax(0, 1fr);
    }

    // 992–1439: одна колонка (контент → фото), не два столбца в ряд
    @include between($bp-md2, $until-1439) {
      grid-template-columns: minmax(0, 1fr);
      gap: 27px;
    }

    // 768–992: карточка как в макете — контент сверху, фото снизу
    @include between($bp-md, $until-991) {
      gap: 0;
    }
  }

  // Детальная: второй .container не нужен — сбрасываем его правила
  .doctor-detail .container & .container.doctor-promo-cta__inner {
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
    width: 100%;
  }

  &__content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 30px 0 30px 30px;

    @include between($bp-md2, $until-1439) {
      padding: 30px 30px 0 30px;
    }

    @include md2 {
      padding: 30px;
    }

    @include between($bp-md, $until-991) {
      gap: 30px;
    }

    @include sm {
      padding: 24px 20px;
      gap: 24px;
    }

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

  &__heading {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    font-family: $font-heading;
    font-size: 36px;
    font-weight: 700;
    line-height: normal;
    color: $color-text;

    @include between($bp-md, $until-991) {
      font-family: Raleway;
      font-size: 36px;
      font-style: normal;
      font-weight: 700;
      line-height: normal;
      max-width: 651px;
    }

    @media (max-width: #{$bp-xs}) {
      line-height: 1.1;
    }
  }

  &__info {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  &__lead-block {
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: $color-text;
  }

  &__lead-title {
    margin: 0;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.3;
  }

  &__list {
    margin: 0;
    padding-left: 1.6em;
    list-style: disc outside; // сброс ul { list-style: none } в base/_reset.scss
    font-size: 16px;
    font-weight: 400;
    line-height: 1.16;

    li::marker {
      font-size: 0.55em;
      color: $color-text;
    }

    @include between($bp-md, $until-991) {
      margin: 0;
      padding-left: 1.4em;
      list-style: disc outside;
      font-size: 16px;
      font-weight: 400;
      line-height: 1.3;
    }
  }

  &__note {
    margin: 0;
    max-width: 494px;
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
    color: $color-dark-blue;

    @include between($bp-md2, $until-1439) {
      max-width: 431px;
    }

    @include between($bp-md, $until-991) {
      max-width: 635px;
      line-height: 1;
    }
  }

  &__actions {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  &__row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 20px;
    min-height: 40px;
  }

  &__field {
    flex: 1 1 120px;
    min-width: 0;
    height: 40px;
    padding: 10px 15px;
    border: 1px solid $color-text-secondary;
    border-radius: $radius-sm;
    background: $color-white;
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
    color: $color-text;
    box-sizing: border-box;

    &::placeholder {
      color: $color-text-secondary;
    }

    &:focus-visible {
      outline: 2px solid $color-blue;
      outline-offset: 2px;
    }

    &.is-invalid {
      border-color: $color-red;

      &:focus-visible {
        outline-color: $color-red;
      }
    }
  }

  &__submit {
    flex: 0 0 auto;
    width: 190px;
    min-height: 40px;
    padding-block: 8px;
    box-sizing: border-box;
    text-align: center;
    text-decoration: none;

    @include sm {
      width: 100%;
    }
  }

  &__call {
    margin: 0;
    font-size: 20px;
    font-weight: 500;
    line-height: normal;
    color: $color-text;

    @include between($bp-md2, $until-1439) {
      line-height: 1;
    }

    a {
      color: inherit;
      text-decoration: none;

      &:hover {
        text-decoration: underline;
      }
    }
  }

  // Нативный input остаётся для a11y; «квадрат» — ::before у label (Figma node 22-997)
  &__consent {
    position: relative;
  }

  &__checkbox {
    @include visually-hidden;

    &:checked + .doctor-promo-cta__consent-label::before {
      border-color: $color-blue;
      background-color: #e5e8fa;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='9' viewBox='0 0 12 9' fill='none'%3E%3Cpath d='M1%204.5%20L4.5%208%20L11%201' stroke='%234F6ECB' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: center;
      background-size: 10px 8px;
    }

    &:focus-visible + .doctor-promo-cta__consent-label::before {
      outline: 2px solid $color-blue;
      outline-offset: 2px;
    }
  }

  &__consent-label {
    display: block;
    position: relative;
    padding-left: 24px;
    flex: 1 1 0;
    min-width: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
    color: $color-text;
    cursor: pointer;

    &::before {
      content: '';
      position: absolute;
      top: 1px;
      left: 0;
      width: 16px;
      height: 16px;
      box-sizing: border-box;
      border: 2px solid $color-blue;
      border-radius: 5px;
      background-color: $color-white;
      transition: border-color 0.15s ease, background-color 0.15s ease;
    }

    &:hover::before {
      border-color: $color-blue;
      background-color: rgba($color-blue, 0.08);
    }

    @include between($bp-md2, $until-1439) {
      line-height: 1.5;

      &::before {
        margin-top: 2px;
      }
    }
  }

  &__checkbox:checked + .doctor-promo-cta__consent-label:hover::before {
    border-color: $color-blue;
    background-color: #e5e8fa;
  }

  &__policy-link {
    color: $color-blue;
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }

    &:focus-visible {
      outline: 2px solid $color-blue;
      outline-offset: 2px;
      border-radius: 2px;
    }
  }

  // Макет 576: текст согласия должен оставаться внутри блока и переноситься без вылета
  @include sm {
    &__consent-label {
      white-space: normal;
      overflow-wrap: anywhere;
      word-break: normal;
      font-size: 14px;
      line-height: 1.2;

      &::before {
        top: 1px;
      }
    }

    &__policy-link {
      white-space: normal;
      overflow-wrap: anywhere;
      word-break: normal;
    }
  }

  &__media {
    display: grid;
    grid-template: 1fr / 1fr;
    min-width: 0;
    min-height: 280px;
    background: $color-detail-soft-bg;
    overflow: hidden;
    // base: __media справа — скруглить правые углы (левые — у __inner)
    border-radius: 0 $radius-md $radius-md 0;
    // Figma 124:3291 — фото команды справа; в Битрикс тот же блок, другой src

    @include between($bp-md2, $until-1439) {
      height: 561px;
      // __media снизу — скруглить нижние углы
      border-radius: 0 0 $radius-md $radius-md;
    }

    @include md2 {
      min-height: 240px;
      border-radius: 0 0 $radius-md $radius-md;
    }

    // 768–992: фото под формой; высота как в макете — 912×561 (Figma node 22:999), тянем по ширине карточки
    @include between($bp-md, $until-991) {
      order: 0;
      min-height: 0;
      height: auto;
      aspect-ratio: #{$doctor-promo-cta-media-figma-w} / #{$doctor-promo-cta-media-figma-h};
    }

    // ≤767: как в мобильном макете — превью команды сверху
    @media (max-width: 767px) {
      order: -1;
      // __media сверху — скруглить верхние углы
      border-radius: $radius-md $radius-md 0 0;
    }

    // 360: на всю ширину вьюпорта (как макет), игнорируя боковые отступы .container
    @media (max-width: #{$bp-xs}) {
      width: 100vw;
      max-width: none;
      margin-inline: calc(50% - 50vw);
      border-radius: $radius-md $radius-md 0 0;
    }
  }

  &__photo {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    object-position: center 22%;
    display: block;

    @include between($bp-md2, $until-1439) {
      object-position: center 49%;
    }

    @include between($bp-md, $until-991) {
      width: 100%;
      height: 417px;
      min-height: 0;
      object-fit: cover;
      object-position: center 51%;
      display: block;
    }

    @media (max-width: #{$bp-xs}) {
      object-fit: contain;
    }
  }
}