/* ===== BEYONDSKIN 2.0 — СТРАНИЦА «ПРОЦЕДУРЫ» =====
   Значения выверены по Figma (файл ezkaQLobEt1jVq25DxT3Xk, холст «Структура»,
   кадры 615:46 «процедуры» и 651:552 «процедуры_перечень» при ширине 1440px;
   мобильные — 679:299 и 679:142 «фильтр»).

   Переменные (--dark, --sand, --copper, --serif, --sans, --pad, --shell) объявлены
   в main.css. Крошки и CTA-полоса переиспользуются со страницы About (about.css),
   поэтому оба файла подключаются вместе.

   Про специфичность: заголовки скоупятся под .bs2-home — иначе глобальный кит
   Elementor (.elementor-kit-138 h1/h2/h3) перебивает наши правила. */

.bs2-proc{background:var(--cream);overflow-x:hidden}
.bs2-proc section{max-width:var(--shell);margin:0 auto}

/* ===== HERO ===== */
/* В Figma фото 577×382 слева и карточка 718×382 справа. */
.bs2-proc-hero{padding:0 var(--pad);display:grid;grid-template-columns:577fr 718fr;gap:22px;align-items:stretch}
.bs2-proc-hero__media{overflow:hidden;min-height:382px}
.bs2-proc-hero__media img{width:100%;height:100%;object-fit:cover;object-position:center top}
.bs2-proc-hero__card{border:1px solid rgba(41,31,35,.5);padding:34px 42px 40px;display:flex;flex-direction:column}
.bs2-proc-hero__label{font-size:20px;font-weight:400;color:var(--dark)}
.bs2-home .bs2-proc-hero__title{font-family:var(--serif);font-size:40px;font-weight:400;line-height:1.15;color:var(--dark);text-transform:uppercase;margin:auto 0 0}
.bs2-home .bs2-proc-hero__title em{font-style:italic}
.bs2-proc-hero__text{font-size:18px;font-weight:300;line-height:1.45;color:var(--dark);margin:26px 0 0}

.bs2-proc-cta{padding-top:26px}

/* ===== КАТАЛОГ: ШАПКА ===== */
.bs2-proc-list{padding:70px var(--pad) 96px}
.bs2-proc-list__head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:34px}
.bs2-home .bs2-proc-list__title{font-family:var(--serif);font-size:40px;font-weight:400;color:var(--dark);text-transform:uppercase}
/* Кнопки скоупятся под .bs2-home с указанием тега: кит Elementor задаёт
   `.elementor-kit-138 button` (0,1,1) с фоном и паддингами, и одноклассовые
   правила ему проигрывают — именно из-за этого раньше «Filters» не скрывалась. */
.bs2-home button.bs2-proc-list__order{background:none;border:none;cursor:pointer;font-family:var(--sans);font-size:20px;font-weight:300;color:var(--dark);display:inline-flex;align-items:center;gap:8px;padding:0;text-transform:none;letter-spacing:normal;border-radius:0}
.bs2-home button.bs2-proc-list__order:hover,.bs2-home button.bs2-proc-list__order:focus-visible{background:none;color:var(--terracotta)}
/* Кнопка сворачивания фильтра. Стоит отдельной строкой по ЛЕВОМУ краю — над той
   колонкой, которой управляет. Оформлена как «Order by»: тот же текстовый стиль
   и тот же шеврон, только здесь шеврон живой.
   display:none здесь и включение в блоке min-width:1025px ниже — порядок важен:
   правила равного веса, и при обратном порядке кнопка гаснет на всех ширинах. */
.bs2-home button.bs2-proc-list__fold{display:none;background:none;border:none;border-radius:0;cursor:pointer;font-family:var(--sans);font-size:20px;font-weight:300;color:var(--dark);align-items:center;gap:8px;padding:0;text-transform:none;letter-spacing:normal;transition:color .2s var(--ease-out)}
.bs2-home button.bs2-proc-list__fold:hover,.bs2-home button.bs2-proc-list__fold:focus-visible{background:none;color:var(--terracotta)}
.bs2-home button.bs2-proc-list__fold:active{background:none}
/* Свёрнуто — шеврон ВНИЗ («раскроется вниз»), развёрнуто — вверх. Базовый
   .bs2-filter__chev смотрит вниз, поэтому переворачиваем развёрнутое состояние.
   У групп внутри фильтра идиома обратная, но там панель всегда на виду, а эта
   кнопка встречает посетителя в СВЁРНУТОМ виде — и «Show filters» со стрелкой
   вверх читалось бы ровно наоборот. Мобильная кнопка «Filters» в закрытом
   состоянии тоже показывает стрелку вниз. */
.bs2-home button.bs2-proc-list__fold[aria-expanded="true"] .bs2-filter__chev{transform:rotate(180deg)}

/* Строка с кнопкой. Отрицательный отступ сверху подтягивает её в тот зазор,
   который .bs2-proc-list__head уже держит под собой (34px): иначе между
   заголовком и каталогом появляется лишняя пустая полоса.
   Отступ безопасен — строка существует только на ПК (см. медиазапрос ниже). */
.bs2-proc-list__tools{display:none;margin:-18px 0 26px}

/* Сайдбар 281px + сетка карточек; зазор между ними 164px по макету, но масштабируется. */
.bs2-proc-list__body{display:grid;grid-template-columns:281px minmax(0,1fr);column-gap:clamp(40px,11.4vw,164px)}

/* ===== ФИЛЬТР ===== */
.bs2-home button.bs2-proc-filter-toggle{display:none;width:100%;background:none;border:1px solid rgba(41,31,35,.5);border-radius:0;cursor:pointer;font-family:var(--sans);font-size:18px;font-weight:400;color:var(--dark);padding:14px 20px;margin-bottom:22px;align-items:center;justify-content:space-between;gap:10px;text-transform:none;letter-spacing:normal}
.bs2-home button.bs2-proc-filter-toggle:hover,.bs2-home button.bs2-proc-filter-toggle:focus-visible{background:none;color:var(--dark)}
.bs2-filter__count{font-size:20px;font-weight:300;color:var(--dark);margin-bottom:34px}

/* Разделитель идёт НАД заголовком группы (в Figma линия на y=211, легенда на y=223). */
.bs2-filter__group{border-top:1px solid rgba(41,31,35,.5);padding-top:14px}
.bs2-filter__group+.bs2-filter__group{margin-top:38px}
.bs2-home button.bs2-filter__legend{display:flex;width:100%;align-items:center;justify-content:space-between;gap:12px;background:none;border:none;border-radius:0;cursor:pointer;font-family:var(--sans);font-size:25px;font-weight:300;line-height:1.2;color:var(--dark);text-transform:uppercase;letter-spacing:normal;padding:0 0 18px;text-align:left}
.bs2-home button.bs2-filter__legend:hover,.bs2-home button.bs2-filter__legend:focus-visible{background:none;color:var(--terracotta)}
.bs2-filter__chev{flex:0 0 auto;width:20px;height:11px;position:relative;transition:transform .22s}
.bs2-filter__chev::before{content:'';position:absolute;left:2px;top:0;width:12px;height:12px;border:solid var(--dark);border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.bs2-home button.bs2-filter__legend[aria-expanded="false"] .bs2-filter__chev{transform:rotate(180deg)}
.bs2-filter__list{list-style:none;display:flex;flex-direction:column;gap:14px}
.bs2-filter__group.is-collapsed .bs2-filter__list{display:none}

.bs2-check{display:flex;align-items:center;gap:13px;cursor:pointer;user-select:none}
.bs2-check input{position:absolute;opacity:0;width:0;height:0}
.bs2-check__box{flex:0 0 auto;width:24px;height:24px;border:1px solid var(--dark);background:transparent;position:relative;transition:background .18s,border-color .18s}
.bs2-check input:checked+.bs2-check__box{background:var(--dark)}
.bs2-check input:checked+.bs2-check__box::after{content:'';position:absolute;left:8px;top:3px;width:6px;height:12px;border:solid var(--cream);border-width:0 2px 2px 0;transform:rotate(45deg)}
.bs2-check input:focus-visible+.bs2-check__box{outline:2px solid var(--copper);outline-offset:2px}
.bs2-check__label{font-size:20px;font-weight:300;color:var(--dark);line-height:1.25}
.bs2-home .bs2-check:hover .bs2-check__label{color:var(--terracotta)}

/* Кнопки 106×46, скруглены в пилюлю — по Figma (Rectangle 83, cornerRadius 50). */
.bs2-filter__actions{display:flex;gap:16px;margin-top:36px}
.bs2-home button.bs2-filter__btn{font-family:var(--sans);font-size:15px;font-weight:400;line-height:1;min-width:106px;height:46px;padding:0 18px;border-radius:50px;text-transform:uppercase;letter-spacing:normal;cursor:pointer}
.bs2-home button.bs2-filter__btn.bs2-btn--outline{background:transparent;color:var(--dark);border:1px solid var(--dark)}
.bs2-home button.bs2-filter__btn.bs2-btn--outline:hover,.bs2-home button.bs2-filter__btn.bs2-btn--outline:focus-visible{background:var(--dark);color:var(--white)}
.bs2-home button.bs2-filter__btn.bs2-btn--lavender{background:var(--lavender-muted);color:var(--dark);border:none}
.bs2-home button.bs2-filter__btn.bs2-btn--lavender:hover,.bs2-home button.bs2-filter__btn.bs2-btn--lavender:focus-visible{background:var(--dark);color:var(--white)}

/* ===== СЕТКА КАРТОЧЕК ===== */
/* Карточка 382×467: фото 382×301, заголовок 24px, описание 15px, низ — ссылка + кнопка. */
.bs2-proc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:51px;row-gap:42px;align-content:start}
.bs2-proc-card{display:flex;flex-direction:column}
.bs2-proc-card[hidden]{display:none}
.bs2-proc-card__img{width:100%;height:301px;overflow:hidden;background:var(--white)}
.bs2-proc-card__img img{width:100%;height:100%;object-fit:cover;object-position:center}
/* Логотипы брендов лежат на белом — их нельзя кадрировать. */
.bs2-proc-card__img--logo img{object-fit:contain;padding:40px 48px;transform:none}
.bs2-home .bs2-proc-card__title{font-family:var(--sans);font-size:24px;font-weight:400;color:var(--dark);line-height:1.2;margin:16px 0 0;text-transform:none}
.bs2-proc-card__desc{font-size:15px;font-weight:300;line-height:1.45;color:var(--dark);margin-top:8px}
.bs2-proc-card__foot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:auto;padding-top:24px}
.bs2-proc-card__more{display:inline-flex;align-items:center;gap:10px;font-size:16px;font-weight:400;color:#000}
.bs2-home .bs2-proc-card__more:hover{color:var(--terracotta)}
.bs2-proc-card__btn{font-size:15px;padding:11px 28px;min-width:150px;text-transform:uppercase}
.bs2-proc-grid__empty{grid-column:1/-1;font-size:18px;font-weight:300;color:var(--gray);padding:40px 0}

/* ===== АДАПТИВ ===== */
@media(max-width:1200px){
  .bs2-proc-hero{grid-template-columns:1fr 1fr;gap:18px}
  .bs2-proc-hero__card{padding:28px 30px 32px}
  .bs2-proc-list__body{grid-template-columns:250px minmax(0,1fr);column-gap:44px}
  .bs2-proc-grid{column-gap:28px;row-gap:34px}
  .bs2-proc-card__img{height:260px}
  .bs2-proc-card__foot{flex-direction:column;align-items:flex-start;gap:12px}
}

/* ===== СВЁРНУТЫЙ ФИЛЬТР (только ПК) =====
   Весь блок завёрнут в min-width НЕ ради удобства, а по необходимости: селектор
   состояния весит (0,3,0), а мобильные правила «сетка всегда в две колонки»
   в блоках 768 и 480 — одноклассовые (0,1,0), медиазапрос веса не добавляет.
   Без обёртки телефон получил бы три колонки вопреки макету, а правило скрытия
   сайдбара перебило бы `.bs2-filter.is-open` (равный вес, ниже по файлу) —
   и кнопка «Filters» на мобильном перестала бы открывать панель.

   Класс висит на СЕКЦИИ: на самой .bs2-filter уже есть .is-open мобильного
   тоггла, а на её группах — .is-collapsed. Три механизма не должны писать
   в один и тот же display. */
@media(min-width:1025px){
  .bs2-home button.bs2-proc-list__fold{display:inline-flex}
  .bs2-proc-list__tools{display:block}

  .bs2-proc-list.is-filter-collapsed .bs2-filter{display:none}

  /* ОДНА дорожка, а не «0 minmax(0,1fr)»: скрытый через display:none сайдбар
     перестаёт быть элементом сетки, и при двух дорожках каталог автоматически
     упал бы в первую — то есть в 281px. */
  .bs2-proc-list.is-filter-collapsed .bs2-proc-list__body{grid-template-columns:minmax(0,1fr)}

  /* Переход 2→3 намеренно без transition: grid-template-columns интерполируется
     только между списками с ОДИНАКОВЫМ числом дорожек, здесь их разное количество,
     и любая заявленная анимация всё равно отработает щелчком. Плавно менять можно
     было бы только ширину сайдбара, но тогда у карточек едет соотношение сторон,
     а фото у них фиксированной высоты (301px) — переобрежутся все разом. */
  .bs2-proc-list.is-filter-collapsed .bs2-proc-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media(max-width:1024px){
  .bs2-proc-hero{grid-template-columns:1fr;gap:16px}
  .bs2-proc-hero__media{min-height:320px}
  .bs2-home .bs2-proc-hero__title{margin-top:24px}
  /* Мобильный кадр 679:142: фильтр сворачивается в раскрывающийся блок. */
  .bs2-proc-list__body{grid-template-columns:1fr}
  .bs2-home button.bs2-proc-filter-toggle{display:flex}
  .bs2-filter{display:none;margin-bottom:34px;padding-bottom:30px;border-bottom:1px solid rgba(41,31,35,.3)}
  .bs2-filter.is-open{display:block}
  .bs2-filter__count{margin-bottom:24px}
}

@media(max-width:768px){
  .bs2-home .bs2-proc-hero__title,
  .bs2-home .bs2-proc-list__title{font-size:30px}
  .bs2-proc-hero__text{font-size:16px}
  .bs2-proc-list{padding-top:52px}
  .bs2-proc-list__head{margin-bottom:24px}
  .bs2-proc-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;row-gap:26px}
  .bs2-proc-card__img{height:200px}
  .bs2-home .bs2-proc-card__title{font-size:19px}
  .bs2-proc-card__desc{font-size:13px}
  .bs2-proc-card__btn{font-size:13px;padding:10px 18px;min-width:0;width:100%}
  .bs2-proc-card__more{font-size:14px}
  .bs2-proc-card__img--logo img{padding:24px}
  .bs2-check__label,.bs2-filter__count{font-size:17px}
  .bs2-home .bs2-filter__legend{font-size:21px}
}

@media(max-width:480px){
  .bs2-proc-hero__card{padding:24px 22px 26px}
  .bs2-home .bs2-proc-hero__title,
  .bs2-home .bs2-proc-list__title{font-size:26px}
  /* В мобильном кадре Figma (679:299, ширина 402) карточки идут в две колонки —
     сохраняем это и на узких экранах, одну колонку не делаем. */
  .bs2-proc-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:12px;row-gap:24px}
  .bs2-proc-card__img{height:150px}
  .bs2-home .bs2-proc-card__title{font-size:16px}
  .bs2-proc-card__desc{font-size:12px;line-height:1.4}
  .bs2-proc-card__foot{flex-direction:column;align-items:flex-start;gap:10px;padding-top:16px}
  .bs2-proc-card__more{font-size:13px;gap:8px}
  .bs2-proc-card__btn{width:100%;min-width:0;font-size:12px;padding:9px 12px}
}