/* =============================================================================
   RESPONSIVE STYLES - Адаптивные стили для минималистичной темы
   ============================================================================= */

/* =============================================================================
   MOBILE FIRST APPROACH
   ============================================================================= */

/* Базовые брейкпоинты */
:root {
  --mobile: 576px;
  --tablet: 768px;
  --desktop: 992px;
  --wide: 1200px;
}

/* =============================================================================
   МОБИЛЬНЫЕ УСТРОЙСТВА (до 576px)
   ============================================================================= */

@media (max-width: 576px) {
  /* Контейнер */
  .container {
    padding: 0 0.5rem;
  }
  
  /* Типографика */
  h1 { font-size: 2rem; }
  h2 { font-size: 1.5rem; }
  h3 { font-size: 1.25rem; }
  h4 { font-size: 1.125rem; }
  
  /* Навигация */
  .navbar {
    padding: 0.5rem 0;
  }
  
  .navbar-nav {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .navbar-brand {
    font-size: 1.25rem;
  }
  
  /* Сетка */
  .grid,
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  /* Карточки */
  .card {
    padding: 1rem;
  }
  
  .card-image {
    height: 150px;
  }
  
  /* Кнопки */
  .btn {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
  }
  
  /* Hero */
  .hero {
    padding: 1rem 0;
  }
  
  .hero-title {
    font-size: 2rem;
  }
  
  .hero-subtitle {
    font-size: 1rem;
  }
  
  /* Формы */
  .form-input {
    padding: 0.75rem;
  }
}

@media (max-width: 576px) {
  .navbar-collapse { margin-top: .5rem; }
}

/* =============================================================================
   ПЛАНШЕТЫ (576px - 768px)
   ============================================================================= */

@media (min-width: 576px) and (max-width: 768px) {
  /* Сетка */
  .grid-3,
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Карточки */
  .card-image {
    height: 180px;
  }
  
  /* Hero */
  .hero-title {
    font-size: 2.5rem;
  }
  
  .hero-subtitle {
    font-size: 1.125rem;
  }
}

/* =============================================================================
   ДЕСКТОПЫ (768px - 992px)
   ============================================================================= */

@media (min-width: 768px) and (max-width: 992px) {
  /* Сетка */
  .grid-4 {
    grid-template-columns: repeat(3, 1fr);
  }
  
  /* Карточки */
  .card-image {
    height: 200px;
  }
}

/* =============================================================================
   ШИРОКИЕ ЭКРАНЫ (992px+)
   ============================================================================= */

@media (min-width: 992px) {
  /* Все стили по умолчанию */
}

/* =============================================================================
   УТИЛИТЫ ДЛЯ АДАПТИВНОСТИ
   ============================================================================= */

/* Скрытие на мобильных */
@media (max-width: 576px) {
  .d-mobile-none {
    display: none !important;
  }
}

/* Скрытие на планшетах */
@media (min-width: 576px) and (max-width: 768px) {
  .d-tablet-none {
    display: none !important;
  }
}

/* Скрытие на десктопах */
@media (min-width: 768px) {
  .d-desktop-none {
    display: none !important;
  }
}

/* Показать только на мобильных */
@media (min-width: 576px) {
  .d-mobile-only {
    display: none !important;
  }
}

/* Показать только на планшетах */
@media (max-width: 576px), (min-width: 768px) {
  .d-tablet-only {
    display: none !important;
  }
}

/* Показать только на десктопах */
@media (max-width: 768px) {
  .d-desktop-only {
    display: none !important;
  }
}

/* =============================================================================
   FLEX УТИЛИТЫ
   ============================================================================= */

/* Мобильная адаптация flex */
@media (max-width: 576px) {
  .flex-mobile-column {
    flex-direction: column !important;
  }
  
  .flex-mobile-wrap {
    flex-wrap: wrap !important;
  }
  
  .justify-mobile-center {
    justify-content: center !important;
  }
  
  .align-mobile-center {
    align-items: center !important;
  }
}

/* =============================================================================
   ТЕКСТОВЫЕ УТИЛИТЫ
   ============================================================================= */

/* Размеры текста на мобильных */
@media (max-width: 576px) {
  .text-mobile-center {
    text-align: center !important;
  }
  
  .text-mobile-small {
    font-size: 0.875rem !important;
  }
  
  .text-mobile-large {
    font-size: 1.125rem !important;
  }
}

/* =============================================================================
   ОТСТУПЫ И РАЗМЕРЫ
   ============================================================================= */

/* Адаптивные отступы */
@media (max-width: 576px) {
  .p-mobile-0 { padding: 0 !important; }
  .p-mobile-1 { padding: 0.5rem !important; }
  .p-mobile-2 { padding: 1rem !important; }
  
  .m-mobile-0 { margin: 0 !important; }
  .m-mobile-1 { margin: 0.5rem !important; }
  .m-mobile-2 { margin: 1rem !important; }
  
  .mb-mobile-0 { margin-bottom: 0 !important; }
  .mb-mobile-1 { margin-bottom: 0.5rem !important; }
  .mb-mobile-2 { margin-bottom: 1rem !important; }
  
  .mt-mobile-0 { margin-top: 0 !important; }
  .mt-mobile-1 { margin-top: 0.5rem !important; }
  .mt-mobile-2 { margin-top: 1rem !important; }
}

/* =============================================================================
   ПРОИЗВОДИТЕЛЬНОСТЬ
   ============================================================================= */

/* Оптимизация для мобильных */
@media (max-width: 576px) {
  /* Отключение hover эффектов на touch устройствах */
  .hover-scale:hover {
    transform: none;
  }
  
  /* Упрощение анимаций */
  .fade-in {
    animation-duration: 0.3s;
  }
  
  .slide-in {
    animation-duration: 0.2s;
  }
  
  /* Оптимизация изображений */
  .card-image {
    object-fit: cover;
  }
}

/* =============================================================================
   ACCESSIBILITY
   ============================================================================= */

/* Увеличенные области касания для мобильных */
@media (max-width: 576px) {
  .btn,
  .navbar-nav .nav-link {
    min-height: 44px;
    min-width: 44px;
  }
  
  .form-input {
    min-height: 44px;
  }
}

/* Высокий контраст */
@media (prefers-contrast: high) {
  .card {
    border-color: var(--text);
  }
  
  .btn-outline {
    border-width: 2px;
  }
}

/* =============================================================================
   PRINT СТИЛИ
   ============================================================================= */

@media print {
  /* Скрытие навигации */
  .navbar,
  .btn,
  .footer {
    display: none !important;
  }
  
  /* Упрощение стилей */
  .card {
    border: 1px solid #000;
    break-inside: avoid;
  }
  
  /* Черно-белая печать */
  * {
    color: #000 !important;
    background: #fff !important;
  }
  
  /* Размеры для печати */
  h1 { font-size: 18pt; }
  h2 { font-size: 16pt; }
  h3 { font-size: 14pt; }
  body { font-size: 12pt; }
}

/* =============================================================================
   КОНЕЦ ФАЙЛА
   ============================================================================= */ 

/* Кнопки с длинным текстом: адаптивная ширина и перенос */
.btn-responsive {
  white-space: normal !important;
  text-align: center;
}

@media (max-width: 576px) {
  .btn-responsive {
    width: 100%;
    display: inline-block;
  }
} 

/* =============================================================================
   ACCESSIBILITY: MINIMUM TAP TARGET SIZES (GLOBAL)
   ============================================================================= */

/* Ensure core interactive elements meet 44x44px recommended minimum */
.btn,
button.btn,
a.btn {
  min-height: 44px;
  min-width: 44px;
}

/* Ensure native buttons and inputs also meet minimum sizes */
button,
[role="button"],
input[type="button"],
input[type="submit"],
input[type="reset"] {
  min-width: 44px;
  min-height: 44px;
}

.navbar .nav-link {
  min-height: 44px;
  display: flex;
  align-items: center;
}

.navbar-toggler {
  min-width: 44px;
  min-height: 44px;
  padding: 0.5rem 0.75rem; /* keep visual balance */
}

.pagination .page-link {
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Clickable badges only (avoid inflating static labels) */
a.badge,
button.badge,
.badge[role="button"],
.badge.btn {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Buttons marked small should still meet the minimum touch target */
.btn-sm {
  min-height: 44px;
  min-width: 44px;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

/* Ensure input groups do not compress controls below 44px */
.input-group .btn,
.input-group .form-control {
  min-height: 44px;
}

/* Close button (e.g., in toasts/modals) should meet touch target */
.btn-close {
  width: 44px;
  height: 44px;
}