/* wave2: мобильная — середина, карточки, футер */

/* ---------- Trust: 1 колонка на phone/tablet ----------
   gw1-mid.css задаёт body.common-home .fg .trust__cols { 3 col } без media —
   это сильнее figma-home @media<=860 (body .fg .trust__cols → 1fr).
   На 390px колонки ~103px, иконки 210px вылезают → «три узкие колонки»
   вместо стека как в Figma mobile (Image 2–3). Перебиваем той же
   specificity, файл грузится после gw1-mid. */
@media (max-width:860px){
  body.common-home .fg .trust{
    padding:40px 0 48px;
  }
  body.common-home .fg .trust__title{
    font-size:26px;font-weight:400;line-height:1.25;
    margin:0 0 16px;padding:0 8px;
  }
  body.common-home .fg .trust__lead{
    font-size:15px;line-height:1.4;
    margin:0 auto 36px;padding:0 12px;max-width:none;
  }
  body.common-home .fg .trust__cols{
    display:grid;
    grid-template-columns:1fr;
    gap:40px;
    max-width:none;
    margin:0 auto;
  }
  body.common-home .fg .trust__col{
    text-align:center;padding:0 16px;
  }
  body.common-home .fg .trust__ic{
    width:168px;height:168px;margin:0 auto 24px;
  }
  body.common-home .fg .trust__ic svg,
  body.common-home .fg .trust__ic img{
    height:96px;max-width:96px;
  }
  body.common-home .fg .trust__col h3{
    font-size:22px;line-height:1.25;margin:0 0 12px;
  }
  body.common-home .fg .trust__col p{
    font-size:15px;line-height:1.45;text-align:center;
  }
}

@media (max-width:480px) {

  /* Тёмная секция: ещё компактнее на phone-frame Figma */
  body.common-home .fg .trust{padding:36px 0 44px}
  body.common-home .fg .trust__title{font-size:24px;margin:0 0 14px}
  body.common-home .fg .trust__lead{font-size:14px;margin:0 auto 32px}
  body.common-home .fg .trust__cols{gap:36px}
  body.common-home .fg .trust__ic{
    width:150px;height:150px;margin:0 auto 20px;
  }
  body.common-home .fg .trust__ic svg,
  body.common-home .fg .trust__ic img{
    height:86px;max-width:86px;
  }
  body.common-home .fg .trust__col h3{font-size:20px;margin:0 0 10px}
  body.common-home .fg .trust__col p{font-size:14px;line-height:1.45;text-align:center}

  /* Тёмная секция "Зачем вы здесь? / Как найти специалиста? / Почему SarafanPRO?":
     в макете абзацы центрированы, десктоп сознательно держит text-align:left
     в figma-home.css (не трогаем desktop-правило, только мобильный оверрайд). */
  body .fg .trust__col p{ text-align:center; }

  /* Wide business cards (.cw): Figma mobile = full-bleed photo + white title
     on dark scrim. Desktop figma-home keeps blue title + white top glow —
     only override on phone. */
  body .fg .cw{ height:140px; }
  body .fg .cw::after{
    background:linear-gradient(180deg,rgba(10,30,70,.15),rgba(10,30,70,.55));
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    height:auto;
    border-radius:10px;
    pointer-events:none;
  }
  body .fg .cw span{
    color:#fff;
    text-align:center;
    width:100%;
    height:auto; min-height:36px;
    padding:0 12px;
    font-size:16px; line-height:1.25;
    text-shadow:0 1px 8px rgba(0,0,0,.45);
    align-items:center;
    justify-content:center;
    top:0; bottom:0;
  }

  /* Ряд <ul class="like_tabs_links"> под вкладками "Знакомьтесь!" — рабочий
     AJAX-фильтр специалистов по категории (см. GAPS.md и комментарий в
     gw1-mid.css: обработчик /_html/js/additional.js:277, data-category из
     реальных категорий). В макете такого ряда нет вообще, убирать его
     display:none нельзя — рабочий контрол (на этом же проекте билдер уже
     получил провальный вердикт за display:none на рабочем фильтре).
     На узкой мобильной ширине flex-wrap переносил ряд в 12-14 строк
     (~550px). Переводим ряд в горизонтальную прокрутку одной строкой —
     фильтр остаётся кликабельным и полностью доступным, просто не
     раздувает вертикаль. */
  body.common-home .meet_block .like_tabs_links{
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    justify-content:flex-start;
    max-width:none;
    margin:0 0 22px;
    padding:0 4px 8px;
  }
  body.common-home .meet_block .like_tabs_links li{ flex:0 0 auto; }

  /* Карточки специалистов на вкладках "Новые люди сообщества" и "Самые
     популярные специалисты Израиля": в макете это свайп-ряд (стрелки по
     бокам одной карточки), на сайте карточки стояли вертикальным стеком
     (3 карточки по ~600px = ~1800px только на одну вкладку — основная
     причина того, что мобильная страница на ~2000px длиннее макета).
     Ни одна карточка не удаляется и не скрывается — все специалисты
     остаются в разметке и доступны прокруткой вбок вместо вниз. */
  body.common-home .meet_block .like_tabs_data{ position:relative; }
  /* gw1-cards.css loads AFTER this file (@media<=600) with padding 40px +
     flex:0 0 100% — need equal+!important and higher specificity to win. */
  body.common-home .meet_block .offers_list{
    display:flex !important;
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    gap:16px !important;
    /* Figma: near-full-width swipe card; 12px gutters (arrows sit on edge) */
    padding:4px 12px 16px !important;
  }
  /* Макет: карточка почти на всю ширину (одна в кадре), не 280px с gutter 40px. */
  body.common-home .meet_block .offers_list .item{
    flex:0 0 calc(100% - 8px) !important;
    max-width:100% !important;
    width:auto !important;
    scroll-snap-align:center;
    padding:0 !important;
  }

  /* Specialist CTA: Figma mobile — solid blue. Beat gw1-cards free outline
     (body.common-home .meet_block .sp-card:not(.sp-card--pro) … !important)
     via higher class chain + !important. */
  body.common-home .meet_block .offers_list .item .sp-card .contacts_wrap .btn,
  body.common-home .meet_block .offers_list .item .sp-card .contacts_wrap .btn--outline,
  body.common-home .meet_block .offers_list .item .sp-card:not(.sp-card--pro) .contacts_wrap .btn,
  body.common-home .meet_block .offers_list .item .sp-card:not(.sp-card--pro) .contacts_wrap .btn--outline,
  body.common-home .meet_block .offers_list .item .sp-card:not(.sp-card--pro) .contacts_wrap .btn--ghost{
    background:var(--blue,#0066B2) !important;
    color:#fff !important;
    border-color:transparent !important;
    border:1px solid transparent !important;
    border-radius:10px !important;
    width:100% !important;
    max-width:280px;
  }

  /* First-paint placeholder while lazy avatar loads (empty gradient ring). */
  body.common-home .meet_block .offers_list .item img,
  body.common-home .meet_block .offers_list .item .img img{
    background:#e8eef5 !important;
    min-height:180px;
    object-fit:cover;
  }

  /* Стрелки карусели — нативные CSS Carousel scroll-button() там, где движок
     их реально поддерживает (Chromium/Chrome). Прогрессивное улучшение:
     реальная прокрутка контейнера браузером по клику, без единой строчки
     JS. Проверка через @supports selector(::scroll-button(left)) — в
     WebKit (Safari/iPhone) этот селектор не поддерживается вовсе,
     `CSS.supports('selector(::scroll-button(left))')` там возвращает
     false, поэтому в WebKit используется JS-фолбэк ниже (см.
     /_html/js/gw-carousel.js), а этот блок там просто не применяется. */
  @supports selector(::scroll-button(left)){
    body.common-home .meet_block .offers_list::scroll-button(left),
    body.common-home .meet_block .offers_list::scroll-button(right){
      position:absolute;
      top:44%;
      width:34px;height:34px;
      border-radius:50%;
      border:1px solid var(--line,#d7dee8);
      background:#fff;
      color:var(--blue,#0066B2);
      font:600 18px/1 var(--f-base,inherit);
      display:flex;align-items:center;justify-content:center;
      box-shadow:0 3px 10px rgba(10,30,70,.18);
      z-index:5;
      cursor:pointer;
    }
    body.common-home .meet_block .offers_list::scroll-button(left){
      content:"‹"; left:2px;
    }
    body.common-home .meet_block .offers_list::scroll-button(right){
      content:"›"; right:2px;
    }
    body.common-home .meet_block .offers_list::scroll-button(left):disabled,
    body.common-home .meet_block .offers_list::scroll-button(right):disabled{
      opacity:.35; box-shadow:none; cursor:default;
    }
  }

  /* Фолбэк-стрелки для движков без ::scroll-button() (WebKit/Safari на
     iPhone — CSS.supports('selector(::scroll-button(left))') там false).
     Реальные <button> элементы вставляются скриптом /_html/js/gw-carousel.js
     внутрь .like_tabs_data (уже position:relative), визуально повторяют
     нативный вариант выше. Скрипт сам добавляет их только когда
     @supports not selector(::scroll-button(left)) истинно на этом
     устройстве, поэтому в Chromium этих элементов в DOM не будет вообще —
     двойных стрелок не возникает. */
  @supports not selector(::scroll-button(left)){
    body.common-home .meet_block .gw-carousel-btn{
      position:absolute;
      top:44%;
      width:34px;height:34px;
      border-radius:50%;
      border:1px solid var(--line,#d7dee8);
      background:#fff;
      color:var(--blue,#0066B2);
      font:600 18px/1 var(--f-base,inherit);
      display:flex;align-items:center;justify-content:center;
      box-shadow:0 3px 10px rgba(10,30,70,.18);
      z-index:5;
      cursor:pointer;
      padding:0;
      -webkit-appearance:none;appearance:none;
    }
    body.common-home .meet_block .gw-carousel-btn--prev{ left:2px; }
    body.common-home .meet_block .gw-carousel-btn--next{ right:2px; }
    body.common-home .meet_block .gw-carousel-btn[disabled]{
      opacity:.35; box-shadow:none; cursor:default;
    }
  }

  /* ---------- ФУТЕР ----------
     Макет (09_11200-12600.png): логотип+текст по центру, ПЯТЬ плоских
     центрированных строк без единого шеврона — Специалисты / Услуги /
     Блог / Афиша / Акции. Никакого аккордеона в макете нет вообще.
     На сайте разметка — 2 аккордеон-колонки: .ftr__col--spec (заголовок
     .ftr__title "Специалисты" + скрытый .ftr__two на 18 категорий) и
     .ftr__col (заголовок .ftr__title "Платформа" + .ftr__list на 7
     служебных пунктов + плоский .ftr__big на 4 пункта).
     Решение: полностью убираем аккордеонную механику визуально на 480px —
     .ftr__two и .ftr__list прячем (display:none), сама разметка и ссылки
     остаются в DOM и продолжают работать на десктопе/планшете, где эти
     же классы не тронуты. "Специалисты" в разметке — div, не ссылка;
     нужен патч шаблона (div → <a href="/specialists/">), см. отчёт
     координатору и GAPS.md — /specialists/ отдаёт 200, это страница
     каталога со всеми категориями, доступ к ним не теряется.
     Порядок задаём явно через order всем прямым детям .ftr__in (жёсткое
     правило проекта: order в разметке игнорируется темой). */
  body .fg .ftr__in{ display:flex; flex-direction:column; gap:0; padding-top:34px; }
  body .fg .ftr__brand{ order:1; text-align:center; margin-bottom:8px; }
  body .fg .ftr__col--spec{ order:2; }
  body .fg .ftr__col:not(.ftr__col--spec){ order:3; }

  body .fg .ftr__logo{ margin:0 auto 16px; }
  body .fg .ftr__slogan,
  body .fg .ftr__desc{ text-align:center; }
  body .fg .ftr__phone{ justify-content:center; margin:0 auto 16px; }
  body .fg .ftr__soc{ justify-content:center; margin-bottom:24px; }

  /* «Специалисты»: плоская строка, без шеврона, без коробочности.
     .ftr__two (18 рабочих категорий + "Весь каталог"/"на карте") прячем
     на мобильной — доступ к тому же перечню остаётся через /specialists/
     (пункт "Весь каталог" внутри .ftr__two ведёт туда же). Ссылки внутри
     .ftr__two из разметки не удаляются, скрыты только визуально в этом
     медиазапросе; на десктопе/планшете класс не тронут. */
  body .fg .ftr__col--spec{ text-align:center; border-top:1px solid rgba(255,255,255,.18); }
  body .fg .ftr__col--spec .ftr__title{
    justify-content:center; font-size:18px; font-weight:400;
    padding:15px 0; margin-bottom:0; cursor:default; pointer-events:none;
  }
  body .fg .ftr__col--spec .ftr__title::after{ display:none; }
  body .fg .ftr__col--spec .ftr__two{ display:none !important; }

  /* «Услуги / Блог / Афиша / Акции» (.ftr__big) — плоский список сразу
     после «Специалисты», как в макете. Заголовок "Платформа" и его
     .ftr__list (О нас, Тарифы, Отзывы, FAQ, Инструкции, Единство,
     Контакты, Регистрация) в макете отсутствуют — прячем оба визуально,
     ссылки остаются рабочими в разметке и на большей ширине. */
  body .fg .ftr__col:not(.ftr__col--spec){
    display:flex; flex-direction:column; text-align:center;
    border-top:1px solid rgba(255,255,255,.18);
  }
  body .fg .ftr__col:not(.ftr__col--spec) .ftr__big{
    display:block; margin:0; padding:15px 0 4px;
  }
  body .fg .ftr__col:not(.ftr__col--spec) .ftr__big li{ margin-bottom:14px; }
  body .fg .ftr__col:not(.ftr__col--spec) .ftr__big a{ font-size:18px; font-weight:400; }
  body .fg .ftr__col:not(.ftr__col--spec) .ftr__title{ display:none !important; }
  body .fg .ftr__col:not(.ftr__col--spec) .ftr__list{ display:none !important; }

  /* ---------- ВКЛАДКИ "ЗНАКОМЬТЕСЬ!" ----------
     Макет (07_8400-9800.png): два равных pill-таба в один ряд — единый
     переключатель-карточка на всю ширину, активный таб — приподнятая
     белая карточка с тенью, неактивный — плоский текст без фона.
     На сайте (десктоп-стили из gw1-mid.css, common-home): два подчёркнутых
     текстовых пункта друг под другом (flex-direction по умолчанию row, но
     figma-redesign.css .meet_tabs{flex-direction:column} на <=760px даёт
     вертикальный стек). Переопределяем только на 480px, десктопные
     правила gw1-mid.css (чужой файл) не трогаем — там уже принятое
     решение "текстовые вкладки без пилюль" для 1440. Классы
     meet_tabs/meet_tab/meet_panel не переименовываем — на них завязан
     JS-переключатель (figma-faq.js), переключение продолжает работать. */
  body.common-home .meet_tabs{
    flex-direction:row; flex-wrap:nowrap;
    width:100%; margin:0 0 24px; gap:6px;
    background:rgba(255,255,255,.06);
    border-radius:16px; padding:5px;
  }
  body.common-home .meet_tabs .meet_tab{
    flex:1 1 50%; margin:0; padding:12px 8px;
    border-radius:12px; text-align:center;
  }
  body.common-home .meet_tabs .meet_tab::after{ display:none; }
  body.common-home .meet_tabs .meet_tab h2.home-widget-title{
    font-size:15px; line-height:1.25; margin:0;
  }
  body.common-home .meet_tabs .meet_tab.is-active{
    background:#fff; box-shadow:0 4px 14px rgba(10,30,70,.12);
  }
  body.common-home .meet_tabs .meet_tab.is-active h2.home-widget-title{
    color:#0066B2;
  }

  /* ==========================================================================
     HOME catalog cards (.ct) — biggest visual gap at 390px
     gw3-tiles: img flex:0 0 200px + span word-break:break-word → title column
     ~88px, mid-word wraps («интерь/ер», «перево/зки»). Figma: ~42% image,
     readable title column with normal word breaks. Also hide promo bar +
     «Каталог специалистов» title (Figma: stats → category cards).
     ========================================================================== */
  body.common-home .fg .cat > .wrap > .sec-title.sec-title--c{display:none}
  body.common-home .fg .cat .sale-bar{display:none}

  body.common-home .fg .ct__link img{
    flex:0 0 42%;
    flex-basis:42%;
    width:42% !important;
    max-width:150px;
    height:140px !important;
  }
  /* dissolve ::after must match reduced image width */
  body.common-home .fg .ct__link::after{
    width:42%;
    max-width:150px;
  }
  body.common-home .fg .ct__link span{
    word-break:normal;
    overflow-wrap:break-word;
    hyphens:manual;
    font-size:15px;
    line-height:1.25;
    min-width:0;
    flex:1 1 auto;
    padding:0 8px 0 6px;
  }

  /* Blog cards: Figma thumbs ~16:10 landscape, not square 316×316 */
  body.common-home .fg .blog .bc__media{
    aspect-ratio:16/10;
    height:auto;
    max-height:200px;
  }
  body.common-home .fg .blog .bc__img{
    width:100%;
    height:100%;
    object-fit:contain;
  }

  /* Partners strip: beat figma-home min-width:700 + global img height:auto.
     h=36 readable logos; container scrolls if strip wider than viewport. */
  body .fg .partners{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  body .fg .partners img,
  body .fg .partners .wrap img{
    width:auto !important;
    max-width:none !important;
    height:36px !important;
    min-width:100% !important;
  }
  body .fg .partners__item img,
  body .fg .partners__link img,
  body .fg .partners .wrap .partners__item img{
    width:auto !important;
    max-width:140px !important;
    height:32px !important;
    min-width:0 !important;
  }

  /* Find chips: denser pack (also reinforced from gw2-mob) */
  body .fg .chips{gap:6px 6px}
  body .fg .chips a{
    font-size:13px;padding:5px 10px;height:auto;line-height:1.2;
  }

}

/* ==========================================================================
   Tablet Figma (≈481–860px): шапка burger|logo|account, hero, поиск, AI-пилюля
   Макет: Tablet frame — «Платформа №1», «Я хочу найти», chips, trust.
   ========================================================================== */
@media (min-width:481px) and (max-width:860px){

  /* Шапка: бургер + лого + круглая CTA (как mobile Figma) */
  body .fg .hdr__nav{display:none}
  body .fg .hdr__burger{display:flex;order:-1}
  body .fg .hdr__in{
    gap:12px;padding:10px 18px;flex-wrap:nowrap;
    align-items:center;justify-content:space-between;
  }
  body .fg .hdr__logo{flex:1 1 auto;display:flex;justify-content:center}
  body .fg-header .hdr__logo img{
    height:36px !important;width:148px !important;max-width:none !important;
  }
  body .fg .hdr__right{gap:8px;flex:0 0 auto}
  body .fg .hdr__right .hdr__icon,
  body .fg .hdr__right .hdr__langwrap,
  body .fg .hdr__lang{display:none !important}
  body .fg .hdr__right:has(.btn--primary) .btn--ghost{display:none !important}
  /* figma-home прятал .btn--primary на <=860 — возвращаем круглую иконку */
  body .fg .hdr__right .btn--primary{
    display:inline-flex !important;
    width:48px;height:48px;min-width:48px;padding:0;border-radius:50%;
    align-items:center;justify-content:center;
    font-size:0;line-height:0;
    background:linear-gradient(180deg,#2E437B 0%,#0066B2 100%) !important;
    border:1.3px solid #fff !important;
    box-shadow:0 4px 12px rgba(0,102,178,.25);
  }
  body .fg .hdr__right .btn--ghost,
  body .fg .hdr__right .hdr__acc{
    display:inline-flex !important;
    width:44px;height:44px;min-width:44px;padding:0;border-radius:8px;
    align-items:center;justify-content:center;
    font-size:0;line-height:0;
    background:none !important;
    background-image:none !important;
    border:0 !important;
    box-shadow:none !important;
    color:#0066B2 !important;
  }
  body .fg .hdr__right .btn svg{width:24px;height:24px;margin:0;flex:0 0 24px}
  body .fg .hdr__right .btn--ghost svg,
  body .fg .hdr__right .hdr__acc svg{stroke:#0066B2}
  body .fg .hdr__right .btn--ghost:hover,
  body .fg .hdr__right .hdr__acc:hover{
    background:#F1F5FA !important;
    color:#0066B2 !important;
  }
  body .fg .hdr__right .btn--primary svg,
  body .fg .hdr__right .hdr__join-ico{width:24px;height:24px;flex:0 0 24px}

  /* Hero */
  body .fg .hero{padding-top:8px}
  body .fg .hero__in{display:flex;flex-direction:column}
  body .fg .hero__text{
    order:1;width:100%;max-width:none;text-align:center;
    padding:20px 24px 8px;
  }
  body .fg .hero__img{order:2;margin-top:4px}
  body .fg .hero__title{
    font-size:42px;line-height:1.15;font-weight:600;
    letter-spacing:-.4px;margin:0 0 12px;
  }
  body .fg .hero__sub{
    font-size:17px;line-height:1.35;max-width:480px;margin:0 auto;
    color:#5B6D9C;
  }

  /* Partners — no forced 700px strip on tablet either */
  body .fg .partners{
    padding:14px 0 6px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  body .fg .partners img,
  body .fg .partners .wrap img{
    width:auto !important;
    max-width:none !important;
    height:40px !important;
    min-width:100% !important;
  }

  /* Find / search — tablet Figma: поле + круглая лупа + filter, AI справа снизу */
  body .fg .find{padding:28px 0 12px}
  body .fg .find__title{font-size:28px;margin:0 0 20px;text-align:left}
  body .fg .find__ill{display:none}
  body .fg .find__main{max-width:none}
  body .fg .srch{
    flex-wrap:nowrap;align-items:center;gap:10px;
    padding:12px 14px;border-radius:10px;max-width:none;
  }
  body .fg .srch__field{flex:1 1 auto;min-width:0;padding-right:0}
  body .fg .srch__input{font-size:16px;height:40px}
  body .fg .srch__input::placeholder{font-size:16px}
  body .fg .srch__btn{
    flex:0 0 auto;width:52px;height:52px;min-width:52px;
    border-radius:50%;padding:0;font-size:0;gap:0;
  }
  body .fg .srch__btn svg{width:20px;height:20px}
  body .fg .srch__filterwrap{flex:0 0 auto;margin-left:0}
  body .fg .srch__filter{
    width:48px;height:48px;margin-left:0;
    border:1px solid #E3E8EF;border-radius:8px;
  }
  body .fg .srch__ai{margin-top:12px;align-items:flex-end}
  body .fg .ai{
    font-size:14px;height:28px;padding:0 14px;
    border:1px solid #FF6C1D;border-radius:9999px;
  }

  /* Chips: без подписи «Популярные запросы» (как mobile Figma) */
  body .fg .find__poplabel{display:none}
  body .fg .find__pop{margin-top:16px}
  body .fg .chips{gap:10px 12px}
  body .fg .chips a{font-size:15px;height:36px;padding:0 14px}

  /* Trust dark block stays full-bleed */
  body .fg .trust{padding-top:40px}
  body .fg .trust__title{font-size:26px}
}