/* ============================================================
   design-yurist.css — нишевая посадочная /prodayushchiy-sayt/dlya-yurista/ («Сайт для юриста»).
   Страница — копия /prodayushchiy-sayt/ (каркас и блоки из design-prodajushchiy.css + common.css),
   здесь только то, чего на родителе нет. Подключается только на этой странице.
   Порядок подключения: base.css -> design-prodajushchiy.css -> design-podhod.css -> design-yurist.css -> common.css -> messengers.css
   Разделы: 1) крошки в хиро; 2) карточки ошибок с длинным текстом; 3) блок «Подход» — схемы .ps-viz.
   ============================================================ */

/* --- 1. Хлебные крошки над хиро (.podhod-crumbs из design-podhod.css) ---
   На страницах-каркасах (.root--cases) зазор крошки → H1 даёт row-gap контейнера 1.25em (моб. 3em);
   здесь крошки стоят перед .hero__row, поэтому тот же зазор — отступом. em от кегля крошек
   (0.81em / моб. 2.36em): 1.25 / 0.81 = 1.54; 3 / 2.36 = 1.27. */
.section-top .podhod-crumbs { margin-bottom: 1.54em; }
@media (max-width: 479px) {
  .section-top .podhod-crumbs { margin-bottom: 1.27em; }
}

/* --- 2. Блок «Что мешает сайтам юристов продавать» — компонент .pain__card родителя ---
   У родителя карточка фиксированной высоты 11.5em под 1–2 строки текста; здесь тексты разбора длиннее,
   поэтому высота по содержимому (карточки ряда выравниваются flex-строкой .pain__row). На мобайле у родителя уже auto. */
.pain__card--auto { height: auto; }

/* --- 3. Блок «Подход» (.selling__*): медиа карточек — схемы .ps-viz вместо коллажа ca1–ca4 / prototype / upravlenie ---
   Концепция: _refactor-tools/verstka/runs/sayt-dlya-yurista/podhod/design.md (ред. 5).
   Разметка: div.ps-viz.ps-viz--{dna|shot} (grid-area: media) > .browser.browser--sm.ps-viz__win (common.css)
     > .browser__bar + .ps-viz__body:
       К1 — .ps-dna: .ps-dna__src (3 плитки .ps-dna__s) + svg.ps-dna__lines + реестр .ps-dna__reg (.ps-dna__hd + 6 × .ps-dna__row);
       К2, К3 — .ps-shot > .ps-shot__in > img.ps-shot__img + 5 рамок .ps-shot__zone--{offer|step|case|self|qual} с пилюлей .ps-shot__tag.
   Размер окна как у .selling__card-image-5 родителя: 28.82em × 16.29em (на 1200 ≈ 415×235).
   Масштаб — способ (б) скилла: внутри .ps-viz em от кегля контейнера, текст схем 0.84em (≈12px на 1200);
   мобайл — один множитель 3em на обёртку (≈14px на 414, 12px на 360). Глобальных классов с мобильным
   множителем внутри нет, кроме полосы .browser__bar — её мобильный размер из common.css гасится 0.33em. */
.ps-viz { grid-area: media; width: 28.82em; height: 16.29em; font-family: "TildaSans Light", sans-serif; }
.ps-viz p { margin: 0; }
.ps-viz__win { height: 100%; display: flex; flex-direction: column; border: 1px solid rgba(255, 255, 255, 0.1); }
.ps-viz__body { flex: 1 1 auto; min-height: 0; }

/* Карточка 1: сборка реестра «ДНК проекта» из трёх источников */
.ps-dna { background: rgba(23, 8, 31, 1); padding: 0.5em; display: grid; grid-template-columns: 7.6em 1.4em 1fr; }
.ps-dna__src { display: flex; flex-direction: column; justify-content: space-between; gap: 0.35em; }
.ps-dna__s { flex: 1 1 0; display: flex; flex-direction: column; justify-content: center; background: #2A0E38;
  border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 0.42em; padding: 0.3em 0.5em; }
.ps-dna__s b { font: 0.84em/1.15 "TildaSans Medium", sans-serif; color: rgba(219, 219, 219, 1); }
.ps-dna__s span { font-size: 0.84em; line-height: 1.15; color: rgba(219, 219, 219, 0.6); margin-top: 0.2em; }
.ps-dna__lines { width: 100%; height: 100%; }
.ps-dna__reg { border: 1px solid rgba(202, 251, 0, 0.5); border-radius: 0.42em; background: #2A0E38; padding: 0.3em 0.6em;
  display: flex; flex-direction: column; justify-content: space-between; min-width: 0; }
.ps-dna__hd { font: 0.84em/1.2 "TildaSans Medium", sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(202, 251, 0, 1); }
.ps-dna__row { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "b i" "s s"; column-gap: 0.5em;
  padding-top: 0.15em; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.ps-dna__row b { grid-area: b; font: 0.84em/1.1 "TildaSans Semibold", sans-serif; color: #fff; }
.ps-dna__row i { grid-area: i; font: 0.84em/1.1 "TildaSans Medium", sans-serif; font-style: normal; color: rgba(219, 219, 219, 0.45); }
.ps-dna__row span { grid-area: s; font-size: 0.84em; line-height: 1.1; color: rgba(219, 219, 219, 0.6); }

/* Карточки 2 и 3: картинка первого экрана (смысловой прототип / реальный скрин, обе 1600×1006) + метки смыслов из ДНК.
   Рамки стоят на одних координатах (% от картинки) — карточки 2 и 3 читаются как «до / после графики».
   На десктопе картинка прижата к верху окна, низ срезается телом окна (overflow: hidden); на мобайле видна целиком. */
.ps-shot { overflow: hidden; background: rgba(23, 8, 31, 1); }
.ps-shot__in { position: relative; aspect-ratio: 1600 / 1006; }
.ps-shot__img { display: block; width: 100%; height: 100%; }
.ps-shot__short { display: none; }
/* рамка 0.1em (≈1.4px на 1200) — в em, чтобы толщина масштабировалась вместе со схемой */
.ps-shot__zone { position: absolute; border: 0.1em solid rgba(202, 251, 0, 1); border-radius: 0.3em; }
.ps-shot__zone--offer { left: 2.5%; top: 16%; width: 58%; height: 14.5%; }
.ps-shot__zone--step { left: 2.5%; top: 50%; width: 30%; height: 8.5%; }
.ps-shot__zone--case { left: 2.8%; top: 70.8%; width: 29.8%; height: 21.2%; }
.ps-shot__zone--self { left: 35.2%; top: 70.8%; width: 29.8%; height: 21.2%; }
.ps-shot__zone--qual { left: 67.5%; top: 70.8%; width: 29.8%; height: 21.2%; }
.ps-shot__tag { position: absolute; left: 0.4em; top: 0; transform: translateY(-60%); font: 0.84em/1 "TildaSans Medium", sans-serif; white-space: nowrap;
  color: rgba(23, 8, 31, 1); background: rgba(202, 251, 0, 1); border-radius: 999px; padding: 0.15em 0.55em 0.2em; }

@media (max-width: 479px) {
  .ps-viz { width: 100%; height: auto; font-size: 3em; }
  .ps-viz__win { height: auto; border-radius: 0.6em; }
  .ps-viz .browser__bar { font-size: 0.33em; }
  .ps-dna { grid-template-columns: 1fr; row-gap: 0.7em; }
  .ps-dna__src { flex-direction: row; }
  .ps-dna__lines { display: none; }
  .ps-dna__reg { position: relative; row-gap: 0.4em; }
  .ps-dna__reg::before { content: "↓"; position: absolute; left: 50%; top: -0.45em; transform: translate(-50%, -50%); line-height: 1;
    font-size: 0.84em; color: rgba(219, 219, 219, 0.6); }
  /* короткая подпись-«вкладка» над рамкой, чтобы не закрывать текст скрина; сдвиг влево = толщине рамки (0.1em) */
  .ps-shot__tag { left: -0.12em; padding: 0.1em 0.4em 0.15em; transform: translateY(-100%); border-radius: 0.3em 0.3em 0 0; }
  .ps-shot__full { display: none; }
  .ps-shot__short { display: inline; }
}

/* --- 4. Тарифы ---
   Подзаголовок тарифа — пояснение: p.text_16 белым (двойной селектор против серого .text_16 из common.css). */
.text_16.pricing__card-subtitle { color: rgba(255, 255, 255, 1); margin: 0; }
/* Пункты, которых нет в тарифе (есть в соседнем; строк в карточках поровну), — серый крестик и приглушённый текст. */
.pricing__feature--off .text_16.pricing__feature-text { color: rgba(219, 219, 219, 0.3); }
/* С добавленным значком «ИИ» и подзаголовком список UPGRADE может не влезть в фиксированные 33.83em родителя — высота по содержимому,
   не меньше родительской; зазор до логотипов как row-gap карточки СТАРТ (20px на 1200 = 1.25em). */
@media (min-width: 480px) {
  .pricing__cards { align-items: stretch; }
  .pricing__card, .pricing__card-2 { height: auto; min-height: 33.83em; row-gap: 1.25em; }
}