/* =================================
   RESPONSIVE CSS - OMúsicoCatólico
   Ajustes responsivos específicos
   ================================= */

/* === RESPONSIVE BREAKPOINTS === */
/* Mobile: 320px - 767px */
/* Tablet: 768px - 1023px */
/* Desktop: 1024px+ */

/* === MOBILE FIRST === */
/* Base styles (mobile) já definidos no design-system.css */

/* === TABLET: 768px+ === */
@media (min-width: 768px) {
    /* Container adjustments */
    .container {
        padding-left: var(--spacing-6);
        padding-right: var(--spacing-6);
    }
    
    /* Navigation */
    .nav-container {
        padding: var(--spacing-4) var(--spacing-6);
    }
    
    /* Grid systems */
    .grid-md-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid-md-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .grid-md-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    
    /* Cifras */
    .cifra-grid.cols-2 {
        grid-template-columns: repeat(2, minmax(350px, 1fr));
    }
    
    .cifra-grid.cols-3 {
        grid-template-columns: repeat(3, minmax(300px, 1fr));
    }
    
    /* Cards */
    .card-header,
    .card-body,
    .card-footer {
        padding: var(--spacing-6);
    }
    
    /* Dashboard */
    .dashboard-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
    
    /* Flexbox utilities */
    .md\:flex { display: flex; }
    .md\:flex-row { flex-direction: row; }
    .md\:flex-col { flex-direction: column; }
    .md\:items-center { align-items: center; }
    .md\:justify-between { justify-content: space-between; }
    
    /* Spacing */
    .md\:p-6 { padding: var(--spacing-6); }
    .md\:px-8 { padding-left: var(--spacing-8); padding-right: var(--spacing-8); }
    .md\:py-4 { padding-top: var(--spacing-4); padding-bottom: var(--spacing-4); }
    
    /* Text */
    .md\:text-left { text-align: left; }
    .md\:text-center { text-align: center; }
    .md\:text-lg { font-size: var(--font-size-lg); }
    .md\:text-xl { font-size: var(--font-size-xl); }
    
    /* Display */
    .md\:block { display: block; }
    .md\:hidden { display: none; }
    
    /* Width */
    .md\:w-auto { width: auto; }
    .md\:w-1\/2 { width: 50%; }
    .md\:w-1\/3 { width: 33.333333%; }
    .md\:w-2\/3 { width: 66.666667%; }
}

/* === DESKTOP: 1024px+ === */
@media (min-width: 1024px) {
    /* Container adjustments */
    .container {
        padding-left: var(--spacing-8);
        padding-right: var(--spacing-8);
    }
    
    /* Navigation */
    .nav-container {
        padding: var(--spacing-4) var(--spacing-8);
    }
    
    /* Grid systems */
    .grid-lg-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid-lg-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .grid-lg-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .grid-lg-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .grid-lg-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    
    /* Cifras */
    .cifra-grid.cols-3 {
        grid-template-columns: repeat(3, minmax(350px, 1fr));
    }
    
    .cifra-grid.cols-4 {
        grid-template-columns: repeat(4, minmax(300px, 1fr));
    }
    
    /* Dashboard */
    .dashboard-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
    
    /* Flexbox utilities */
    .lg\:flex { display: flex; }
    .lg\:flex-row { flex-direction: row; }
    .lg\:flex-col { flex-direction: column; }
    .lg\:items-center { align-items: center; }
    .lg\:justify-between { justify-content: space-between; }
    
    /* Spacing */
    .lg\:p-8 { padding: var(--spacing-8); }
    .lg\:px-12 { padding-left: var(--spacing-12); padding-right: var(--spacing-12); }
    .lg\:py-6 { padding-top: var(--spacing-6); padding-bottom: var(--spacing-6); }
    
    /* Text */
    .lg\:text-left { text-align: left; }
    .lg\:text-center { text-align: center; }
    .lg\:text-xl { font-size: var(--font-size-xl); }
    .lg\:text-2xl { font-size: var(--font-size-2xl); }
    .lg\:text-3xl { font-size: var(--font-size-3xl); }
    
    /* Display */
    .lg\:block { display: block; }
    .lg\:hidden { display: none; }
    
    /* Width */
    .lg\:w-auto { width: auto; }
    .lg\:w-1\/4 { width: 25%; }
    .lg\:w-1\/2 { width: 50%; }
    .lg\:w-3\/4 { width: 75%; }
}

/* === LARGE DESKTOP: 1280px+ === */
@media (min-width: 1280px) {
    /* Container max width */
    .container {
        max-width: 1280px;
    }
    
    /* Grid systems */
    .xl\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .xl\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    
    /* Dashboard */
    .dashboard-grid {
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    }
    
    /* Cifras - mais colunas em telas grandes */
    .cifra-grid.cols-4 {
        grid-template-columns: repeat(4, minmax(320px, 1fr));
    }
    
    /* Flexbox utilities */
    .xl\:flex { display: flex; }
    .xl\:flex-row { flex-direction: row; }
    .xl\:items-center { align-items: center; }
    .xl\:justify-between { justify-content: space-between; }
    
    /* Text */
    .xl\:text-2xl { font-size: var(--font-size-2xl); }
    .xl\:text-3xl { font-size: var(--font-size-3xl); }
    .xl\:text-4xl { font-size: var(--font-size-4xl); }
}

/* === MOBILE SPECIFIC (max-width) === */
@media (max-width: 767px) {
    /* Hide desktop navigation */
    .nav-menu {
        display: none;
    }
    
    /* Stack filter controls */
    .filter-row {
        flex-direction: column;
        align-items: stretch;
    }
    
    .filter-group {
        width: 100%;
        justify-content: space-between;
    }
    
    .filter-select {
        min-width: 140px;
    }
    
    /* Cifra controls stack */
    .cifra-controls {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-3);
    }
    
    .cifra-controls-group {
        justify-content: center;
    }
    
    /* Cards smaller padding */
    .card-header,
    .card-body,
    .card-footer {
        padding: var(--spacing-4);
    }
    
    /* Modal adjustments */
    .modal-content {
        width: 95%;
        margin: var(--spacing-4);
    }
    
    .modal-header,
    .modal-body,
    .modal-footer {
        padding: var(--spacing-4);
    }
    
    /* Typography adjustments */
    .cifra-display-body {
        font-size: var(--font-size-xs);
        padding: var(--spacing-4);
    }
    
    /* Search section */
    .search-section {
        padding: var(--spacing-4);
        margin-bottom: var(--spacing-4);
    }
    
    /* Button adjustments */
    .btn-lg {
        padding: var(--spacing-3) var(--spacing-5);
        font-size: var(--font-size-base);
    }
    
    .btn-xl {
        padding: var(--spacing-4) var(--spacing-6);
        font-size: var(--font-size-lg);
    }
}

/* === SMALL MOBILE: max-width 480px === */
@media (max-width: 480px) {
    /* Ultra compact mode */
    .container {
        padding-left: var(--spacing-3);
        padding-right: var(--spacing-3);
    }
    
    /* Navigation */
    .nav-container {
        padding: var(--spacing-3);
    }
    
    /* Even smaller text for cifras */
    .cifra-display-body,
    .cifra-acordes,
    .cifra-letra {
        font-size: var(--font-size-xs);
    }
    
    .cifra-display-header {
        padding: var(--spacing-3);
    }
    
    /* Repertório cards */
    .repertorio-card-header,
    .repertorio-card-body {
        padding: var(--spacing-3);
    }
    
    /* Search input smaller */
    .search-input {
        padding: var(--spacing-2) var(--spacing-3);
        padding-left: var(--spacing-8);
        font-size: var(--font-size-sm);
    }
    
    /* Buttons smaller */
    .btn-base {
        padding: var(--spacing-2) var(--spacing-3);
        font-size: var(--font-size-sm);
    }
    
    /* Dashboard cards */
    .stat-card {
        padding: var(--spacing-4);
    }
    
    .stat-value {
        font-size: var(--font-size-2xl);
    }
    
    /* Tags smaller */
    .tag,
    .badge {
        font-size: var(--font-size-xs);
        padding: var(--spacing-1);
    }
}

/* === PRINT STYLES === */
@media print {
    /* Hide interactive elements */
    .btn,
    .nav,
    .nav-menu,
    .cifra-controls,
    .search-section,
    .filter-row,
    button {
        display: none !important;
    }
    
    /* Adjust layout for printing */
    .cifra-display,
    .cifra-card {
        box-shadow: none !important;
        border: 1px solid #000 !important;
        break-inside: avoid;
        margin-bottom: var(--spacing-4) !important;
    }
    
    /* Black and white text */
    .cifra-display-body,
    .cifra-content {
        background-color: transparent !important;
        color: #000 !important;
    }
    
    .cifra-acordes {
        color: #000 !important;
        font-weight: bold !important;
    }
    
    .cifra-letra {
        color: #333 !important;
    }
    
    /* Page margins */
    @page {
        margin: 2cm;
    }
    
    /* Typography for print */
    body {
        font-size: 12pt;
        line-height: 1.4;
    }
    
    h1 { font-size: 18pt; }
    h2 { font-size: 16pt; }
    h3 { font-size: 14pt; }
}

/* === HIGH CONTRAST MODE === */
@media (prefers-contrast: high) {
    .card,
    .cifra-display,
    .repertorio-card {
        border: 2px solid var(--color-gray-900) !important;
    }
    
    .btn-primary {
        background-color: #000 !important;
        border-color: #000 !important;
        color: #fff !important;
    }
    
    .btn-outline {
        border: 2px solid #000 !important;
        color: #000 !important;
    }
}

/* === REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    .fade-in,
    .slide-up,
    .scale-in {
        animation: none !important;
    }
}