/* =========================================================================
   responsive.css — адаптация под устройства
   Брейкпоинты: 1280 / 1180 / 1024 / 860 / 640 / 460
   ========================================================================= */

/* ------------------------------ ≤ 1280 px -------------------------------- */
@media (max-width: 1280px) {
  :root {
    --plate-pad-x: 28px;
    --header-x: 28px;
    --s-72: 60px;
  }

  .site-header {
    margin-top: 32px;
  }

  .nav {
    gap: 18px;
    padding: 0 18px;
  }

  .hero {
    min-height: 740px;
    margin-top: -65px;
    padding-top: 98px;
  }

  .start-panel {
    width: 46%;
  }

  .hero__person {
    right: 40%;
  }

  .section__intro {
    gap: 52px;
  }

  .section__head {
    width: 58%;
  }

  .section__head--wide {
    width: 58%;
  }

  .protocol__aside {
    width: 260px;
    padding: 24px;
  }

  .answer {
    padding: 20px 22px;
  }

  .cta-card {
    width: 380px;
  }

  .form {
    width: 55%;
  }

  .contact__intro {
    width: 45%;
  }

  .photo--tall,
  .photo--portrait {
    width: 40%;
  }

  .footer__brand {
    width: 34%;
  }

  .footer__col--req {
    width: 30%;
  }
}

/* ------------------------------ ≤ 1180 px -------------------------------- */
@media (max-width: 1180px) {
  .grid--cases > :nth-child(n) {
    grid-column: span 12;
  }

  .facts dt {
    width: 150px;
  }

  .hero__lead {
    max-width: 560px;
  }
}

/* --------------------- ≤ 1024 px — планшеты, мобильные -------------------- */
@media (max-width: 1024px) {
  html {
    scroll-padding-top: 96px;
  }

  :root {
    --plate-gap: 20px;
    --header-x: 32px; /* логотип и бургер отступают от края экрана */
    --fs-hero: clamp(30px, 4.6vw, 42px); /* оффер и заголовки секций крупнее */
  }

  /* Шапка → бургер */
  .site-header {
    justify-content: space-between;
    margin-top: 24px;
  }

  .nav,
  .header-contacts {
    display: none;
  }

  .burger {
    display: flex;
  }

  /* Hero: портрет уходит в карточку, блоки — в колонку */
  .hero {
    min-height: 0;
    margin-top: -62px;
    padding: 92px var(--plate-pad-x) 26px;
    gap: 26px;
  }

  .hero__offer {
    gap: 18px;
    max-width: none;
  }

  .hero__title,
  .hero__lead {
    max-width: none;
  }

  /* Карточка опускается вниз — освободившееся место занимает фигура,
     выходящая за её верхний край */
  .hero__strip {
    flex-direction: column;
    gap: 300px;
  }

  .start-panel {
    width: 100%;
  }

  .start-panel__list li {
    min-height: 46px;
  }

  .lawyer-card {
    position: relative;
    height: 250px;
  }

  /* Карточка становится позиционированной — портрет считается от неё
     и свободно выходит за верхний край. Высота в пикселях, а не в процентах:
     так размер фигуры не зависит от высоты карточки.
     max-width: none обязателен — иначе общее правило img { max-width: 100% }
     ужимает картинку по ширине карточки, и фигура не растёт */
  .hero__portrait {
    right: -4px;
    bottom: 0;
    left: auto;
    width: auto;
    max-width: none;
    height: 520px;
    aspect-ratio: auto;
    object-fit: contain;
    object-position: right bottom;
  }

  /* Метка «лично ведём дело» должна остаться поверх фигуры */
  .lawyer-card .chip {
    position: relative;
    z-index: 5;
  }

  .hero__person {
    right: auto;
    left: 16px;
    bottom: 14px;
    gap: 1px;
    padding: 8px 11px;
    border-radius: var(--r-xs);
  }

  .hero__person-name {
    font-size: 13px;
  }

  .hero__person-role {
    font-size: 11px;
  }

  /* Секции */
  .section__intro {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .section__head,
  .section__head--wide {
    width: 100%;
    gap: 18px;
  }

  .section__lead,
  .section__lead--on-accent {
    max-width: none;
  }

  /* Карточки направлений */
  .card--wide,
  .card--reverse {
    flex-direction: column;
  }

  .card--reverse .photo {
    order: 2;
  }

  .photo--tall {
    width: 100%;
    min-height: 450px;
  }

  .grid--2,
  .grid--cases {
    grid-template-columns: minmax(0, 1fr);
  }

  .grid--cases > :nth-child(n) {
    grid-column: auto;
  }

  /* Первичная оценка */
  .protocol {
    flex-direction: column;
  }

  .protocol__aside {
    width: 100%;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }

  .protocol__total {
    align-items: flex-end;
    text-align: right;
  }

  .assessment__foot {
    flex-direction: column;
  }

  .cta-card {
    width: 100%;
  }

  /* О юристе */
  .dossier {
    flex-direction: column;
  }

  /* Пропорции блока совпадают с пропорциями снимка (852×1280), поэтому
     background-size: cover показывает портрет целиком, без обрезки.
     Ширину ограничиваем, иначе на всю ширину планшета фото стало бы
     непомерно высоким */
  .photo--portrait {
    width: min(100%, 420px);
    align-self: center;
    min-height: 0;
    aspect-ratio: 852 / 1280;
  }

  .facts {
    padding: 6px 16px;
  }

  /* Обращение */
  .contact {
    flex-direction: column;
  }

  .contact__intro,
  .form {
    width: 100%;
  }

  /* Подвал */
  .footer__main {
    flex-wrap: wrap;
    gap: 28px;
  }

  .footer__brand,
  .footer__col,
  .footer__col--req {
    width: 100%;
  }
}

/* ------------------------------- ≤ 860 px -------------------------------- */
@media (max-width: 860px) {
  :root {
    --plate-pad-x: 22px;
    --s-72: 48px;
    --page-gutter: 14px;
    --header-x: 26px;
  }

  html {
    scroll-padding-top: 88px;
  }

  .site-header {
    margin-top: 18px;
  }

  .hero {
    margin-top: -58px;
    padding-top: 86px;
  }

  .section {
    gap: 18px;
  }

  .card,
  .case,
  .dossier,
  .form,
  .cta-card,
  .disclaimer {
    padding: 20px;
  }

  .card--wide {
    padding: 20px;
  }

  .protocol__aside {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 20px;
  }

  .protocol__total {
    align-items: flex-start;
    text-align: left;
  }

  .answer {
    flex-wrap: wrap;
    gap: 14px;
    padding: 18px 20px;
  }

  .answer__num {
    width: 44px;
    height: 44px;
    font-size: 16px;
  }

  .answer__body {
    flex: 1 1 200px;
  }

  .disclaimer {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  /* Таблицы фактов и контактов — метка над значением.
     flex: none обязателен: строки растягиваются по своему содержимому,
     иначе при flex-basis: 0 они сжимаются и текст наезжает друг на друга */
  .facts > div,
  .footer__list > div {
    flex: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    min-height: 0;
    padding: 12px 0;
  }

  .facts dt,
  .footer__list dt {
    width: auto;
  }

  .footer__list > div {
    padding: 14px 0;
  }

  .form__row {
    flex-direction: column;
  }

  .field__input--area {
    height: 125px;
  }

  .direct {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding: 20px;
  }

  .footer {
    padding: 32px var(--plate-pad-x);
  }

  .footer__legal {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .footer__links {
    gap: 8px 20px;
  }
}

/* ------------------------------- ≤ 640 px -------------------------------- */
@media (max-width: 640px) {
  :root {
    --page-gutter: 10px;
    --plate-pad-x: 18px;
    --r-section: 18px;
    --answer-min: 110px;
    /* На мобильном основной текст на пункт мельче */
    --fs-body: 15px;
    --fs-small: 15px;
    --fs-lead: 15px;
  }

  /* Поля ввода — исключение: при кегле меньше 16px iOS Safari
     автоматически зумит страницу при фокусе */
  .field__input {
    font-size: 16px;
  }

  .hero {
    border-radius: var(--r-section);
  }

  .hero__offer {
    gap: 16px;
  }

  .hero__actions {
    width: 100%;
  }

  .hero__actions .btn {
    flex: 1 1 240px;
  }

  .hero__strip {
    gap: 230px;
  }

  .lawyer-card {
    height: 200px;
  }

  /* Фигура прижата к правому краю секции, а не карточки —
     отрицательный отступ гасит внутреннее поле плиты */
  .hero__portrait {
    height: 400px;
    right: calc(var(--plate-pad-x) * -4);
  }

  .start-panel__head {
    height: auto;
    padding-bottom: 12px;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  /* Пункты списков — мельче основного текста */
  .start-panel__list li,
  .row-list li {
    font-size: 14px;
  }

  /* Плашки-подписи на фотографиях: мельче и с переносом,
     чтобы длинная подпись не вылезала за край снимка */
  .chip--sm {
    font-size: 10px;
    line-height: 1.3;
    padding: 8px 10px;
    max-width: 100%;
    white-space: normal;
  }

  .start-panel__list li {
    align-items: flex-start;
    gap: 10px;
    padding: 12px 2px;
  }

  .start-panel__list li .bullet {
    margin-top: 6px;
  }

  .card__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .row-list li {
    align-items: flex-start;
    padding: 12px 0;
  }

  .row-list li .dash {
    margin-top: 8px;
  }

  .photo--tall {
    min-height: 240px;
  }

  /* На телефоне ширины мало — портрет помещается целиком на всю ширину */
  .photo--portrait {
    width: 100%;
  }

  .protocol__count {
    font-size: 46px;
  }

  .answer .icon-box--pale {
    display: none;
  }

  .btn {
    padding: 0 14px;
  }

  .btn--block,
  .cta-card .btn,
  .card .btn,
  .contact .btn {
    width: 100%;
  }

  .btn span {
    white-space: normal;
    text-align: left;
  }

  .direct__phone {
    font-size: 19px;
  }

  .modal {
    padding: 14px;
  }

  .modal__window {
    padding: 24px 20px;
    gap: var(--s-12);
  }

  .modal__title {
    font-size: 23px;
    max-width: 260px;
  }
}

/* ------------------------------- ≤ 460 px -------------------------------- */
@media (max-width: 460px) {
  :root {
    --plate-pad-x: 16px;
    --s-72: 40px;
    --header-x: 22px;
  }

  .logo {
    height: 44px;
    padding: 0 14px;
  }

  .logo__name,
  .logo__mark {
    font-size: 19px;
  }

  .burger {
    width: 44px;
    height: 44px;
  }

  .mobile-menu {
    padding-top: 96px;
  }

  .mobile-menu__nav a {
    font-size: 18px;
  }

  .hero {
    margin-top: -54px;
    padding-top: 78px;
  }

  .hero__strip {
    gap: 190px;
  }

  .lawyer-card {
    height: 180px;
  }

  .hero__portrait {
    height: 340px;
  }

  .card,
  .case,
  .dossier,
  .form,
  .cta-card,
  .disclaimer,
  .card--wide {
    padding: 16px;
  }

  .answer {
    padding: 16px;
  }

  .case__title,
  .card__title {
    letter-spacing: -0.01em;
  }

  .status {
    height: auto;
    padding: 6px 8px;
    white-space: normal;
  }
}