/* =========================
   HOME (Главная)
   ВАЖНО:
   - Здесь только правила главной.
   - Переключение вкладок: products / requests / invests (см. static/js/home.js)
   ========================= */

/* Заголовок главной */
.title_cx{color:#333;text-align:center}
.title_cx h1{margin:-25px 0 12px}

/* Переключатель секций */
.home_switch{
  display:flex;
  justify-content:center;
  gap:10px;
  margin:8px 0 4px;
}
.home_switch_button{
  background:#e2e6ea;
  width:150px;
  text-align:center;
  padding:6px 10px;
  border-radius:5px;
  cursor:pointer;
  transition:.2s;
  user-select:none;
}
.home_switch_button.active{background:#1c9675;color:#fff; z-index:2 }

/* =========================
   СЛАЙДЕР СЕКЦИЙ
   ========================= */

/* Окно */
.home_screen_container{
  width:100%;
  overflow:hidden;
}

/* Лента из 3 экранов */
.home_screen_inner{
  display:flex;
  width:300%;
  transition:transform 0.9s ease;
  will-change:transform;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

/* Каждый экран = 1/3 ленты */
.home_screen{
  flex:0 0 33.333333%;
  width:33.333333%;
}

/* Состояния */
.home_screen_inner.products{transform:translateX(0)}
.home_screen_inner.requests{transform:translateX(-33.333333%)}
.home_screen_inner.invests{transform:translateX(-66.666666%)}

/* =========================
   HOME: баннер/промо-блок
   ========================= */
@media (min-width: 992px){
  #home-promos.hero-banner{ margin-top:52px; }
}
@media (min-width: 768px) and (max-width: 991.98px){
  #home-promos.hero-banner{ margin-top:18px; }
}
@media (max-width: 767.98px){
  #home-promos.hero-banner{ margin-top:8px; }
}

/* =========================
   ЛЕЙАУТ: категории слева, карточки справа (desktop)
   ========================= */
.home_screen .flex_container{
  display:flex;
  align-items:flex-start;
  gap:12px;
}

/* Левая колонка категорий (только в HOME) */
.home_screen .flex_container .wrapper{
  flex:0 0 300px;
  width:300px;
  padding-left:20px;
  grid-template-columns:1fr;
}

/* Правая часть */
.home_screen .flex_container .product_table,
.home_screen .flex_container .request_table{
  flex:1 1 auto;
  width:auto;
  min-width:0;
}

/* Скрывать категории если [hidden] */
#home-cats-products[hidden],
#home-cats-requests[hidden]{
  display:none !important;
}

/* =========================
   Сердце (избранное) — снизу справа, без кружка
   ВАЖНО:
   - .card-like может быть <img> (старый вариант)
   - или <button class="card-like"><img ...></button> (правильный вариант)
   Поэтому reset применяем ТОЛЬКО к button.card-like
   ========================= */
.product_card,.card{ position:relative; }

/* Общий стиль позиции/размера — подходит и для <img>, и для <button> */
.card-like{
  position:absolute;
  right:8px;
  bottom:8px;
  width:28px;
  height:28px;
  cursor:pointer;
  z-index:3;
  opacity:.9;
  transition:transform .15s, opacity .2s, filter .2s;
  filter:drop-shadow(0 0 2px rgba(0,0,0,.35));
}

/* Hover — тоже общий */
.card-like:hover{
  transform:scale(1.15);
  opacity:1;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.45));
}

.card-like.on{
  filter:drop-shadow(0 0 2px rgba(255,0,0,.5));
}

/* RESET только если .card-like — это BUTTON (иначе <img.card-like> может визуально “поехать”) */
button.card-like{
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  box-shadow: none;
  line-height: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Иконка внутри button */
button.card-like > img{
  width:100%;
  height:100%;
  display:block;
}

/* Фокус (доступность) — только для button */
button.card-like:focus-visible{
  outline:2px solid rgba(28,150,117,.55);
  outline-offset:2px;
}

/* =========================
   АДАПТИВ
   ========================= */

/* Планшет и ниже: общий переход в колонку */
@media (max-width: 991px){
  .home_screen .flex_container{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }

  .home_screen .flex_container .wrapper{
    display: grid; /* ← ВОТ ЭТОГО НЕ ХВАТАЛО */
    width:100%;
    flex:0 0 auto;
    padding-left:0;
    margin:0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    box-sizing:border-box;
  }

  /* FIX: правильные селекторы (таблицы не вложены в .product_table) */
  .home_screen .flex_container .product_table,
  .home_screen .flex_container .request_table{
    width:100%;
    flex:0 0 auto;
    min-width:0;
    box-sizing:border-box;
  }

  .home_switch_button{
    flex:1 1 33%;
    width:auto;
    padding:10px 0;
    border-radius:8px;
  }

  .title_cx h1{
    font-size:20px;
    margin:8px auto 8px;
    width:min(98%, 720px);
    box-sizing:border-box;
  }
}

/* Мобилка: конкретные правила HOME */
@media (max-width: 767.98px){

  /* Ровные поля контейнера главной */
  .home_screen_container{
    width:100%;
    padding:0;
    margin:4px 4px 4px 0px;
    box-sizing:border-box;
    overflow:hidden;
  }

  /* ЗАЗОР между блоками (экранами) + маска по X, чтобы не было внахлёста */
  .home_screen{
    overflow:hidden;             /* ключевое: соседний экран не виден */
    padding:0 2px;               /* визуальный зазор между блоками */
    box-sizing:border-box;
  }

  .home_switch{
    display:flex !important;
    align-items:stretch !important;
    justify-content:center !important;
    gap:2px !important;                 /* можно 2px как ты хотел */
    padding:0 6px !important;
    flex-wrap:nowrap !important;
  }

  .home_switch_button{
    flex:1 1 0 !important;              /* 3 кнопки делят строку */
    min-width:0 !important;             /* критично: даёт сжиматься */
    margin:0 !important;
    box-sizing:border-box !important;
    white-space:nowrap !important;      /* без переноса */
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    position:relative;
    z-index:1;
  }

  /* Категории: убираем вылет по X (это и создаёт внахлёст экранов) */
  .home_screen .flex_container .wrapper{
    overflow-x:hidden;           /* ключевое: ничего не вылезает вправо/влево */
    overflow-y:visible;
    -webkit-overflow-scrolling:auto;
    padding:8px 10px;
    border-radius:10px;
    background:rgba(255,255,255,.55);
    border:1px solid rgba(0,0,0,.06);
    box-sizing:border-box;
  }

  /* FIX: правильные селекторы для таблиц/карточек на мобилке (2 колонки по умолчанию) */
  .home_screen .flex_container .product_table,
  .home_screen .flex_container .request_table{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
    align-items:stretch;
  }

  /* Вкладка "Спрос" — объявления в 1 колонку (после категорий) */
  .home_screen_inner.requests .product_table,
  .home_screen_inner.requests .request_table{
    grid-template-columns:1fr !important;
  }

  /* Чтобы внутренности не раздували сетку */
  .home_screen .flex_container .product_table > *,
  .home_screen .flex_container .request_table > *{
    min-width:0;
  }

  /* Сердце меньше */
  .card-like{
    width:26px;
    height:26px;
    right:6px;
    bottom:6px;
  }

  /* На мобилке reset и центрирование — только если это button */
  button.card-like{
    background: transparent;
    border: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  button.card-like > img{
    width: 100%;
    height: 100%;
    display: block;
  }

  /* Страховка от горизонтального вылета именно на HOME */
  .home_screen,
  .home_screen .flex_container,
  .home_screen .flex_container .product_table,
  .home_screen .flex_container .request_table{
    max-width:100%;
    overflow-x:hidden;
  }
}

/* Мелкие */
@media (max-width: 600px){
  .home_switch{ gap:6px; }
  .home_switch_button{ padding:6px 8px; }
}
@media (max-width: 420px){
  .home_switch{ gap:6px; }
  .home_switch_button{ padding:6px 6px; }
}

/* =========================================================
   HOME SWITCH: страховка на самых узких (не ломая текущие !important на мобилке)
   ========================================================= */
@media (max-width: 480px){

  /* если где-то есть hover scale — на мобилке его лучше выключить, чтобы не залезал на соседей */
  .home_switch_button:hover{
    transform:none !important;
  }

  .home_switch_button.active{
    z-index:2;               /* активная сверху, но без перекрытия по ширине */
  }
}

/* ===== Desktop: отступы слева/справа (как просил) ===== */
@media (min-width: 1024px) {
  .home_screen {
    padding-left: 4px;
    padding-right: 2px;
  }
}


/* =========================
   HOME → Инвестиции: отступы между карточками
   (Инвест-проекты и Инвесторы)
   ========================= */

/* 1) Инвест-проекты */
.home_screen .invest_projects_block > a{
  display:block;
}
.home_screen .invest_projects_block > a + a{
  margin-top:12px;
}

/* 2) Инвесторы */
.home_screen .home_invest_title ~ a[href^="/investor/"]{
  display:block;
}
.home_screen .home_invest_title ~ a[href^="/investor/"] + a[href^="/investor/"]{
  margin-top:12px;
}

/* =========================
   HOME → Инвестиции: hover-эффект
   ========================= */

/* Базовый цвет текста в карточке */
.home_screen .investor_card{
  color:#222;
}

/* Фон + тень карточки при hover */
.home_screen .invest_projects_block > a:hover .investor_card,
.home_screen .home_invest_title ~ a[href^="/investor/"]:hover .investor_card{
  background: rgba(0, 102, 255, 0.06);
  box-shadow: 0 2px 8px rgba(0, 102, 255, 0.15);
}

/* ✅ Синим делаем именно ОБЫЧНЫЙ текст карточки (всё, что НЕ strong) */
.home_screen .invest_projects_block > a:hover .investor_card,
.home_screen .home_invest_title ~ a[href^="/investor/"]:hover .investor_card{
  color:#0066ff;
}

/* ✅ А жирное (labels: Наименование/Описание/Капитал/ФИО) оставляем чёрным */
.home_screen .invest_projects_block > a:hover .investor_card strong,
.home_screen .home_invest_title ~ a[href^="/investor/"]:hover .investor_card strong{
  color:#222;
}

/* На всякий случай: никаких подчёркиваний ссылок */
.home_screen .invest_projects_block > a:hover,
.home_screen .home_invest_title ~ a[href^="/investor/"]:hover{
  text-decoration:none;
}

/* Touch-устройства: без hover */
@media (hover: none){
  .home_screen .invest_projects_block > a:hover .investor_card,
  .home_screen .home_invest_title ~ a[href^="/investor/"]:hover .investor_card{
    background:transparent;
    box-shadow:none;
    color:#222;
  }
  .home_screen .invest_projects_block > a:hover .investor_card strong,
  .home_screen .home_invest_title ~ a[href^="/investor/"]:hover .investor_card strong{
    color:#222;
  }
}

/* =========================
   БЕЙДЖ ПРОВЕРКИ ИНН НА КАРТОЧКЕ
   - зелёный: продавец проверен
   - серый: продавец не проверен / статус не ok
   - только визуальный сигнал, без текста
   ========================= */

/* Контейнер значка */
.inn-check {
    position: absolute;
    left: 10px;
    bottom: 10px;
    width: 20px;
    height: 20px;
    z-index: 5;
    pointer-events: none;
}

.inn-check img{
  display:block;
  width:100%;
  height:100%;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.28));
}

.inn-check.ok img{
  opacity:1;
  filter:
    brightness(0)
    saturate(100%)
    invert(49%)
    sepia(93%)
    saturate(1352%)
    hue-rotate(95deg)
    brightness(96%)
    contrast(101%)
    drop-shadow(0 1px 2px rgba(0,0,0,.28));
}

/* Не проверен */
.inn-check.no img{
  opacity:.22;
  filter:none;
}

/* Мобилка: чуть крупнее для читаемости */
@media (max-width:768px){
  .inn-check{
    width:18px;
    height:18px;
  }
}