/* ========================================
   RESPONSIVE LAYOUT & MEDIA QUERIES
   ======================================== */

/* Tablet & Smaller Devices (max-width: 968px) */
@media (max-width: 968px) {
    /* Container adjusts */
    .container {
        padding: 0 var(--space-md);
    }

    /* Grid Layouts to 1 column */
    .hero-content,
    .about-content,
    .contact-content {
        grid-template-columns: 1fr !important;
        text-align: center;
        gap: var(--space-xl);
    }

    /* Navigation Menu - Mobile Slide-in Drawer */
    .nav-menu {
        position: fixed;
        right: -100%;
        top: 0;
        width: 300px;
        height: 100vh;
        background: rgba(10, 10, 15, 0.75);
        backdrop-filter: blur(25px);
        -webkit-backdrop-filter: blur(25px);
        border-left: 1px solid var(--glass-border);
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        padding: 100px var(--space-lg) var(--space-xl);
        gap: var(--space-lg);
        transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 999;
        box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5);
    }

    .nav-menu.active {
        right: 0;
    }

    /* Hamburger Menu Button */
    .hamburger {
        display: flex !important;
        position: relative;
        z-index: 1000;
        width: 30px;
        height: 25px;
        flex-direction: column;
        justify-content: space-between;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
    }

    .hamburger span {
        width: 100%;
        height: 3px;
        background: var(--text-primary);
        border-radius: 2px;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                    opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        transform-origin: center;
    }

    /* Animated Hamburger to X */
    .hamburger.active span:nth-child(1) {
        transform: translateY(11px) rotate(45deg);
    }

    .hamburger.active span:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active span:nth-child(3) {
        transform: translateY(-11px) rotate(-45deg);
    }

    /* Profile Frame Adjustment */
    .profile-container {
        width: 280px !important;
        height: 280px !important;
        margin: 0 auto;
    }

    .hero-image-wrapper {
        margin-top: var(--space-xl);
    }
}

/* Mobile Landscape & Portrait (max-width: 768px) */
@media (max-width: 768px) {
    /* Dynamic scaling for standard sections */
    section {
        padding: var(--space-xl) 0 !important;
    }

    /* Hero section specific mobile overrides */
    .hero {
        padding-top: var(--header-height);
        padding-bottom: var(--space-xl);
    }

    .hero-buttons {
        justify-content: center;
    }

    /* Skills achievements grids */
    .achievement-stats {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--space-md);
    }

    .stat-card {
        padding: var(--space-md) !important;
    }

    /* GitHub activity & calendar card */
    .github-grid {
        grid-template-columns: 1fr !important;
        gap: var(--space-lg);
    }

    /* Certification tabs */
    .cert-filters-modern {
        gap: var(--space-xs);
    }

    .cert-filter-btn {
        padding: 0.5rem 1.2rem;
        font-size: var(--font-size-xs);
    }
}

/* Tiny Mobile Screens (max-width: 480px) */
@media (max-width: 480px) {
    /* Spacing adjustments */
    .container {
        padding: 0 var(--space-sm);
    }

    /* Buttons go full width */
    .hero-buttons {
        flex-direction: column !important;
        width: 100%;
        gap: var(--space-xs) !important;
    }

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

    /* Skill metrics stack */
    .achievement-stats {
        grid-template-columns: 1fr !important;
        max-width: 300px;
        margin-left: auto;
        margin-right: auto;
    }

    /* LeetCode stats card internal layout */
    .leetcode-body {
        grid-template-columns: 1fr !important;
        text-align: center;
        gap: var(--space-lg) !important;
    }

    .leet-difficulty-list {
        width: 100%;
    }

    /* Recruiter Quick View layout */
    .recruiter-quick-card {
        width: 100% !important;
        max-width: 290px;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    .recruiter-details {
        padding-left: 0;
    }

    /* Certification carousel image scale */
    .cert-slide {
        flex: 0 0 240px !important;
    }

    .cert-image-container {
        height: 150px !important;
    }
}