/* ТЗ-126 В17 (ТЗ 2.12): корень каталога — плитки разделов с фото и карусель акций.
Файл подключается ТОЛЬКО на ресурсе 2 (category.tpl, условие по id): остальным
тремстам категориям эти блоки не нужны, а лишний запрос за стилями нужен им ещё
меньше.
Свои классы .katalog-plitka*, .categories--katalog, .akczii__strelka* и ничьих
чужих (RULES п. 131): рядом лежат general.css, category.css и akczii.css.
Сетку .categories переопределяем ОДНИМ правилом с модификатором --katalog —
плитки внутри категорий (там же, но без модификатора) остаются как были.
Палитра сайта: подложка плитки #f5f5f6, текст #333, серый #5f6570, акцент #001960. */
/* ── плитки разделов ──────────────────────────────────────────────── */
.categories--katalog{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));column-gap:16px;row-gap:16px}
.categories__plitka{display:flex}
/* плитка — не ссылка, а коробка: внутри ссылка на раздел и ссылки подразделов,
вложенный внутри недопустим */
.katalog-plitka{display:flex;flex-direction:column;gap:12px;width:100%;padding:16px;box-sizing:border-box;background-color:#f5f5f6;border-radius:8px;transition:box-shadow .3s}
.katalog-plitka:hover{box-shadow:1px 2px 12px 2px rgba(0,25,96,.12)}
.katalog-plitka__glavnaya{display:flex;flex-direction:column;gap:12px;text-decoration:none}
/* фото — в своей рамке с белым фоном: снимки проката сняты на белом, «cover»
обрезал бы у трубы торец, по которому её и узнают */
.katalog-plitka__foto{width:100%;aspect-ratio:3/2;object-fit:contain;background-color:#fff;border-radius:6px}
.katalog-plitka__tekst{display:flex;flex-direction:column;gap:4px}
.katalog-plitka__name{font-weight:600;font-size:17px;line-height:135%;color:#333;text-wrap:pretty;transition-duration:400ms}
.katalog-plitka__glavnaya:hover .katalog-plitka__name{color:#001960}
.katalog-plitka__vidov{font-weight:400;font-size:13px;line-height:140%;color:#5f6570}
/* раздел без фото не должен «проваливаться» рядом с фотоплитками */
.katalog-plitka:not(.katalog-plitka--foto) .katalog-plitka__glavnaya{justify-content:flex-end;min-height:120px}
/* подразделы: список ссылок, а не вторая сетка плиток — он вспомогательный */
.katalog-plitka__deti{display:flex;flex-direction:column;gap:2px;margin:0;padding:12px 0 0;list-style:none;border-top:1px solid #e3e5e8}
.katalog-plitka__rebenok{display:flex}
.katalog-plitka__ssylka{font-weight:400;font-size:14px;line-height:150%;color:#5f6570;text-decoration:none;transition-duration:400ms}
.katalog-plitka__ssylka:hover{color:#001960;text-decoration:underline}
/* ── карусель акций ───────────────────────────────────────────────── */
.akczii--katalog{margin-top:28px}
.akczii--katalog .heading{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.akczii__strelki{display:flex;gap:8px;margin-left:auto}
.akczii__strelka{display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:1px solid #dcdfe4;border-radius:50%;background-color:#fff;color:#001960;cursor:pointer;transition:background-color .3s,border-color .3s}
.akczii__strelka:hover:not(:disabled){background-color:#001960;border-color:#001960;color:#fff}
.akczii__strelka:disabled{opacity:.35;cursor:default}
.akczii__strelka svg{width:16px;height:16px;fill:currentColor}
.akczii__strelka--prev svg{transform:rotate(180deg)}
/* до подъёма Splide (и вовсе без JS) список остаётся горизонтальной прокруткой —
не ломаной сеткой: у .akczii__spisok в akczii.css grid на всю ширину */
.akczii--katalog .akczii__spisok{display:flex;gap:20px;margin:0;padding:0;list-style:none;overflow-x:auto;scroll-snap-type:x mandatory}
.akczii--katalog .akczii__slajd{flex:0 0 min(100%,420px);scroll-snap-align:start}
.akczii--katalog .akczii__slajd .akcziya{height:100%}
/* Splide поднялся — прокрутку и снап отдаём ему, иначе они спорят с его же треком */
.akczii--katalog.is-active .akczii__spisok{overflow:visible;scroll-snap-type:none}
@media screen and (max-width:640px){
.categories--katalog{grid-template-columns:1fr;column-gap:10px;row-gap:10px}
.katalog-plitka{padding:12px;gap:10px}
.katalog-plitka__name{font-size:16px}
.katalog-plitka:not(.katalog-plitka--foto) .katalog-plitka__glavnaya{min-height:0}
/* на телефоне фото раздела занимало бы пол-экрана над списком — сжимаем */
.katalog-plitka__foto{aspect-ratio:16/9}
.katalog-plitka__deti{padding-top:10px}
.katalog-plitka__ssylka{font-size:15px;line-height:170%}
.akczii__strelki{display:none}
}
/* ТЗ-127 ч. 11 (решение владельца 26.09): иконки разделов — без белой подложки. Рисунки сами на белом фоне: подложка
снята, белое рисунка смешивается с серым плитки (multiply), линии остаются своего цвета */
.katalog-plitka__foto{background-color:transparent;mix-blend-mode:multiply}
/* ТЗ-129 ч. 1 (27.09): стрелки карусели акций — в заголовке блока, как задумано разметкой (.akczii__strelki). splide.css
ставит любую .splide__arrow абсолютом на середину трека — стрелки лежали поверх текста первой и последней карточки */
.akczii--katalog .akczii__strelka.splide__arrow{position:static;transform:none;opacity:1}
.akczii--katalog .akczii__strelka.splide__arrow:disabled{opacity:.35}
/* ТЗ-129 ч. 2 (27.09, после просмотра): плитки корня каталога вдвое ниже, сетка 3×2 (6 разделов — два ровных ряда).
В плитке: иконка раздела 96×64 слева от названия (без подложки), под названием число позиций, ниже подразделы.
Телефон — «гармошка»: строка «иконка 48×32 · название · число · шеврон», касание раскрывает подразделы (js-toggle-* из
general.js), первым пунктом — весь раздел. */
.categories--katalog{grid-template-columns:repeat(3,minmax(0,1fr))}
.katalog-plitka{position:relative;gap:10px;padding:18px 20px}
.katalog-plitka__glavnaya{flex-direction:row;align-items:center;gap:16px}
.katalog-plitka__foto{flex:0 0 96px;width:96px;height:64px;aspect-ratio:auto;object-fit:contain;border-radius:0}
.katalog-plitka:not(.katalog-plitka--foto) .katalog-plitka__glavnaya{justify-content:flex-start;min-height:64px}
.katalog-plitka__name{font-size:18px}
.katalog-plitka__deti{padding-top:10px;column-gap:16px}
.katalog-plitka__toggler,.katalog-plitka__rebenok--ves{display:none}
@media screen and (max-width:1100px){
.categories--katalog{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media screen and (max-width:640px){
.categories--katalog{grid-template-columns:1fr;row-gap:8px}
.katalog-plitka{gap:0;padding:10px 12px}
.katalog-plitka__glavnaya{gap:12px;padding-right:36px}
.katalog-plitka__foto{flex-basis:48px;width:48px;height:32px}
.katalog-plitka__name{font-size:16px}
.katalog-plitka__tekst{gap:0}
.katalog-plitka__toggler{display:flex;align-items:center;justify-content:center;position:absolute;top:10px;right:6px;width:36px;height:36px;padding:0;border:0;background:none;color:#333;cursor:pointer}
.katalog-plitka__chevron{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s}
.katalog-plitka.active .katalog-plitka__chevron{transform:rotate(180deg)}
/* подразделы закрыты, пока не коснулись раздела; js-toggle раскрывает их с display:flex */
.katalog-plitka.js-toggle-wrapper .katalog-plitka__deti{display:none;margin-top:10px}
.katalog-plitka__rebenok--ves{display:flex}
.katalog-plitka__ves{font-weight:600;font-size:15px;line-height:170%;color:#001960;text-decoration:none}
}
/* подразделы — в две колонки, пока плитка шире 340 px: высота плитки задаётся списком (у «Листового проката» 14 пунктов),
в одну колонку плитка выходила 58% прежней, в две — около половины */
@media screen and (min-width:641px){
.katalog-plitka__deti{display:block;columns:2;column-gap:16px}
.katalog-plitka__rebenok{break-inside:avoid;padding:1px 0}
.katalog-plitka__ssylka{font-size:14px;line-height:140%}
}