/* =========================================================================
   service.css — общие компоненты страниц услуг (первый экран, квиз,
   финальный призыв, подвал) плюс блоки страницы «Юрист на аутсорсе».
   Подключается ПОСЛЕ responsive.css. Там, где переопределяются общие правила,
   используются двойные селекторы (.hero.hero--svc) — чтобы не зависеть от
   порядка подключения файлов.
   ========================================================================= */

/* ------------------------- 1. Тёмная и светлая секции --------------------- */
.section--dark {
  background: var(--c-text);
  color: var(--c-on-dark);
}

.section--panel {
  background: var(--c-panel);
}

.section--soft {
  background: var(--c-bg);
}

.section__title--on-dark {
  color: var(--c-on-dark);
}

.section__lead--on-dark {
  color: var(--c-on-dark-60);
}

/* -------------------------- 2. Первый экран услуги ------------------------ */
.hero.hero--svc {
  min-height: 0;
  gap: 30px;
  border-radius: var(--r-section);
}

.hero-svc__top {
  display: flex;
  align-items: stretch;
  gap: 28px;
  flex: 1 1 auto;
}

.hero-svc__offer {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 28px;
}

.hero-svc__title {
  max-width: 760px;
  font-size: clamp(30px, 3.75vw, 54px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.hero-svc__title-accent {
  color: var(--c-accent);
}

.hero-svc__lead {
  max-width: 690px;
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.4;
  color: var(--c-muted);
}

.hero-svc__visual {
  position: relative;
  width: 538px;
  flex: none;
  min-height: 510px;
  border-radius: var(--r-card);
  overflow: hidden;
}

.hero-svc__badge {
  position: absolute;
  left: 22px;
  top: 22px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 13px 15px;
  background: rgba(255, 255, 255, 0.93);
  border-radius: var(--r-sm);
}

.hero-svc__badge-value {
  font-size: 22px;
  white-space: nowrap;
}

.hero-svc__badge-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--c-muted);
  white-space: nowrap;
}

/* Фотография в визуальной панели первого экрана */
.hero-svc__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Заглушка вместо фотографии — заменяется на реальный снимок */
.media-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: inherit;
  background: #d7e0ec;
  color: #93a3b8;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-align: center;
}

/* ------------- 3. Лента конкретики и строка действия в hero --------------- */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  flex: none;
}

.pillar {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px;
  background: var(--c-surface);
  border-radius: 16px;
  transition: transform var(--t-base), box-shadow var(--t-base);
}

.pillar:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.pillar__num {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.9px;
  color: var(--c-accent);
}

.pillar__title {
  font-size: clamp(17px, 1.4vw, 19px);
  font-weight: 600;
  letter-spacing: -0.014em;
}

.pillar__text {
  font-size: var(--fs-small);
  line-height: 1.4;
  color: var(--c-muted);
}

/* Строка «кнопка + срок ответа» */
.hero-svc__action {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
}

.hero-svc__reply {
  font-size: var(--fs-small);
  color: var(--c-muted);
}

/* ------------------------------ 4. Метрики -------------------------------- */
.metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  flex: none;
}

.metric {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 12px;
  min-height: 120px;
  padding: 20px;
  background: var(--c-surface);
  
  border-radius: var(--r-md);
}

/* Иконка и значение — в одну строку */
.metric__head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.metric--accent {
  background: var(--c-accent);
  border-color: var(--c-accent);
}

.metric__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: var(--r-xs);
  background: var(--c-bg);
  color: var(--c-accent);
}

.metric--accent .metric__icon {
  background: rgba(255, 255, 255, 0.16);
  color: var(--c-on-dark);
}

.metric__value {
  font-size: clamp(24px, 2.1vw, 30px);
  font-weight: 700;
  letter-spacing: -0.027em;
  white-space: nowrap;
}

.metric--accent .metric__value {
  color: var(--c-on-dark);
}

.metric__label {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.28;
  color: var(--c-muted);
}

.metric--accent .metric__label {
  color: var(--c-on-dark-80);
}

/* --------------------------- 5. Сравнение штат/аутсорс -------------------- */
.compare {
  background: var(--c-surface);
  color: var(--c-text);
  border-radius: 17px;
  overflow: hidden;
}

.compare__head {
  display: flex;
}

.compare__side {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 0;
  min-width: 0;
  min-height: 60px;
  padding: 0 22px;
  font-size: 18px;
}

.compare__side--staff {
  background: #e8edf4;
}

.compare__side--staff .ic {
  color: #d9603b;
}

.compare__side--out {
  background: var(--c-accent);
  color: var(--c-on-dark);
}

.compare__row {
  border-bottom: 1px solid #e1e6ed;
}

.compare__row:last-child {
  border-bottom: 0;
}

.compare__criterion {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 27px;
  padding: 4px 22px;
  background: #f3f5f8;
  font-size: 11px;
  letter-spacing: 0.8px;
  color: var(--c-muted);
  text-align: center;
}

.compare__pair {
  display: flex;
}

.compare__cell {
  display: flex;
  align-items: center;
  gap: 11px;
  flex: 1 1 0;
  min-width: 0;
  min-height: 65px;
  padding: 14px 22px;
  font-size: var(--fs-small);
  line-height: 1.35;
}

.compare__cell--staff {
  border-right: 1px solid #e1e6ed;
  color: var(--c-muted);
}

.compare__cell--staff .ic {
  color: #d9603b;
}

.compare__cell--out .ic {
  color: var(--c-accent);
}

/* Подпись стороны — нужна только когда колонки складываются в столбик */
.compare__cell-label {
  display: none;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.7px;
  color: var(--c-muted);
}

/* -------------------------------- 6. Квиз --------------------------------- */
/* Пустой контейнер: сюда вставляется виджет Marquiz */
.quiz {
  width: 100%;
  min-height: 524px;
  background: var(--c-surface);
  border-radius: var(--r-xs);
}

/* ----------------------------- 7. Форматы задач --------------------------- */
.tasks {
  display: flex;
  align-items: stretch;
  gap: 18px;
}

.tasks__col {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
  gap: 18px;
}

.task {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 28px;
  background: var(--c-surface);
  border-radius: var(--r-card);
}

.task--accent {
  width: 520px;
  flex: none;
  justify-content: center;
  background: var(--c-accent);
  color: var(--c-on-dark);
}

.task__title {
  font-size: clamp(24px, 2vw, 28px);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.025em;
}

.task__divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.22);
}

.icon-box--soft {
  width: 50px;
  height: 50px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.11);
  color: var(--c-on-dark);
}

.task__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.task__list li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: var(--fs-small);
  line-height: 1.4;
  color: var(--c-on-dark-80);
}

.task__list .ic {
  margin-top: 2px;
  color: var(--c-on-dark);
}

/* Две карточки в правой колонке: описание слева, список справа */
.task--row {
  flex: 1 1 0;
  flex-direction: row;
  align-items: center;
  gap: 24px;
  padding: 26px;
}

.task__meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  width: 230px;
  flex: none;
}

.task__meta .task__title {
  font-size: clamp(20px, 1.5vw, 22px);
}

.task__checks {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
  gap: 14px;
}

.task__checks li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: var(--fs-small);
  line-height: 1.4;
  color: var(--c-muted);
}

.task__checks .ic {
  margin-top: 2px;
  color: var(--c-accent);
}

/* ------------------------------- 7. Кейсы --------------------------------- */
.case-o {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 28px;
  background: var(--c-surface);
  border-radius: var(--r-card);
}

.case-o--dark {
  background: var(--c-text);
  color: var(--c-on-dark);
}

.case-o__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.case-o__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: var(--r-sm);
  background: #eef3ff;
  color: var(--c-accent);
  font-size: 13px;
  font-weight: 700;
}

.case-o--dark .case-o__num {
  background: rgba(255, 255, 255, 0.08);
  color: var(--c-on-dark);
}

.case-o__industry {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: var(--c-muted);
}

.case-o--dark .case-o__industry {
  color: var(--c-on-dark-60);
}

.case-o__title {
  font-size: clamp(24px, 2.2vw, 31px);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.022em;
}

.case-o__steps {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

.case-o__steps > div {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid var(--c-line);
}

.case-o--dark .case-o__steps > div {
  border-bottom-color: rgba(255, 255, 255, 0.14);
}

.case-o__steps > div:last-child {
  border-bottom: 0;
}

.case-o__steps dt {
  width: 105px;
  flex: none;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.8px;
  line-height: 1.3;
  color: var(--c-muted);
}

.case-o--dark .case-o__steps dt {
  color: var(--c-on-dark-60);
}

.case-o__steps dd {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 15px;
  line-height: 1.46;
  color: #4b515b;
}

.case-o--dark .case-o__steps dd {
  color: var(--c-on-dark-80);
}

.case-o__result {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 22px;
  background: #eef3ff;
  border-radius: var(--r-md);
}

.case-o--dark .case-o__result {
  background: rgba(255, 255, 255, 0.07);
}

.case-o__metric {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 210px;
  flex: none;
}

.case-o__value {
  font-size: clamp(26px, 2.4vw, 34px);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--c-accent);
  white-space: nowrap;
}

.case-o--dark .case-o__value {
  color: #7fa0ff;
}

.case-o__caption {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.33;
  color: var(--c-muted);
}

.case-o--dark .case-o__caption {
  color: var(--c-on-dark-60);
}

.case-o__summary {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.38;
}

/* ---------------------------- 8. Финальный призыв ------------------------- */
.cta-final {
  display: flex;
  align-items: center;
  gap: 52px;
}

.cta-final__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 26px;
  width: 660px;
  flex: none;
}

.cta-final__title {
  font-size: clamp(30px, 3.75vw, 54px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.037em;
  color: var(--c-on-dark);
  text-wrap: balance;
}

.cta-final__text p {
  max-width: 610px;
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--c-on-dark-80);
}

.trust {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-on-dark-60);
}

.form.form--cta {
  width: auto;
  flex: 1 1 auto;
  min-width: 0;
  gap: 20px;
  padding: 30px;
  justify-content: center;
}

.form__title {
  font-size: clamp(24px, 2.1vw, 29px);
  font-weight: 600;
  letter-spacing: -0.017em;
}

.form__subtitle {
  font-size: 15px;
  line-height: 1.4;
  color: var(--c-muted);
}

/* Поле с меткой внутри рамки */
.field--boxed {
  gap: 2px;
  padding: 10px 15px;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: 11px;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.field--boxed:focus-within {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(45, 91, 238, 0.14);
}

.field--boxed .field__label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.7px;
  color: var(--c-muted);
}

.field--boxed .field__input {
  height: auto;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  font-size: 18px;
  font-weight: 500;
}

.field--boxed .field__input:focus {
  outline: none;
  background: none;
  box-shadow: none;
}

/* Ошибку подсвечивает сама рамка поля — у инпута внутри её нет */
.field--boxed.is-invalid {
  border-color: #d33a3a;
  background: #fdf5f5;
}

.field--boxed.is-invalid .field__input {
  border: 0;
  background: none;
}

.form__note {
  font-size: 11px;
  line-height: 1.36;
  color: #8a93a0;
}

/* ------------------------------- 9. Подвал -------------------------------- */
.footer--svc .footer__main {
  gap: 56px;
}

.footer--svc .footer__brand {
  width: 480px;
  gap: 18px;
}

.footer__geo-line {
  font-size: var(--fs-small);
  color: var(--c-footer-muted);
}

.footer__contacts {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

.footer__contacts li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.55);
}

.footer__contacts li:last-child {
  border-bottom: 0;
}

.footer__contacts a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 62px;
  padding: 12px 0;
  font-size: var(--fs-small);
  transition: color var(--t-fast);
}

.footer__contacts a:hover {
  color: var(--c-accent);
}

.footer__contacts .ic {
  flex: none;
  color: var(--c-footer-caption);
  transition: transform var(--t-base), color var(--t-fast);
}

.footer__contacts a:hover .ic {
  color: var(--c-accent);
  transform: translate(3px, -3px);
}

/* ----------------------- 10. Наведение и появление ------------------------ */
.metric,
.task,
.case-o {
  transition: transform var(--t-base), box-shadow var(--t-base);
}

.task:hover,
.case-o:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.compare__cell {
  transition: background-color var(--t-fast);
}

.compare__row:hover .compare__cell {
  background: #fafbfd;
}

/* ============================== АДАПТАЦИЯ ================================= */

/* ------------------------------ ≤ 1180 px -------------------------------- */
@media (max-width: 1180px) {
  .hero-svc__visual {
    width: 420px;
    min-height: 440px;
  }

  .task--accent {
    width: 420px;
  }

  .task__meta {
    width: 190px;
  }

  .cta-final__text {
    width: 52%;
  }
}

/* ------------------------------ ≤ 1024 px -------------------------------- */
@media (max-width: 1024px) {
  .hero.hero--svc {
    gap: 24px;
  }

  .hero-svc__top {
    flex-direction: column;
    gap: 22px;
  }

  .hero-svc__offer {
    gap: 22px;
  }

  .hero-svc__title,
  .hero-svc__lead {
    max-width: none;
  }

  .hero-svc__visual {
    width: 100%;
    min-height: 360px;
  }

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

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

  /* Задачи в одну колонку */
  .tasks {
    flex-direction: column;
  }

  .task--accent {
    width: 100%;
  }

  /* Кейсы в одну колонку */
  .grid--cases-o {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Финальный призыв */
  .cta-final {
    flex-direction: column;
    align-items: stretch;
    gap: 28px;
  }

  .cta-final__text {
    width: 100%;
  }

  .cta-final__text p {
    max-width: none;
  }

  .form.form--cta {
    width: 100%;
  }

  .footer--svc .footer__brand {
    width: 100%;
  }
}

/* ------------------------------- ≤ 860 px -------------------------------- */
@media (max-width: 860px) {
  .task,
  .case-o {
    padding: 20px;
  }

  .task--row {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }

  .task__meta {
    width: 100%;
  }

  .form.form--cta {
    padding: 20px;
  }

  /* Сравнение: пары становятся друг под другом, шапка не нужна */
  .compare__head {
    display: none;
  }

  .compare__pair {
    flex-direction: column;
  }

  /* flex: none обязателен: в колоночном контейнере flex-basis: 0 задаёт
     высоту, и ячейки схлопнулись бы в ноль, а текст полез бы на соседние */
  .compare__cell {
    flex: none;
    align-items: flex-start;
    min-height: 0;
    padding: 14px 18px;
  }

  .compare__cell--staff {
    border-right: 0;
    border-bottom: 1px solid #e1e6ed;
  }

  .compare__cell-label {
    display: block;
    margin-bottom: 3px;
  }

  .compare__cell > div {
    display: flex;
    flex-direction: column;
  }

  .compare__criterion {
    justify-content: flex-start;
    padding: 6px 18px;
    text-align: left;
  }

  /* Кейсы: метка над значением */
  .case-o__steps > div {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 14px 0;
  }

  .case-o__steps dt {
    width: auto;
  }

  .case-o__result {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 18px;
  }

  .case-o__metric {
    width: 100%;
  }
}

/* ------------------------------- ≤ 640 px -------------------------------- */
@media (max-width: 640px) {
  .metrics {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .metric {
    min-height: 0;
    gap: 10px;
    padding: 16px;
  }

  .metric__icon {
    width: 30px;
    height: 30px;
  }

  .metric__label,
  .task__list li,
  .task__checks li {
    font-size: 14px;
  }

  .hero-svc__visual {
    min-height: 280px;
  }

  /* На телефоне бейдж уходит вниз снимка: сверху кадра обычно лица,
     а нижняя часть — стол и документы, там подпись не мешает */
  .hero-svc__badge {
    left: 14px;
    top: auto;
    bottom: 14px;
    padding: 10px 12px;
  }

  .hero-svc__badge-value {
    font-size: 18px;
  }

  .hero-svc__badge-label {
    font-size: 12px;
  }

  .quiz {
    min-height: 620px;
  }

  .case-o__steps dd {
    font-size: 14px;
  }

  .field--boxed .field__input {
    font-size: 16px;
  }

  .pillar {
    padding: 18px;
  }

  .pillar__text {
    font-size: 14px;
  }

  .hero-svc__action {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
  }

  .hero-svc__action .btn {
    width: 100%;
  }
}