/* Responsive Adjustments
 * Supplements layout.css breakpoints with content-specific responsive rules
 * Layout breakpoints: 1200px (hide TOC), 992px (collapse sidebar), 576px (mobile)
 */

/* Tablet: adjust content grids and cards */
@media (max-width: 992px) {
    /* Home page adjustments */
    .home-sections {
        grid-template-columns: 1fr;
    }

    .update-item {
        flex-direction: column;
    }

    .update-date {
        margin-bottom: 0.5rem;
    }

    /* Color components */
    .color-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 1rem;
    }

    .color-swatch {
        height: 100px;
    }

    .color-info {
        padding: 0.75rem;
    }
}

/* Small mobile */
@media (max-width: 576px) {
    .page-title {
        font-size: 1.5rem;
    }

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

    .color-grid {
        grid-template-columns: 1fr;
    }

    .component-subsection {
        padding: 1rem;
        border-radius: 8px;
    }

    .component-subtitle {
        font-size: 1.25rem;
    }

    .specs-grid {
        grid-template-columns: 1fr;
    }

    .home-sections {
        gap: 1rem;
    }

    .home-section {
        padding: 1rem;
    }
}