/* fs19 №27: звания продавца на карточке выдачи — по макету телефона. * * Тимлид прислал свой экран и кадр из Figma: на телефоне звания («Эксперт», «Фермер», «Про») * стоят маленькими значками в левом нижнем углу фото и БЕЗ ПОДПИСЕЙ. У нас они с fs19 №17 * лежат развёрнутыми пилюлями в колонке продавца — так и задумано, но это макет широкого * экрана. На 375px карточки идут в две колонки, под именем остаётся полторы сотни точек, и * пилюли уезжали на вторую строку, растягивая карточку. * * services-results.js рисует ОБА вида сразу (значки — в [data-services-card-statuses] поверх * фото, пилюли — в [data-services-card-badges] под именем), а выбор делают эти правила. * Так вид меняется вместе с поворотом телефона, а не остаётся прежним до перезагрузки. * * ⚠️ Оба узла несут классы Tailwind (.flex, .hidden), поэтому правила ниже адресуют элементы * по data-атрибуту и лежат в отдельном файле: он подключается в , то есть ПОЗЖЕ * output.css, и при равной силе селектора выигрывает. */ @media (max-width: 767px) { [data-services-card-badges] { display: none; } /* Значки стоят на строку выше точек листания. Точки центрированы по фото, и их ряд тем шире, чем больше снимков: при восьми он дотягивается почти до левого края и упирается в значки — а у продавца званий бывает и три. Разводим по высоте раз и навсегда, вместо того чтобы гадать, чей ряд сегодня длиннее. */ [data-services-card-statuses] { bottom: 26px; } } @media (min-width: 768px) { [data-services-card-statuses] { display: none; } /* Чек-лист №20 п.13: в виде СЕТКОЙ пилюли званий лежат поверх фото (в виде списком они остаются под именем продавца — там селектор ниже не срабатывает, .svc-media их не содержит). Поднимаем на ту же строку, что и значки на телефоне, и по той же причине: ряд точек листания центрирован и тем шире, чем больше снимков — при восьми снимках он дотягивается до пилюли, а звание бывает длинным («Ответственный»). */ .svc-media [data-services-card-badges] { bottom: 26px; } }