/* ============================================================
   RESPONSIVE STYLES - Mobile-First Адаптивный дизайн
   ============================================================ */

/* ============================================================
   Tablet (768px)
   ============================================================ */
@media (max-width: 768px) {
    /* Header */
    .header-title h1 {
        font-size: 1.5rem;
    }

    .subtitle {
        font-size: 0.938rem;
    }

    /* Board */
    .board-container {
        grid-template-columns: 1fr;
        padding: var(--space-lg) var(--space-sm);
        gap: var(--space-md);
    }

    .column {
        min-height: auto;
    }

    .cards-container {
        max-height: 350px;
    }

    /* Modal */
    .modal {
        width: 95%;
        max-width: none;
    }

    .modal-header,
    #card-form {
        padding: var(--space-lg);
    }

    /* Card actions - вертикально на планшетах */
    .card-actions {
        flex-direction: column;
    }

    .card-btn {
        width: 100%;
        text-align: center;
    }
}

/* ============================================================
   Mobile (480px)
   ============================================================ */
@media (max-width: 480px) {
    /* Увеличить размер touch targets для мобильных */
    :root {
        --touch-target: 44px;
    }

    /* Header - компактный */
    .header-content {
        flex-direction: column;
        gap: var(--space-md);
        padding: var(--space-md);
        align-items: stretch;
    }

    .header-title {
        text-align: center;
    }

    .header-title h1 {
        font-size: 1.375rem;
    }

    .header-actions {
        flex-direction: column;
        gap: var(--space-sm);
    }

    /* Board */
    .board-container {
        padding: var(--space-md) var(--space-sm);
        gap: var(--space-md);
    }

    /* Column - компактные отступы */
    .column {
        padding: var(--space-md);
        border-radius: var(--radius-sm);
    }

    .column-header {
        margin-bottom: var(--space-md);
        padding-bottom: var(--space-sm);
    }

    .column-header h2 {
        font-size: 1rem;
    }

    /* Cards */
    .cards-container {
        gap: var(--space-sm);
        max-height: 300px;
    }

    .card {
        padding: var(--space-md);
    }

    .card-title {
        font-size: 1.063rem;
    }

    .card-description {
        font-size: 0.938rem;
    }

    .card-actions {
        gap: var(--space-xs);
        margin-top: var(--space-sm);
        padding-top: var(--space-sm);
    }

    .card-btn {
        min-height: var(--touch-target);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Add button - больше для touch */
    .add-card-btn {
        min-height: var(--touch-target);
        padding: var(--space-sm);
    }

    /* Modal - на весь экран на маленьких устройствах */
    .modal {
        width: 100%;
        max-height: 100vh;
        border-radius: 0;
        margin: 0;
    }

    .modal-header {
        padding: var(--space-md);
    }

    .modal-header h2 {
        font-size: 1.25rem;
    }

    #card-form {
        padding: var(--space-md);
    }

    .form-group {
        margin-bottom: var(--space-md);
    }

    .modal-actions {
        flex-direction: column-reverse;
        gap: var(--space-sm);
    }

    .btn {
        width: 100%;
        min-height: var(--touch-target);
    }
}

/* ============================================================
   Small Mobile (360px)
   ============================================================ */
@media (max-width: 360px) {
    /* Еще более компактный дизайн для очень маленьких экранов */
    .header-title h1 {
        font-size: 1.25rem;
    }

    .board-container {
        padding: var(--space-sm);
    }

    .column {
        padding: var(--space-sm);
    }

    .card {
        padding: var(--space-sm);
    }

    .card-title {
        font-size: 1rem;
    }

    .card-description {
        font-size: 0.875rem;
    }
}

/* ============================================================
   Large Desktop (1440px)
   ============================================================ */
@media (min-width: 1440px) {
    .board-container {
        max-width: 1600px;
        gap: var(--space-xl);
    }

    .column {
        padding: var(--space-xl);
    }

    .cards-container {
        gap: var(--space-lg);
    }
}

/* ============================================================
   Print Styles
   ============================================================ */
@media print {
    header,
    .filters-toolbar,
    .add-card-btn,
    .card-actions,
    .notification-banner {
        display: none !important;
    }

    .board-container {
        display: block;
        padding: 0;
    }

    .column {
        page-break-inside: avoid;
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid var(--gray-300);
        margin-bottom: var(--space-lg);
    }

    .card {
        page-break-inside: avoid;
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid var(--gray-300);
    }
}

/* ============================================================
   Landscape Orientation на телефонах
   ============================================================ */
@media (max-height: 500px) and (orientation: landscape) {
    .header-content {
        padding: var(--space-sm) var(--space-md);
    }

    .header-title h1 {
        font-size: 1.25rem;
    }

    .subtitle {
        display: none;
    }

    .board-container {
        padding: var(--space-sm);
    }

    .cards-container {
        max-height: 200px;
    }
}

/* ============================================================
   Reduced Motion - доступность
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================================
   Dark Mode Support (опционально)
   ============================================================ */
@media (prefers-color-scheme: dark) {
    /* Можно добавить поддержку темной темы в будущем */
    /* Пока оставляем светлую тему */
}