/**
 * responsive.css – Media Queries
 *
 * Mobile-first approach.  Breakpoints:
 *   • Mobile   : < 768px   → single column
 *   • Tablet   : 768–1023px → two columns
 *   • Desktop  : ≥ 1024px   → three columns, full layout
 *
 * @package GiaSuAnhSao
 */

/* ===================================================================
   1. MOBILE  (max-width: 767.98px)
   =================================================================== */

@media (max-width: 767.98px) {

    /* ── Typography ──────────────────────────────────── */
    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.3rem; }
    h3 { font-size: 1.1rem; }

    /* ── Top bar ─────────────────────────────────────── */
    .top-bar { display: none; }

    /* ── Navbar ──────────────────────────────────────── */
    .navbar .navbar-brand img { height: 34px; }
    .navbar .nav-link { padding: .55rem 0 !important; }


    /* ── Hero ────────────────────────────────────────── */
    .hero-section {
        padding: 2rem 0;
    }
    .hero-section h1 { font-size: 1.4rem; }
    .hero-section p.lead { font-size: .88rem; }
    .hero-stats {
        gap: .75rem;
    }
    .hero-stats .stat-item .stat-number {
        font-size: 1.3rem;
    }

    /* ── Sidebars ────────────────────────────────────── */
    .sidebar-left,
    .sidebar-right {
        margin-bottom: 1.5rem;
    }

    /* ── Tutor cards ─────────────────────────────────── */
    .tutor-card .tutor-stats {
        gap: .75rem;
    }

    /* ── Forms ───────────────────────────────────────── */
    .form-actions {
        flex-direction: column;
    }
    .form-actions .btn { width: 100%; }

    /* ── Section headers ─────────────────────────────── */
    .section-header h2 { font-size: 1.2rem; }

    /* ── Footer ──────────────────────────────────────── */
    .footer .footer-col {
        margin-bottom: 1.5rem;
    }
    .footer .footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: .5rem;
    }

    /* ── Pagination ──────────────────────────────────── */
    .pagination .page-link { padding: .35rem .55rem; font-size: .8rem; }

    /* ── Tables  – horizontal scroll ─────────────────── */
    .table-responsive { margin: 0 -.75rem; }

    /* ── Back-to-top button ──────────────────────────── */
    .back-to-top { bottom: 1rem; right: 1rem; width: 36px; height: 36px; font-size: .85rem; }
}

/* ===================================================================
   2. TABLET  (768px – 1023.98px)
   =================================================================== */

@media (min-width: 768px) and (max-width: 1023.98px) {

    /* ── Typography ──────────────────────────────────── */
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.45rem; }

    /* ── Hero ────────────────────────────────────────── */
    .hero-section { padding: 2.5rem 0; }
    .hero-section h1 { font-size: 1.65rem; }

    /* ── Footer ──────────────────────────────────────── */
    .footer .row > [class*="col-"] {
        margin-bottom: 1.25rem;
    }
}

/* ===================================================================
   3. DESKTOP  (≥ 1024px)
   =================================================================== */

@media (min-width: 1024px) {

    /* ── Container max-width tweak ───────────────────── */
    .container { max-width: 1200px; }

    /* ── Hero ────────────────────────────────────────── */
    .hero-section { padding: 3.5rem 0; }

    /* ── Stat cards row ──────────────────────────────── */
    .stats-row { display: flex; gap: 1.25rem; }
    .stats-row > * { flex: 1; }
}

/* ===================================================================
   4. LARGE DESKTOP  (≥ 1280px)
   =================================================================== */

@media (min-width: 1280px) {
    .container { max-width: 1260px; }
}

/* ===================================================================
   5. SPECIFIC COMPONENT BREAKPOINTS
   =================================================================== */

/* ── Navbar collapse point (Bootstrap default at 992px) ── */
@media (max-width: 991.98px) {
    .navbar-collapse {
        max-height: 80vh;
        overflow-y: auto;
    }
}

/* ── Hero search bar stacking on small screens ────────── */
@media (max-width: 575.98px) {
    .hero-search .input-group {
        flex-direction: column;
    }
    .hero-search .input-group .form-control,
    .hero-search .input-group .form-select,
    .hero-search .input-group .btn {
        border-radius: .4rem !important;
        width: 100%;
    }
    .hero-search .input-group .form-control,
    .hero-search .input-group .form-select {
        margin-bottom: .5rem;
    }
}

/* ── Detail page – two-column layout on mobile ────────── */
@media (max-width: 767.98px) {
    .detail-info-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Tutor detail sidebar ─────────────────────────────── */
@media (max-width: 991.98px) {
    .tutor-detail-sidebar {
        margin-top: 1.5rem;
    }
}

/* ===================================================================
   6. PRINT
   =================================================================== */

@media print {
    .top-bar,
    .navbar,
    .sidebar-left,
    .sidebar-right,
    .footer,
    .back-to-top,
    .btn,
    .pagination {
        display: none !important;
    }
    body {
        font-size: 12pt;
        color: #000;
        background: #fff;
    }
    .container {
        max-width: 100%;
        padding: 0;
    }
    a { color: #000; text-decoration: underline; }
    .class-card,
    .tutor-card,
    .gs-card {
        break-inside: avoid;
        border: 1px solid #ccc;
        box-shadow: none;
        transform: none;
    }
}

/* ===================================================================
   7. 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;
    }
}