/* ==========================================================================
   Serikov Coffee 2026 — ПЛИТКИ РАЗДЕЛОВ /catalog/ на телефоне

   Десктопные правила — newdesign/catalog.css (блок «/catalog/ — плитки
   разделов»). Здесь плитки в столбик, размеры в пикселях: --u на
   телефоне стоит на минимуме 0,70, и calc(15 * var(--u)) дал бы 10,5 px.

   С 17.09.2026 плитка горизонтальная (заказчик: «карточки очень большие»,
   раньше одна плитка занимала почти весь экран — снимок 210 сверху и
   подразделы столбиком). Раскладка — сетка областей из catalog.css
   (блок «Горизонтальная плитка»), здесь своя карта областей: снимок
   96 слева, рядом название и описание, чипсы и низ — во всю ширину под
   ними. В узкой правой колонке (~190) чипсы вытягивались бы в столбик.

   Условие телефонного слоя записано дословно как в mobile/base.css:
   узкий экран ИЛИ телефон, повёрнутый набок. Менять только вместе.

   Вес селекторов равен десктопным (0,1,0)/(0,2,0); файл грузится позже
   catalog.css (mobile/*.css подключаются последними), поэтому побеждает.
   .scs-title — h1, у него в catalog.css размер задан как
   main.page-wrapper h1 (0,1,1): здесь тот же вес плюс класс.
   ========================================================================== */
@media (max-width:767px), (max-width:1023px) and (max-height:520px){
  main.page-wrapper h1.scs-title{font-size:30px;margin:4px 0 16px}
  .scs{padding-bottom:28px}
  .scs-grid{grid-template-columns:minmax(0,1fr);gap:14px}
  .scs-card{
    --scs-ph:96px;
    grid-template-rows:auto 1fr auto auto;
    grid-template-areas:"img name" "img desc" "subs subs" "foot foot";
    column-gap:14px;padding:16px 18px 18px 16px;border-radius:32px}
  .scs-noimg{border-radius:18px}
  .scs-name{font-size:20px;margin:2px 0 5px}
  .scs-desc{font-size:13px;line-height:1.35;margin:0}
  /* Чипсы — одной строкой с прокруткой вбок. С переносом у «Кофе» они
     вставали в четыре строки (ширина 287, «Тёмная (эспрессо) 23» и
     «Светлая (фильтр) 24» вдвоём не входят), плитка росла до 342 px, и
     на экране помещалось полтора раздела вместо двух-трёх. Правый край
     гаснет — видно, что строка продолжается; пустышка ::after в конце
     даёт последнему чипсу выехать из-под затухания.
     Отступ от снимка до чипсов — сверху у чипсов: у раздела без
     подразделов его даёт низ плитки (правило ниже). Сверху, снизу и
     слева по 3px внутри (и столько же наружу полями) — там свечение
     фокуса, прокрутка его не срезает, а чипсы стоят ровно под снимком. */
  .scs-subs{flex-wrap:nowrap;gap:6px;margin:9px 0 -3px -3px;padding:3px 0 3px 3px;
    overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent);
            mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent)}
  .scs-subs::-webkit-scrollbar{display:none}
  .scs-subs::after{content:"";flex:0 0 20px}
  .scs-subs li{flex:none}
  .scs-subs a{--btn-h:34px;padding:0 12px;gap:5px;font-size:13px}
  .scs-subs .scs-n{font-size:12px}
  .scs-foot{gap:10px;padding-top:0;margin-top:12px}
  .scs-count{font-size:13px}
  .scs-card .pbtn{--btn-h:42px;padding:0 24px;font-size:15px}
}