/* =========================================================
   RESPONSIVE
   Loaded last so it can adjust the shared layers.
========================================================= */

/* =========================================================
   <= 1100px  — tighter shell
========================================================= */

@media (max-width:1100px){

    :root{
        --sidebar-width:240px;
    }

    .nav-links a{
        padding:9px 10px;
        font-size:.875rem;
    }

    .brand-text span{
        display:none;
    }
}

/* =========================================================
   <= 960px  — stack the two column layouts
========================================================= */

@media (max-width:960px){

    .hero-content,
    .about-wrapper,
    .contact-grid{
        grid-template-columns:1fr;
    }

    .hero-content{
        gap:var(--space-2xl);
    }

    .hero-card{
        max-width:520px;
        width:100%;
        margin-inline:auto;
    }

    .about-card{
        order:-1;
    }

    .footer-grid{
        grid-template-columns:1fr 1fr;
        gap:var(--space-xl);
    }

    /* ---- Mobile navigation ---- */

    .menu-btn{
        display:grid;
        place-items:center;
        margin-left:auto;
    }

    .nav-links{
        position:fixed;
        top:calc(var(--navbar-height) + var(--logo-strip-height));
        left:0;
        right:0;
        flex-direction:column;
        align-items:stretch;
        gap:2px;
        margin:0;
        padding:var(--space-sm) clamp(20px,5vw,40px) var(--space-md);
        background:rgba(255,255,255,.96);
        backdrop-filter:saturate(180%) blur(20px);
        -webkit-backdrop-filter:saturate(180%) blur(20px);
        border-bottom:1px solid var(--border);
        box-shadow:var(--shadow-lg);
        transform:translateY(-12px);
        opacity:0;
        visibility:hidden;
        transition:opacity var(--transition),
                   transform var(--transition),
                   visibility var(--transition);
        max-height:calc(100vh - var(--navbar-height) - var(--logo-strip-height));
        overflow-y:auto;
    }

    .nav-links.active{
        opacity:1;
        visibility:visible;
        transform:translateY(0);
    }

    .nav-links a{
        padding:14px 12px;
        font-size:var(--body);
        font-weight:500;
        border-radius:var(--radius-xs);
        border-bottom:1px solid var(--border-soft);
    }

    .nav-links li:last-child a{
        border-bottom:none;
    }

    .nav-links a::after{
        display:none;
    }

    .nav-actions{
        display:none;
    }

    /* Register + Login are appended to the mobile menu by main.js */

    .nav-links .mobile-actions{
        display:flex;
        gap:10px;
        padding-top:var(--space-sm);
        border-bottom:none;
    }

    .nav-links .mobile-actions .btn{
        flex:1;
        height:46px;
    }

    /* The action buttons are cloned into the mobile menu, where the
       generic ".nav-links a" colour would otherwise repaint their
       text dark. Keep the primary button (e.g. "My Dashboard") white
       on its blue fill, and let the secondary keep its own colour. */

    .nav-links .mobile-actions .btn-primary,
    .nav-links .mobile-actions .btn-primary i{
        color:var(--text-invert);
    }

    .nav-links .mobile-actions .btn-secondary,
    .nav-links .mobile-actions .btn-secondary i{
        color:var(--primary);
    }
}

/* =========================================================
   <= 860px  — dashboards go single column
========================================================= */

@media (max-width:860px){

    .sidebar,
    .admin-sidebar,
    .student-sidebar{
        position:fixed;
        top:0;
        bottom:0;
        left:0;
        transform:translateX(-100%);
        transition:transform var(--transition);
        z-index:var(--z-modal);
        box-shadow:var(--shadow-xl);
    }

    .sidebar.active,
    .admin-sidebar.active,
    .student-sidebar.active{
        transform:translateX(0);
    }

    .dashboard-layout,
    .admin-layout{
        grid-template-columns:1fr;
    }

    .dashboard-main,
    .admin-main,
    .main-content,
    .admin-content{
        margin-left:0;
        width:100%;
    }

    .admin-mobile-topbar,
    .menu-toggle,
    .admin-menu-button{
        display:flex;
    }

    .sidebar-backdrop{
        position:fixed;
        inset:0;
        background:rgba(11,17,32,.45);
        backdrop-filter:blur(2px);
        opacity:0;
        visibility:hidden;
        transition:opacity var(--transition),visibility var(--transition);
        z-index:calc(var(--z-modal) - 1);
    }

    .sidebar-backdrop.active{
        opacity:1;
        visibility:visible;
    }

    .dashboard-stats,
    .admin-stats{
        grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    }
}

/* =========================================================
   <= 720px
========================================================= */

@media (max-width:720px){

    :root{
        --navbar-height:64px;
        --input-height:48px;
        --button-height:46px;
    }

    .countdown{
        grid-template-columns:repeat(2,1fr);
    }

    .features-grid,
    .rules-grid,
    .stats-grid{
        grid-template-columns:1fr;
    }

    .footer-grid{
        grid-template-columns:1fr;
        gap:var(--space-lg);
        text-align:left;
    }

    .footer-bottom{
        flex-direction:column;
        text-align:center;
    }

    .timeline-wrapper{
        padding-left:30px;
    }

    .timeline-dot{
        left:-26px;
    }

    .timeline-card:hover{
        transform:none;
    }

    .about-list li:hover{
        transform:none;
    }

    .form-grid,
    .input-row,
    .detail-grid,
    .team-info-grid,
    .evaluation-grid{
        grid-template-columns:1fr !important;
    }

    .content-header,
    .page-header,
    .card-header,
    .section-header,
    .admin-page-header,
    .admin-section-header{
        flex-direction:column;
        align-items:flex-start;
    }
}

/* =========================================================
   <= 520px
========================================================= */

@media (max-width:520px){

    .logo-strip img{
        height:30px;
    }

    .brand img{
        height:34px;
        width:34px;
    }

    .brand-text h3{
        font-size:.85rem;
    }

    .hero-buttons{
        flex-direction:column;
        align-items:stretch;
    }

    .hero-buttons .btn{
        width:100%;
    }

    .hero-badge{
        font-size:.75rem;
        padding:7px 13px;
    }

    .event-card,
    .about-card{
        padding:22px 18px;
    }

    .count-item{
        padding:18px 10px;
    }

    .dashboard-stats,
    .admin-stats{
        grid-template-columns:1fr;
    }

    .quick-actions{
        grid-template-columns:1fr !important;
    }

    .faq-question{
        padding:16px 18px;
        font-size:var(--body-sm);
    }

    .faq-answer p{
        padding:0 18px 18px;
    }
}

/* =========================================================
   PRINT
========================================================= */

@media print{

    .site-header,
    .auth-navbar,
    .dashboard-topbar,
    .admin-topbar,
    .admin-mobile-topbar,
    .logo-strip,
    .footer,
    .sidebar,
    .admin-sidebar,
    .student-sidebar,
    .nav-actions,
    .menu-btn,
    .quick-actions,
    .page-loader{
        display:none !important;
    }

    body{
        background:#fff;
        color:#000;
    }

    .dashboard-main,
    .admin-main,
    .main-content{
        margin:0 !important;
        width:100% !important;
    }

    .card,
    .content-card,
    .dashboard-card,
    .admin-stat-card{
        box-shadow:none !important;
        border:1px solid #ddd !important;
        break-inside:avoid;
    }
}