/* Responsive Layout Styles */

/* Tablet and smaller desktop */
@media (max-width: 992px) {
    .container {
        padding: 0 15px;
    }
    
    .col-md-6 {
        width: 50%;
    }
    
    .col-md-12 {
        width: 100%;
    }
    
    h1 {
        font-size: 2.2rem;
    }
    
    h2 {
        font-size: 1.8rem;
    }
    
    .filter-controls {
        justify-content: center;
    }
    
    .sort-controls {
        margin-left: 0;
        margin-top: 10px;
        width: 100%;
        justify-content: center;
    }
    
    .results-info {
        text-align: center;
    }
}

/* Medium devices (tablets) */
@media (max-width: 768px) {
    /* Control bar responsiveness */
    .control-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }
    
    .controls-right {
        justify-content: space-between;
    }
    
    .search-bar-wrapper {
        width: 100%;
        max-width: 100%;
    }
    
    .filter-group, .version-filter-wrapper, .reset-button-container {
        margin: 10px;
    }
    
    #layout-toggle .toggle-button {
        padding: 6px 10px;
        min-width: 36px;
    }
    
    /* Header navigation responsiveness */
    .header-nav {
        gap: 10px;
        padding: 12px 0;
    }
    
    .header-nav-link {
        font-size: 14px;
        padding: 5px 12px;
    }
    
    /* Layout adjustments */
    .os-sections.grid-layout {
        grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    }
    
    .container {
        padding: 0 10px;
    }
    
    .col-sm-12 {
        width: 100%;
    }
    
    .col-sm-6 {
        width: 50%;
    }
    
    h1 {
        font-size: 1.8rem;
    }
    
    h2 {
        font-size: 1.5rem;
    }
    
    .distro-title {
        font-size: 1.2rem;
    }
    
    .distro-title .subtitle {
        font-size: 1rem;
        display: block;
        margin-left: 0;
        margin-top: 5px;
    }
    
    .search-controls {
        padding: 10px;
    }
    
    .filter-button {
        font-size: 12px;
        padding: 6px 10px;
    }
    
    .footer-content {
        flex-direction: column;
        text-align: center;
    }
    
    .footer-links {
        margin-top: 15px;
        justify-content: center;
    }
    
    /* Title card styles - not currently used */
    .title-card {
        max-width: 350px;
        padding: 12px;
    }
    
    .title-card .header-logo {
        width: 60px;
        height: 60px;
    }
    
    .title-card .title {
        font-size: 2rem;
    }
    
    .title-card .tagline {
        font-size: 0.9rem;
    }
    
    .header-card {
        margin-top: 20px;
        padding: 12px;
    }
    
    .header-card .header-logo {
        width: 50px;
        height: 50px;
        margin-right: 10px;
    }
    
    .header-card .title {
        font-size: 2rem;
    }
    
    .header-card .tagline {
        font-size: 0.9rem;
    }
}

/* Small devices (landscape phones) */
@media (max-width: 600px) {
    /* Header navigation responsiveness */
    .header-nav {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .header-nav-link {
        font-size: 13px;
        padding: 4px 10px;
        flex-grow: 1;
        text-align: center;
    }
    
    /* Layout and structure */
    .os-sections.grid-layout {
        grid-template-columns: 1fr;
    }
    
    .title-size {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .raw-link p {
        margin-bottom: 5px;
    }
    
    .search-toggle-container {
        flex-direction: column;
        gap: 15px;
    }
    
    /* Button containers */
    .button-container {
        width: 100%;
        justify-content: center;
        padding: 15px 10px;
        flex-direction: column;
        align-items: center;
    }
    
    .toggle-buttons {
        flex-wrap: wrap;
        justify-content: center;
        margin: 5px 0;
    }
    
    .toggle-button {
        margin: 5px;
    }
    
    .version-filter-wrapper {
        width: 100%;
        margin: 10px 0;
    }
    
    #version-filter {
        width: 100%;
    }
    
    .filter-group {
        margin: 10px 0;
        width: 100%;
    }
}

/* Extra small devices (phones) */
@media (max-width: 480px) {
    .controls-right {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }
    
    .version-filter-wrapper, 
    .filter-group,
    .reset-button-container {
        justify-content: center;
    }
    
    #reset-button {
        width: 100%;
        border-radius: 4px;
    }
    
    /* Title card styles - not currently used */
    .title-card {
        max-width: 280px;
        padding: 10px;
    }
    
    .title-card .header-logo {
        width: 50px;
        height: 50px;
    }
    
    .title-card .title {
        font-size: 1.8rem;
    }
    
    .title-card .tagline {
        font-size: 0.8rem;
    }
    
    .header-card {
        margin-top: 15px;
        padding: 10px;
    }
    
    .header-card .header-brand {
        flex-direction: column;
    }
    
    .header-card .header-logo {
        width: 40px;
        height: 40px;
        margin-right: 0;
        margin-bottom: 8px;
    }
    
    .header-card .title {
        font-size: 1.8rem;
    }
    
    .header-card .tagline {
        font-size: 0.8rem;
    }
}

/* Very small devices */
@media (max-width: 400px) {
    .title {
        font-size: 2rem;
    }
    
    .tagline {
        font-size: 1rem;
    }
}

/* Small mobile devices */
@media (max-width: 576px) {
    .container {
        padding: 0 5px;
    }
    
    .col-xs-12 {
        width: 100%;
    }
    
    h1 {
        font-size: 1.5rem;
    }
    
    .filter-controls {
        gap: 5px;
    }
    
    .filter-button {
        font-size: 11px;
        padding: 4px 8px;
    }
    
    .filter-button i {
        margin-right: 3px;
    }
    
    .search-input {
        font-size: 14px;
        padding: 8px 10px;
    }
    
    .clear-search {
        font-size: 16px;
    }
    
    .sort-label {
        font-size: 12px;
    }
    
    .sort-select {
        font-size: 12px;
        padding: 4px 8px;
    }
    
    .results-info {
        font-size: 12px;
    }
    
    .distro-card {
        padding: 10px;
    }
    
    .download-section, 
    .card-content,
    .os-link {
        width: 100%;
        box-sizing: border-box;
    }
}