/* Главная, блок «Если задачу поставил руководитель» — правки 90, пункты 1–6.
   Наряд «Дизайн-120», санкция [С] 24.10 11:29, HOME_UNFREEZE=2026-10-24.
   components.css и tokens.css не правятся: всё переопределяется специфичностью
   (.section--soft .feature--order … — секция 06 единственная с этим классом). */

/* 2 · Порядок блоков — Grid: head / media / steps.
   ПК ≥1024 — две колонки, фото во всю высоту справа. */
.section--soft .feature--order{grid-template-areas:"head media" "steps media"}
.section--soft .feature--order>.head{grid-area:head}
.section--soft .feature--order>.feature__visual{grid-area:media}
.section--soft .feature--order>.rows{grid-area:steps}

/* 1, 3 · Фото целым кадром, кадрирование — object-fit/object-position.
   ПК ≥1280: 560×680. */
.section--soft .feature--order .feature__photo{object-position:66% 0}
.section--soft .feature--order .feature__photo--square{aspect-ratio:560/680}

/* 4 · Компактная плашка чата: 400 px, слева снизу на фото, отступы 24, поля 16. */
.section--soft .feature--order .msg{
  justify-self:start;align-self:end;
  width:400px;max-width:calc(100% - 48px);
  margin:0 0 24px 24px;
  padding:16px;
  box-shadow:none}                                   /* 6 · теней нет */
.section--soft .feature--order .msg__avatar{flex:0 0 28px;width:28px;height:28px}
.section--soft .feature--order .msg__row + .msg__bubble{margin-top:8px}
.section--soft .feature--order .msg__bubble + .msg__row{margin-top:12px}
.section--soft .feature--order .msg__row--r + .msg__bubble{margin-top:8px}
.section--soft .feature--order .msg__bubble{padding:10px 14px}
/* 5 · Игорь — на всю ширину плашки, Аня — справа. */
.section--soft .feature--order .msg__bubble--blue{width:fit-content;margin-left:auto;max-width:84%}

/* ПК 1024–1279: фото ниже (560/640), плашка в потоке — наезжает на низ фото. */
@media (min-width:1024px) and (max-width:1279px){
  .section--soft .feature--order .feature__photo--square{aspect-ratio:560/640}
  .section--soft .feature--order .feature__visual{grid-template-rows:auto auto}
  .section--soft .feature--order .feature__visual>.pic>.feature__photo{grid-area:1/1}
  .section--soft .feature--order .msg{
    grid-area:2/1;position:relative;
    width:auto;max-width:none;margin:-96px 24px 0}
}

/* Планшет и телефон: один столбец head → media → steps, шаг var(--gap-head). */
@media (max-width:1023px){
  .section--soft .feature--order{
    grid-template-areas:"head" "media" "steps";
    row-gap:var(--gap-head)}
  .section--soft .feature--order>.head{margin-bottom:0}
  .section--soft .feature--order>.feature__visual{margin-bottom:0}
}

/* Планшет 768–1023: фото во всю ширину 688/640, плашка слева снизу на фото. */
@media (min-width:768px) and (max-width:1023px){
  .section--soft .feature--order .feature__photo{object-position:62% 0}
  .section--soft .feature--order .feature__photo--square{aspect-ratio:688/640}
}

/* Телефон: фото 350/300, плашка в потоке с наездом 64, поля 20/16. */
@media (max-width:767px){
  .section--soft .feature--order .feature__photo{object-position:75% 0}
  .section--soft .feature--order .feature__photo--square{aspect-ratio:350/300}
  .section--soft .feature--order .feature__visual{grid-template-rows:auto auto}
  .section--soft .feature--order .feature__visual>.pic>.feature__photo{grid-area:1/1}
  .section--soft .feature--order .msg{
    grid-area:2/1;position:relative;
    width:auto;max-width:none;margin:-64px 0 0;
    padding:20px 16px}
  .section--soft .feature--order .msg__bubble--blue{max-width:76%}
}