/* wide.css — улучшения для больших экранов */
/* БАЗОВЫЕ ПЕРЕМЕННЫЕ */
:root{
  --content-max: 1400px;
  --g: 14px;
}
/* шире — крупнее карточки и шире контейнер */
@media (min-width: 1280px){
  :root{ --content-max: 1600px; --card-min: 240px; }
}
@media (min-width: 1680px){
  :root{ --content-max: 1760px; --card-min: 260px; }
}
@media (min-width: 1920px){
  :root{ --content-max: 1920px; --card-min: 280px; }
}

/* Контент шире и центрирование */
main{ max-width: var(--content-max) !important; }

/* Карточки: вместо фиксированных брейкпоинтов — auto-fill по минимальной ширине */
.grid{
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(var(--card-min), 1fr)) !important;
  gap: var(--g) !important;
}

/* Две колонки секций на широких экранах */
.sections{
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 1200px){
  .sections{ grid-template-columns: 1fr; align-items: start; }
}

/* Немного крупнее шрифты/воздух на десктопе */
@media (min-width: 1280px){
  body{ font-size: 16px; line-height: 1.5; }
  .section-title{ margin: 16px 0 10px; }
  .card .title{ font-size: 1rem; }
}

/* Нижняя навигация прячем на десктопе — освобождаем место */
@media (min-width: 1024px){
  .navbar{ display: none !important; }
  .fab{ bottom: 24px !important; }        /* раньше было над navbar */
  .selectbar{ bottom: 16px !important; }  /* панель выбора тоже ближе к низу */
}

/* Чуть расширим поиск на широких */
.toolbar .search{ min-width: 360px; }

/* Плитки-чуть выше контраста в светлой теме */
:root[data-theme="light"] .thumb{ background: #f5f7fb; }

/* Правка для очень широких, чтобы текст не «тянулся» в одну строку */
.title{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

#locations-grid .card,
#items-grid .card { cursor: pointer; }