и «Подробнее» — невидимые (тема задаёт плитке font-size:0,
а им font-size:var(--brand), это цвет, значение недействительно), но их
отступы оставались: 72 px на десктопе. Прячем их; линию под названием
тоже — без отступа она легла бы прямо на фото.
в) Три плитки в ряд от 1024 px (Дмитрий, 16.09 — эксперимент), было две
по 689 px. Плитка — колонка, текстовый блок растягивается: если где-то
в ряду название в две строки, фото всё равно стоят по одной линии.
На 1024–1279 px кегль названия меньше, иначе переносы в три строки. */
@media (max-width:550px){
.gallery-wrapper .gallery-item{margin-bottom:16px}
}
.gallery-wrapper .gallery-item .text{padding:20px 24px}
.gallery-wrapper .gallery-item .text .class-h3{margin:0;padding:0;border-bottom:0}
.gallery-wrapper .gallery-item .text p,
.gallery-wrapper .gallery-item .text .link{display:none}
@media (max-width:768px){
.gallery-wrapper .gallery-item .text{padding:14px 17px}
}
@media (min-width:1024px){
.gallery-wrapper{column-gap:30px;justify-content:flex-start}
.gallery-wrapper .gallery-item{box-sizing:border-box;width:calc((100% - 60px) / 3);margin-right:0;display:flex;flex-direction:column}
.gallery-wrapper .gallery-item .text{flex:1 1 auto}
.gallery-wrapper .gallery-item img{display:block;flex:none;width:100%;height:auto}
}
@media (min-width:1024px) and (max-width:1279px){
.gallery-wrapper .gallery-item .text .class-h3{font-size:21px}
}
/* --- 2. Скругление фото на странице проекта --------------------------------
Большое фото: у обёртки уже overflow:hidden, достаточно радиуса.
Миниатюры: скругляем span — в нём и фото, и затемнение при наведении. */
.project .project_big_photo{border-radius:16px}
.project .client-photos-listing-after .image-wrapper > span{border-radius:14px;overflow:hidden}
@media (max-width:1023px){
.project .project_big_photo{border-radius:10px}
.project .client-photos-listing-after .image-wrapper > span{border-radius:8px}
}
/* --- 3. «В интерьере использовались следующие модели» ----------------------
Карточки — чанк каталога catalogCard2026 с оформлением catalog-2026.css:
обёртка .catalog-2026 > .c26 даёт те же правила, что в каталоге, включая
мобильные. Здесь только сетка: в каталоге она привязана к #mse2_results
и делит ширину с фильтром, а на странице проекта 1–5 моделей под
заголовком по центру — ряд центрируем, ширину карточки держим как в
каталоге. До 1023 px — две карточки в ряд, как в мобильном каталоге. */
.pf-models .pf-models__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,250px));justify-content:center;gap:8px;align-items:stretch}
@media (max-width:1023px){
.pf-models .pf-models__grid{grid-template-columns:repeat(2,minmax(0,1fr));justify-content:stretch}
}
/* Модель больше не продаётся (TV blacklist = 1): чанк сам не печатает цену
и кнопки «В корзину» / «Купить в 1 клик», фото тема делает серым
(.black-products-listing в styles.min.css). Подпись встаёт на место
кнопок, чтобы карточка не выглядела недогруженной. order — потому что на
мобильной ширине части карточки расставлены через order (catalog-2026.css),
а псевдоэлемент без order встал бы первым. */
/* width — тема задаёт .black-products-listing{width:100%} при content-box:
с полями карточка выходила на 26 px шире колонки и наезжала на соседнюю. */
.pf-models .goods-item.black-products-listing{width:auto}
.pf-models .goods-item.black-products-listing::after{content:"Нет в продаже";order:9;display:block;margin-top:12px;padding:10px 8px;border:1px dashed var(--c26-line);border-radius:9px;background:#F7F9FB;text-align:center;font-size:13px;font-weight:600;color:var(--c26-muted)}
@media (max-width:1023px){
.pf-models .goods-item.black-products-listing::after{margin-top:8px;padding:8px 6px;font-size:12px;border-radius:8px}
}
/* --- 4. Телефон: страница проекта (Дмитрий, 16.09) --------------------------
Заголовок «В интерьере использовались…» был того же размера, что H1
страницы: тема ставит всем h2 font-size:22px !important при <=768 px —
поэтому здесь тоже !important, специфичность выше. Отступы вокруг —
40/20+30 px — сжаты. Фото проекта — по одной в ряд вместо трёх по 103 px
(тема: .client-photos-listing-after .image-wrapper{width:33.33%}).
С 768 px (планшет) всё как было.
Большое фото сверху (.project_big_photo — первое фото, обрезанное в полосу
1600×450) на телефоне было узкой лентой 330×93 и дублировало первое фото
списка сразу под ним — скрыто (Дмитрий: «просто первую бери»). */
@media (max-width:767px){
.project .project_big_photo{display:none}
.use-models-client.pf-models .page .title-wrapper{margin:0 0 12px}
.use-models-client.pf-models .page .title-wrapper h2{font-size:17px!important;line-height:1.3;margin:0}
.project .client-photos-listing-after .image-wrapper{width:100%}
}
/* --- 5. Страница проекта: отступ блока моделей и затемнение фото (16.09) ----
а) При <=768 px тема снимает левый отступ у контейнера секции каталога
(section.catalog .content{padding-left:0}), справа остаётся 15 px —
заголовок и карточки стояли вплотную к левому краю экрана. Возвращаем
15 px, как у остальной страницы.
б) Заливка цветом бренда с лупой при наведении (.overlay, opacity .8 на
:hover) на телефоне залипала после касания. Дмитрий: визуализация не
нужна — фото и так открывается по нажатию. */
@media (max-width:768px){
.use-models-client.pf-models .page.content{padding-left:15px}
}
.project .image-wrapper .overlay{display:none}
/* --- 6. Большое фото проекта на десктопе снова открывает увеличение (TASK-0686)
Верхнее фото (.project_big_photo, с 768 px) — ссылка href="#" без своего
снимка: увеличение открывает обработчик scripts.min.js по клику на .overlay
(кликает первую миниатюру списка). Со скрытым слоем (п. 5б) клик попадал
в «#» и с