/* surfaces-responsive.css — extracted component-owned responsive overrides */

@media (max-width: 1280px) {
    .students-directory-view #studentsList {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1024px) {


    #studentsList {
        border-radius: 8px;
    }

    .student-card {
        grid-template-columns: minmax(0, 1fr) 40px;
    }


    .students-directory-top-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .students-directory-view #studentsList {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .students-directory-filters {
        grid-template-columns: minmax(0, 1fr) minmax(140px, 1fr);
    }

    .students-directory-filters .students-directory-search-input {
        grid-column: 1 / -1;
    }

    .students-directory-view .student-card {
        display: flex;
        grid-template-columns: none;
    }

    .staff-directory-view .students-directory-filters {
        grid-template-columns: minmax(0, 1fr);
    }

    .staff-directory-view .students-directory-filters .students-directory-search-input {
        grid-column: auto;
    }

    .staff-directory-view .students-directory-stats-grid {
        grid-template-columns: minmax(0, 320px);
    }
}

@media (max-width: 768px) {
    .students-directory-stats-grid {
        grid-template-columns: 1fr;
    }

    .students-directory-filters {
        grid-template-columns: 1fr;
    }

    .students-directory-view #studentsList {
        grid-template-columns: 1fr;
    }

    .students-directory-footer {
        flex-direction: column;
        align-items: flex-start;
    }

    .students-directory-pagination {
        flex-wrap: wrap;
    }

    .classroom-detail-view .classroom-detail-header {
        align-items: flex-start;
    }

    .classroom-detail-view .students-directory-title {
        font-size: clamp(28px, 9vw, 34px);
    }

    .classroom-detail-view .classroom-detail-hero-card {
        min-height: 156px;
    }

    .classroom-detail-view .classroom-detail-summary,
    .classroom-detail-view .classroom-detail-actions {
        padding: var(--space-5);
    }
}