/* ========================================
   MOBILE VIEW STYLES - Amey Joshi Portfolio
   Max-width: 1024px
   ======================================== */

@media (max-width: 1024px) {
    /* ========================================
       NAVIGATION - HORIZONTAL LAYOUT
       ======================================== */

    /* Move AJ logo to left corner */
    .centered-logo {
        position: fixed !important;
        top: 20px !important;
        left: 20px !important;
        right: auto !important;
        transform: none !important;
        z-index: 1000 !important;
    }

    .centered-logo .pixel-text {
        font-size: 1rem !important;
    }

    /* Create horizontal navigation at top right */
    .vertical-nav {
        position: fixed !important;
        top: 20px !important;
        right: 20px !important;
        left: auto !important;
        transform: none !important;
        background: transparent !important;
        padding: 0 !important;
        border: none !important;
    }

    .nav-items {
        display: flex !important;
        flex-direction: row !important;
        gap: 3px !important;
        align-items: center !important;
    }

    .nav-item {
        padding: 4px 6px !important;
        margin: 0 !important;
        font-size: 0.33rem !important;
        background: transparent !important;
        border: none !important;
    }

    .nav-item.active {
        font-size: 0.33rem !important;
        transform: scale(1) !important;
    }

    .vertical-nav .nav-item.active .nav-label {
        font-size: 0.33rem !important;
    }

    .nav-dot {
        display: none !important;
    }

    .vertical-nav .nav-label {
        display: inline !important;
        font-size: 0.33rem !important;
    }

    .nav-arrow {
        display: none !important;
    }

    .depth-indicator {
        display: none !important;
    }

    /* Remove left padding from sections since sidebar is gone */
    section {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* ========================================
       UNIFORM SCALING FOR ALL SECTIONS
       ======================================== */
    .hero-content,
    .about-content,
    .skills-grid,
    .projects-grid,
    .contact-content {
        transform: scale(0.7) !important;
        transform-origin: top center !important;
    }

    /* ========================================
       ABOUT SECTION
       ======================================== */

    /* Push down from AJ logo */
    #about .section-title {
        margin-top: 60px !important;
        margin-bottom: 30px !important;
    }

    /* About content container */
    .about-content {
        margin-top: 10px !important;
        margin-bottom: -200px !important;
        transform: scale(0.6) !important;
        transform-origin: top center !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    /* About boxes (Education, Profile, Location) */
    .about-box {
        transform: none !important;
        margin-bottom: 0px !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 10px !important;
    }

    .about-box .pixel-icon {
        font-size: 1.2rem !important;
        margin-bottom: 5px !important;
    }

    .about-box h3 {
        margin-top: 3px !important;
        margin-bottom: 5px !important;
    }

    .about-box p {
        margin-top: 3px !important;
        margin-bottom: 3px !important;
    }

    .about-box::after {
        display: none !important;
    }

    /* Achievement badge */
    .achievement {
        margin-top: 12px !important;
        transform: scale(0.6) !important;
        transform-origin: top center !important;
        width: 120% !important;
        max-width: 120% !important;
        padding: 10px !important;
        margin-left: -10% !important;
    }

    /* ========================================
       PROJECTS SECTION
       ======================================== */

    .projects-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 15px !important;
        width: 90% !important;
        margin: 0 auto !important;
    }

    .project-column,
    .project-column-center {
        display: contents !important;
    }

    .project-card {
        aspect-ratio: 1 / 1 !important;
        width: 100% !important;
        height: auto !important;
        box-sizing: border-box !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
        text-align: center !important;
        overflow: visible !important;
        position: relative !important;
    }

    .project-header {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        padding: 10px 8px !important;
        flex-grow: 1 !important;
        min-height: 0 !important;
    }

    .project-icon {
        font-size: 1.3rem !important;
        margin: 0 !important;
    }

    .project-card h3 {
        font-size: 0.4rem !important;
        line-height: 1.3 !important;
        word-wrap: break-word !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .project-btn {
        width: 100% !important;
        height: 35px !important;
        min-height: 35px !important;
        max-height: 35px !important;
        padding: 0 8px !important;
        font-size: 0.38rem !important;
        border-top: 2px solid rgba(157, 78, 221, 0.5) !important;
        border-left: none !important;
        border-right: none !important;
        border-bottom: none !important;
        border-radius: 0 !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .project-tags,
    .project-description,
    .project-features {
        display: none !important;
    }

    /* ========================================
       SKILLS SECTION
       ======================================== */

    .skills-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        column-gap: 15px !important;
        width: 90% !important;
        margin: 0 auto !important;
        transform: scale(0.7) !important;
        align-items: start !important;
    }

    .skill-column,
    .skill-column-center {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    .skill-category {
        aspect-ratio: unset !important;
        width: 100% !important;
        height: auto !important;
        box-sizing: border-box !important;
        padding: 5px !important;
        padding-bottom: 5px !important;
        margin: 0 !important;
        margin-bottom: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: center !important;
        text-align: center !important;
        overflow: hidden !important;
        transform: none !important;
        align-self: start !important;
    }

    .skill-category::before,
    .skill-category::after,
    .skill-category.pixel-box::before,
    .skill-category.pixel-box::after {
        display: none !important;
        content: none !important;
    }

    .skill-category h3 {
        font-size: 0.4rem !important;
        line-height: 1.3 !important;
        margin: 0 0 8px 0 !important;
        word-wrap: break-word !important;
        max-width: 100% !important;
        flex-shrink: 0 !important;
    }

    .skill-tags {
        display: flex !important;
        flex-direction: column !important;
        gap: 3px !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .programming-card {
        margin-bottom: 0px !important;
    }

    .programming-card .skill-tags {
        gap: 1px !important;
    }

    .skill-tag {
        font-size: 0.35rem !important;
        padding: 4px 6px !important;
        line-height: 1.2 !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        text-align: center !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        flex: 0 0 auto !important;
        box-sizing: border-box !important;
        display: block !important;
    }

    /* ========================================
       CONTACT SECTION
       ======================================== */

    .contact-content {
        width: 100% !important;
        padding: 20px 0 !important;
    }

    .contact-box {
        max-width: 850px !important;
        width: 850px !important;
    }

    /* ========================================
       MODAL
       ======================================== */

    .modal {
        padding: 10px !important;
    }

    .modal-content {
        max-width: 95vw !important;
        width: 95vw !important;
        max-height: 85vh !important;
        overflow-y: auto !important;
        padding: 15px !important;
        box-sizing: border-box !important;
    }

    .modal-content h2 {
        font-size: 0.7rem !important;
        margin-top: 20px !important;
        word-wrap: break-word !important;
    }

    .modal-content h3 {
        font-size: 0.5rem !important;
        word-wrap: break-word !important;
    }

    .modal-content p,
    .modal-content li {
        font-size: 0.4rem !important;
        line-height: 1.5 !important;
        word-wrap: break-word !important;
    }

    .close-modal {
        top: 10px !important;
        right: 10px !important;
        font-size: 1.5rem !important;
    }

    #modalContent {
        overflow-x: hidden !important;
        word-wrap: break-word !important;
    }
}