/* tablet-optimization.css - Улучшения для планшетного представления согласно плану улучшения дизайна */

/* 1. Специальные макеты для планшетов */

/* Планшет горизонтальный */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  /* Сетка продуктов - 3 колонки */
  .product-grid,
  .coffee-grid,
  .catalog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 20px 0;
  }
  
  /* Основной контейнер */
  .container {
    max-width: 960px;
    padding: 0 20px;
  }
  
  /* Боковая панель */
  .sidebar {
    width: 240px;
  }
  
  /* Основной контент при наличии сайдбара */
  .with-sidebar {
    display: flex;
    gap: 24px;
  }
  
  .with-sidebar .main-content {
    flex: 1;
  }
  
  /* Карточка продукта */
  .product-card,
  .coffee-card {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  
  .product-card .product-image,
  .coffee-card .coffee-image {
    height: 180px;
  }
  
  .product-card .product-info,
  .coffee-card .coffee-info {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  
  .product-card .btn-primary,
  .coffee-card .btn-primary {
    margin-top: auto;
  }
  
  /* Навигация */
  .main-nav {
    padding: 0 20px;
  }
  
  .nav-links {
    display: flex;
  }
  
  /* Скрытие мобильных элементов */
  .mobile-menu-button,
  .mobile-bottom-nav,
  .floating-action-button {
    display: none;
  }
  
  /* Фильтры и сортировка */
  .filters-container {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 20px;
  }
  
  .filter-group {
    flex: 1;
    min-width: 180px;
  }
  
  /* Хлебные крошки */
  .breadcrumbs {
    margin: 15px 0;
  }
}

/* Планшет вертикальный */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  /* Сетка продуктов - 2 колонки */
  .product-grid,
  .coffee-grid,
  .catalog-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin: 20px 0;
  }
  
  /* Основной контейнер */
  .container {
    max-width: 768px;
    padding: 0 16px;
  }
  
  /* Боковая панель */
  .sidebar {
    width: 200px;
  }
  
  /* Основной контент при наличии сайдбара */
  .with-sidebar {
    display: flex;
    gap: 20px;
  }
  
  .with-sidebar .main-content {
    flex: 1;
  }
  
  /* Карточка продукта */
  .product-card,
  .coffee-card {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  
  .product-card .product-image,
  .coffee-card .coffee-image {
    height: 160px;
  }
  
  .product-card .product-info,
  .coffee-card .coffee-info {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  
  .product-card .btn-primary,
  .coffee-card .btn-primary {
    margin-top: auto;
  }
  
  /* Навигация */
  .main-nav {
    padding: 0 16px;
  }
  
  .nav-links {
    display: flex;
  }
  
  /* Частичное скрытие мобильных элементов */
  .mobile-menu-button {
    display: none;
  }
  
  /* На вертикальном планшете оставляем нижнюю навигацию для удобства */
  .mobile-bottom-nav {
    display: flex;
  }
  
  .floating-action-button {
    display: flex;
  }
  
  /* Фильтры и сортировка */
  .filters-container {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
  }
  
  .filter-group {
    flex: 1;
    min-width: 160px;
  }
  
  /* Хлебные крошки */
  .breadcrumbs {
    margin: 12px 0;
  }
}

/* 2. Оптимизация сеток и размеров элементов для планшетных разрешений */

@media (min-width: 768px) and (max-width: 1024px) {
  /* Общие стили для всех планшетов */
  
  /* Типографика */
  body {
    font-size: 15px;
  }
  
  h1 {
    font-size: 28px;
    margin-bottom: 16px;
  }
  
  h2 {
    font-size: 22px;
    margin-bottom: 14px;
  }
  
  h3 {
    font-size: 18px;
    margin-bottom: 12px;
  }
  
  /* Отступы */
  .section {
    margin-bottom: 30px;
  }
  
  /* Карточки */
  .card {
    padding: 16px;
    border-radius: 8px;
  }
  
  /* Кнопки */
  .btn {
    padding: 10px 16px;
  }
  
  /* Формы */
  input, select, textarea {
    padding: 10px 12px;
    font-size: 15px;
  }
  
  /* Изображения */
  .responsive-image {
    max-width: 100%;
    height: auto;
  }
  
  /* Таблицы */
  table {
    font-size: 14px;
  }
  
  /* 3. Улучшение навигации с учетом особенностей взаимодействия с планшетами */
  
  /* Выпадающие меню */
  .dropdown {
    position: relative;
  }
  
  .dropdown-content {
    min-width: 200px;
  }
  
  /* Состояния при наведении/нажатии */
  .nav-item:hover,
  .dropdown:hover .dropdown-content {
    display: block;
  }
  
  /* Контекстные меню */
  .context-menu {
    padding: 10px;
  }
  
  .context-menu-item {
    padding: 8px 12px;
  }
  
  /* 4. Эффективное использование доступного пространства экрана */
  
  /* Полноэкранные секции */
  .full-width-section {
    margin-left: -16px;
    margin-right: -16px;
    padding: 24px 16px;
  }
  
  /* Слайдеры и карусели */
  .slider-container {
    margin: 20px 0;
  }
  
  .slider-nav {
    margin-top: 12px;
  }
  
  /* Вкладки */
  .tabs {
    display: flex;
    margin-bottom: 16px;
  }
  
  .tab {
    padding: 10px 16px;
    flex: 1;
    text-align: center;
  }
  
  /* Адаптивные списки */
  .adaptive-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  
  /* Адаптивные таблицы */
  .responsive-table {
    overflow-x: auto;
  }
  
  /* Режим просмотра */
  .view-modes {
    display: flex;
    margin-bottom: 16px;
  }
  
  .view-mode-btn {
    padding: 8px 12px;
  }
  
  /* Галереи */
  .gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
  
  /* Адаптивные формы */
  .form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 16px;
  }
  
  .form-group {
    flex: 1;
    min-width: 200px;
  }
}