/* Для кого — стили страницы (скоуп for-whom.html).
   Главная и общие файлы заморожены: components.css/tokens.css не трогаем,
   всё, что отличается от эталона, — модификаторы здесь.
   Значения — замер по SVG Figma «For whom - Desktop 1440 / Tablet 769 / Mobile 390». */

/* ——— 01 · Карточки сегментов ——————————————————————————————————
   Д: фото слева 200 px на всю высоту карточки; П и Т: фото сверху 140 px. */
.fw-segs{list-style:none;margin:0;padding:0}
.fw-segs + .fw-note{margin-top:44.5px}
.head--h1{margin-bottom:47px}

.card--fw{
  display:grid;
  grid-template-columns:minmax(0,200px) minmax(0,1fr);
  padding:0;
  overflow:hidden;
  border-radius:var(--r-md);
}
.card--fw .fw__pic{grid-column:1;grid-row:1;display:block;min-height:0}
.card--fw .fw__photo{
  display:block;
  width:100%;height:100%;
  object-fit:cover;
}
.card--fw .fw__body{grid-column:2;grid-row:1;padding:27px 30px 31px}

.card--fw .label + .title{margin-top:7px}
.card--fw .micro{display:block}
.card--fw .title + .micro{margin-top:19px}
.card--fw .bubble-q + .micro{margin-top:17px}
.card--fw p + .micro{margin-top:16px}
.card--fw .micro + .bubble-q{margin-top:6px}
.card--fw .micro + p:not(.bubble-q){margin-top:5px;color:var(--gray)}   /* правка Сергея 19.10, п. 19: пузырь-вопрос — тоже <p> после .micro, и это правило красило его текст серым поверх белого из components.css; по макетам на синей заливке текст белый */
.card--fw .micro + .fw__step{margin-top:7px}
.card--fw .fw__step{color:var(--ink);font-weight:700}
.card--fw .bubble-q{
  display:inline-block;
  margin:0;
  font-size:var(--fs-body);line-height:var(--lh-body);
  padding:10px 18px;
  border-radius:var(--r-bubble) var(--r-bubble) 6px var(--r-bubble);
}


/* ——— 02 · Пример ————————————————————————————————————————— */
.fw-case__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,560px);
  column-gap:40px;
  align-items:start;
}
.fw-case__left .head{margin-bottom:0}
.fw-case .lead{margin-top:30px;max-width:none}
.fw-case__btn{margin-top:29px}
.fw-case__cards{list-style:none;margin:8.5px 0 0;padding:0;display:grid;gap:16px}

.card--fwc{border-radius:var(--r-md);padding:27px 23px 26px 31px}
.card--fwc:nth-child(n+2){padding-bottom:29px}   /* правое поле 23 вместо 31: строка «…3 страницы её сайта» в Chromium на 7 px шире, чем в Figma */
.card--fwc .label + .title{margin-top:7px}
.card--fwc p{margin-top:9px;font-size:var(--fs-body);line-height:var(--lh-body)}

/* ——— Планшет 768–1023 ———————————————————————————————————— */
@media (max-width:1023px){
  /* фото 140 и текст прижаты к верху: лишнюю высоту ряда карточка оставляет
     снизу, а не раздаёт строкам (в макете фото и текст не съезжают вниз) */
  .card--fw{grid-template-columns:1fr;border-radius:var(--r-md);align-content:start}
  .card--fw .fw__pic{grid-column:1;grid-row:1}
  .card--fw .fw__body{grid-column:1;grid-row:2;padding:18.4px 18px 25px 21px}
  .card--fw .fw__photo{height:140px}
  .card--fw .label + .title{margin-top:6px}
  .card--fw .title + .micro{margin-top:15.6px}
  .card--fw .micro + .bubble-q{margin-top:5px}
  .card--fw .bubble-q + .micro{margin-top:15px}
  .card--fw .micro + p{margin-top:4px}
  .card--fw p + .micro{margin-top:14px}
  .card--fw .micro + .fw__step{margin-top:6px}

  .fw-segs + .fw-note{margin-top:27.6px}
  .head--h1{margin-bottom:30px}

  .fw-case__grid{grid-template-columns:1fr;column-gap:0}
  .fw-case__btn{margin-top:22px}
  .fw-case__cards{margin-top:40px;gap:12px}
  .fw-case .lead{margin-top:19.4px}
  /* В макетах 768 и 390 заголовок карточки примера — кегль «обычного» заголовка
     карточки (19 / 18), а текст — основной 17/24, а не мелкий. Замер по SVG. */
  .card--fwc .title{font-size:var(--fs-title-s);line-height:var(--lh-title-s)}
  .card--fwc{padding:20.6px 24px 19.8px 22px}
  .card--fwc:nth-child(2){padding-bottom:22.8px}
  .card--fwc:nth-child(3){padding-bottom:21.8px}
  .card--fwc .label + .title{margin-top:4.9px}
  .card--fwc p{margin-top:6.8px}
  /* Текстовый блок карточки в макете 768 уже карточки (596 px): «верно.» и
     «страницы её сайта» переносятся при свободном месте справа. */
  .card--fwc .title,.card--fwc p{max-width:596px}
}

/* ——— H1 на планшете ————————————————————————————————————————
   В макете 768 заголовок занимает три строки: «Кому подходит GEO.» /
   «И что мы делаем для» / «каждого.». Серую часть с новой строки
   решением [С] 12.10 переносить нельзя, поэтому ширина текстового блока
   взята из макета (между 508 и 540 — ширина строки 2 и место под «И»). */
@media (min-width:768px) and (max-width:1023px){
  .head--h1 .h1{max-width:530px}
}

/* ——— Телефон до 767 ————————————————————————————————————— */
@media (max-width:767px){
  .fw-segs{gap:16px}   /* шаг карточек в макете 390 — 16, не 12 */
  .card--fw .fw__body{padding:17.7px 20px 25.55px}   /* 25,55: высота карточек в макете 390 целая (495/495/469/493) */
  .card--fw .bubble-q{padding:10px 15px}   /* поля пузыря: в Chromium строка «Посоветуй стоматологию в Сочи» шире, чем в Figma */
  .card--fw .label + .title{margin-top:3.6px}
  .card--fw .title + .micro{margin-top:17.2px}
  .card--fw .micro + .bubble-q{margin-top:5.5px}
  .card--fw .bubble-q + .micro{margin-top:14.5px}
  .card--fw .micro + p{margin-top:5px}
  .card--fw p + .micro{margin-top:15.3px}
  .card--fw .micro + .fw__step{margin-top:4.7px}
  .fw-segs + .fw-note{margin-top:27.5px}
  .head--h1{margin-bottom:29px}
  .fw-case__btn{width:100%;margin-top:21px}
  .fw-case__cards{margin-top:32px}
  .fw-case .lead{margin-top:20.5px}
  .card--fwc{padding:20.6px 24px 22.7px 22px}
  .card--fwc:nth-child(2){padding-bottom:22.7px}
  .card--fwc:nth-child(3){padding-bottom:20.7px}
  .card--fwc .label + .title{margin-top:5.7px}
  .card--fwc p{margin-top:6px}
}