/* ============================================================
   SC/Direction · Hero напрямку
   figma: node-id=316:4
   Зависит от assets/css/tokens.css, assets/css/base.css
   ============================================================ */

.sc-dhero {
  /* --- Геометрия из макета, которой нет в токенах --- */
  --dhero-h: 800px;                       /* первый экран: 80 шапка + 720 кадр */
  --dhero-copy-pe: var(--sc-space-14);    /* 56: зазор колонки до фото */
  --dhero-block-w: var(--sc-cta-block-w); /* Button/Block 320 × 76 */
  --dhero-block-h: var(--sc-cta-block-h);

  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-block-size: var(--dhero-h);
  background: var(--warm);
  color: var(--foreground);
}

.sc-dhero *,
.sc-dhero *::before,
.sc-dhero *::after { box-sizing: border-box; }

/* Текст встаёт в полосу контента: слева --sc-pad-x, как у всех секций */
.sc-dhero__copy {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--section-gap);
  padding:
    var(--section-padding-y)
    var(--dhero-copy-pe)
    var(--page-margin-x)
    var(--sc-pad-x);
}

.sc-dhero__top {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap-lg);
}

.sc-dhero__title,
.sc-dhero__lead { margin: 0; }

.sc-dhero__lead {
  max-inline-size: var(--sc-measure);
  color: var(--muted-foreground);
}

.sc-dhero__bottom {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sc-space-6); /* 24 в макете */
}

.sc-dhero__branches {
  display: flex;
  flex-direction: column;
  gap: var(--sc-space-2_5);
  color: var(--muted-foreground);
}

.sc-dhero__branches-label { margin: 0; }

.sc-dhero__branches-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sc-space-1) var(--sc-space-5); /* 20 между адресами */
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---------- Button/Block · primary ---------- */

.sc-dhero__cta {
  inline-size: 100%;
  max-inline-size: var(--dhero-block-w);
  block-size: var(--dhero-block-h);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--grid-gap);
  background: var(--primary);
  color: var(--primary-foreground);
  text-decoration: none;
  transition: background-color var(--sc-dur) var(--sc-ease);
}

.sc-dhero__cta-label {
  text-transform: uppercase;
  font: var(--button-weight) var(--button-size) / var(--button-lh) var(--font-headings);
  letter-spacing: var(--button-ls);
}

.sc-dhero__cta-arrow {
  display: flex;
  justify-content: flex-end;
}

.sc-dhero__cta-arrow svg {
  transform: rotate(45deg);
  transition: transform var(--sc-dur-arrow) var(--sc-ease-out);
}

/* ---------- Фото: начинается под шапкой, квадрат во всю правую половину ---------- */

.sc-dhero__media {
  margin-block-start: var(--header-h, 80px);
  /* Кадр тянется от низа шапки до низа секции: при колонке текста выше 800
     квадрат с align-self: end отрывался от шапки на несколько пикселей
     (правка 2026-10-06). Было: aspect-ratio: 1 / 1; align-self: end. */
  align-self: stretch;
  overflow: hidden;
  background: var(--muted);
}

.sc-dhero__media picture { display: contents; }

.sc-dhero__image {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* ---------- Состояния (в Figma их нет — обязательны по CLAUDE.md) ---------- */

@media (hover: hover) and (pointer: fine) {
  .sc-dhero__cta:hover { background: var(--sc-primary-hover); }
  .sc-dhero__cta:hover .sc-dhero__cta-arrow svg {
    transform: translate(calc(var(--grid-gap) / 2), calc(var(--grid-gap) / 2)) rotate(45deg);
  }
}

.sc-dhero__cta:focus-visible {
  outline: var(--sc-focus-w) solid var(--ring);
  outline-offset: var(--sc-focus-offset);
}

.sc-dhero__cta:active { background: var(--sc-primary-hover); }

@media (prefers-reduced-motion: reduce) {
  .sc-dhero__cta,
  .sc-dhero__cta-arrow svg { transition: none; }
}

/* ---------- Планшет и узкий десктоп (641–1279, там же бургер) ----------
   Первый экран 800 с десктопа здесь не держим: между текстом и филиалами
   висела пустота, а кадр вытягивался в узкую вертикальную полосу.

   Альбомная ориентация: кадр остаётся квадратом рядом с заголовком и
   описанием и сжимается вместе с колонкой; всё служебное (факты, филиалы,
   кнопка) уходит строкой под них на всю ширину, без линии между ними.
   Колонка текста перестаёт быть коробкой (display: contents), чтобы её верх
   и низ встали в сетку секции. Если текст выше квадрата, кадр дотягивается
   до его высоты, а не оставляет под собой пустое поле (правка 2026-11-09). */

@media (min-width: 641px) and (max-width: 1279px) {
  .sc-dhero {
    --dhero-copy-pe: var(--sc-space-10); /* поле до кадра: 24 читалось как вплотную, 56 ломало заголовок по слову (2026-11-09) */
    min-block-size: 0;
  }

  .sc-dhero__copy { display: contents; }

  /* Ручной перенос из макета (<br> после «організму») рассчитан на колонку 1440:
     в узкой колонке он рвал заголовок в пять строк по слову. Здесь строку ломает браузер */
  .sc-dhero__title br { display: none; }

  .sc-dhero__top {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    padding:
      calc(var(--header-h, 80px) + var(--section-padding-y-tight))
      var(--dhero-copy-pe)
      var(--section-padding-y-tight)
      var(--sc-pad-x);
  }

  /* align-self: start и block-size: auto — из-за Safari: растянутый по строке
     элемент сетки игнорирует aspect-ratio и схлопывается (так было с журналом
     на virtus.ua, 2026-10-14). Квадрат держит aspect-ratio, не строка */
  .sc-dhero__media {
    grid-column: 2;
    grid-row: 1;
    aspect-ratio: 1 / 1;
    align-self: start;
    block-size: auto;
    min-block-size: 0;
  }

  /* Служебная строка — сетка: слева факты и филиалы друг под другом, справа кнопка
     по нижней линии. Флексом с переносом кнопка у врача уезжала одна на новую строку
     и висела справа под пустым местом (замечание 2026-11-09). */
  .sc-dhero__bottom {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--dhero-block-w);
    align-items: end;
    gap: var(--sc-space-6) var(--sc-space-10);
    padding: var(--sc-space-8) var(--sc-pad-x);
  }

  .sc-dhero__bottom > :not(.sc-dhero__cta) { grid-column: 1; }

  .sc-dhero__cta {
    grid-column: 2;
    grid-row: 1;
    max-inline-size: none;
  }

  /* Врач: рейтинг и стаж — к имени и описанию, под ними; под фото остаются
     филиалы и кнопка (решение 2026-11-09). Служебную строку распускаем
     (display: contents), её части становятся ячейками сетки героя; кадр
     тянется на две строки — текст и факты. Вертикаль ниже это отменяет. */
  .sc-dhero:has(.sc-dhero__facts) .sc-dhero__top {
    align-self: end;
    padding-block-end: 0;
  }

  .sc-dhero:has(.sc-dhero__facts) .sc-dhero__media { grid-row: 1 / span 2; }

  .sc-dhero:has(.sc-dhero__facts) .sc-dhero__bottom { display: contents; }

  .sc-dhero:has(.sc-dhero__facts) .sc-dhero__facts {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    padding: var(--sc-space-10) var(--dhero-copy-pe) var(--section-padding-y-tight) var(--sc-pad-x);
  }

  .sc-dhero:has(.sc-dhero__facts) .sc-dhero__branches {
    grid-column: 1;
    grid-row: 3;
    align-self: end;
    padding: var(--sc-space-8) var(--dhero-copy-pe) var(--sc-space-8) var(--sc-pad-x);
  }

  .sc-dhero:has(.sc-dhero__facts) .sc-dhero__cta {
    grid-column: 2;
    grid-row: 3;
    align-self: end;
    justify-self: end;
    inline-size: var(--dhero-block-w);
    margin: var(--sc-space-8) var(--sc-pad-x) var(--sc-space-8) 0;
  }
}

/* Ниже 1024 пополам колонка текста на 768 — 285: длинное слово заголовка
   («Володимирівна», «стовбуровими») выходило за неё. Тексту 3/5, кадру 2/5 */
@media (min-width: 641px) and (max-width: 1023px) {
  .sc-dhero { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}

/* Портретная ориентация планшета: квадратный кадр сверху во всю ширину,
   под ним заголовок и описание, ниже служебное столбцом, кнопка под текстом */
@media (min-width: 641px) and (max-width: 1023px) and (orientation: portrait) {
  .sc-dhero { grid-template-columns: minmax(0, 1fr); }

  .sc-dhero__media {
    grid-column: 1;
    grid-row: 1;
  }

  .sc-dhero__top {
    grid-row: 2;
    padding: var(--section-padding-y-tight) var(--sc-pad-x) 0;
  }

  .sc-dhero__bottom {
    grid-row: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sc-space-6);
    padding: var(--section-gap) var(--sc-pad-x) var(--section-padding-y-tight);
  }

  .sc-dhero__cta { max-inline-size: var(--dhero-block-w); }

  /* Врач на вертикали — факты снова в служебной колонке под текстом */
  .sc-dhero:has(.sc-dhero__facts) .sc-dhero__media { grid-row: 1; }
  .sc-dhero:has(.sc-dhero__facts) .sc-dhero__top { padding-block-end: 0; }
  .sc-dhero:has(.sc-dhero__facts) .sc-dhero__bottom { display: flex; }
  .sc-dhero:has(.sc-dhero__facts) :is(.sc-dhero__facts, .sc-dhero__branches, .sc-dhero__cta) { align-self: auto; }
  .sc-dhero:has(.sc-dhero__facts) :is(.sc-dhero__facts, .sc-dhero__branches) { padding: 0; }
  .sc-dhero:has(.sc-dhero__facts) .sc-dhero__cta { inline-size: 100%; margin: 0; }
}

/* ---------- Телефон: колонка, текст под шапкой, кадр под текстом ---------- */

@media (max-width: 640px) {
  .sc-dhero {
    grid-template-columns: minmax(0, 1fr);
    min-block-size: 0;
  }

  .sc-dhero__copy {
    padding:
      calc(var(--header-h, 80px) + var(--section-padding-y-tight))
      var(--sc-pad-x)
      var(--section-padding-y-tight);
  }

  .sc-dhero__cta { max-inline-size: none; }

  .sc-dhero__media { margin-block-start: 0; aspect-ratio: 1 / 1; } /* в колонке кадр снова квадрат */
}