/* Mobile styles — loaded separately from style.css for decoupled maintenance.
   Everything here is inside a single max-width: 430px media query. */

@media (max-width: 1024px) {
    :root {
        --font-size-title: 8vw;
        --font-size-text: 3vw;
    }

    body {
        cursor: auto;
    }

    /* Hide desktop projects items on mobile */
    #page-projects .content-item {
        display: none !important;
    }

    /* Resume page: blank on mobile */
    #page-resume.content-grid.active {
        display: block !important;
    }

    #page-resume .content-item {
        display: none !important;
    }

    /* About page: hidden on mobile/tablet */
    #page-about .content-item {
        display: none !important;
    }

    /* Projects becomes a snap-scroll container on mobile (only when active) */
    #page-projects.content-grid.active {
        display: block !important;
        overflow-y: auto;
        scroll-snap-type: y mandatory;
        -webkit-overflow-scrolling: touch;
        pointer-events: auto;
    }

    /* Each project section = one full viewport */
    .mobile-project-section {
        width: 100%;
        height: 100vh;
        height: 100dvh;
        scroll-snap-align: start;
        position: relative;
        display: block;
        border-top: 1px solid #E0E0E0;
    }

    .mobile-project-section:last-child {
        border-bottom: 1px solid #E0E0E0;
    }

    /* Per-section grid lines */
    .mobile-project-section projects-grid {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    /* Content grid inside each section */
    .mobile-project-content {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(6, 1fr);
        gap: 1px;
        z-index: 1;
        pointer-events: none;
    }

    /* Mobile project items — shared layout */
    .mobile-project-content > div {
        filter: grayscale(100%);
        opacity: 0.25;
        transition: filter 2.5s ease, opacity 2.5s ease;
    }

    .mobile-project-section.revealed .mobile-project-content > div {
        filter: none;
        opacity: 1;
    }

    .mp-title {
        grid-column: 3 / 5;
        grid-row: 1;
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
        font-family: var(--font-main);
        font-weight: 200;
        font-size: var(--font-size-title);
        color: #000;
    }

    .mp-image {
        grid-column: 1 / 5;
        grid-row: 2 / 5;
        overflow: hidden;
    }

    .mp-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .mp-tech {
        grid-column: 1 / 3;
        grid-row: 5;
        font-family: var(--font-main);
        font-weight: 300;
        font-size: var(--font-size-text);
        color: #000;
        display: flex;
        align-items: flex-start;
        line-height: 1.4;
    }

    .mp-date {
        grid-column: 3 / 5;
        grid-row: 5;
        font-family: var(--font-main);
        font-weight: 300;
        font-size: var(--font-size-text);
        color: #000;
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
        text-align: right;
        line-height: 1.4;
    }

    .mp-desc {
        grid-column: 1 / 5;
        grid-row: 6;
        font-family: var(--font-main);
        font-weight: 300;
        font-size: var(--font-size-text);
        color: #000;
        display: flex;
        align-items: flex-start;
        line-height: 1.4;
    }

    .cursor {
        display: none;
    }

    .header {
        display: none;
    }

    .content-grid {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(4, 1fr);
    }

    .title-module {
        grid-column: 1 / -1;
        grid-row: 2 / 3;
        height: 100%;
        justify-content: flex-start;
        gap: 1cqi;
    }

    .top-row {
        width: 100%;
        font-size: 10cqi;
    }

    .bottom-row {
        width: 100%;
        font-size: 10cqi;
        justify-content: flex-start;
    }

    .bio-module {
        grid-column: 1 / 3;
        grid-row: 3 / 5;
        height: 100%;
    }

    .bio-module p {
        font-size: 9cqi;
        text-align: left;
    }

    .portrait-module {
        grid-column: 3 / -1;
        grid-row: 2 / -1;
        justify-content: center;
        align-items: flex-end;
        overflow: visible;
    }

    .portrait-module img {
        width: 100%;
        height: auto;
    }

    /* Mobile nav */
    .mobile-nav {
        display: block;
    }

    .mobile-nav-toggle {
        position: fixed;
        top: 0;
        right: 0;
        width: calc((100vw - 3px) / 8);
        height: calc((100vw - 3px) / 8);
        padding: 0;
        border: none;
        background: none;
        z-index: 20;
        cursor: pointer;
        perspective: 400px;
    }

    .mobile-nav-triangle {
        display: block;
        width: 100%;
        height: 100%;
        fill: var(--color-primary);
        pointer-events: none;
        transition: fill 400ms ease, transform 600ms ease;
        transform-origin: 50% 50%;
    }

    .mobile-nav.open .mobile-nav-triangle {
        fill: #333;
        transform: rotate3d(1, 1, 0, 180deg);
    }

    .mobile-nav-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 15;
        opacity: 0;
        pointer-events: none;
        transition: opacity 300ms ease;
    }

    .mobile-nav.open .mobile-nav-overlay {
        opacity: 1;
        pointer-events: auto;
    }

    .mobile-nav.open ~ .page,
    .mobile-nav.grid-animating ~ .page {
        visibility: hidden;
        overflow: hidden !important;
    }

    .mobile-nav-item {
        position: absolute;
        font-family: var(--font-main);
        font-weight: 400;
        font-size: 6vw;
        color: #000000;
        text-decoration: none;
        white-space: nowrap;
        line-height: 1;
        width: 50%;
        height: 25%;
        display: flex;
        align-items: flex-start;
        opacity: 0;
        transition: color 500ms ease, opacity 400ms ease;
    }

    .mobile-nav.items-visible .mobile-nav-item {
        opacity: 1;
    }

    .mobile-nav-item.active,
    .mobile-nav-item.filling {
        color: #FFFFFF;
        font-weight: 700;
    }

    /* KARL KALN: left edge flush to screen, bottom at 1st H line */
    .mobile-nav-item[data-pos="karl-kaln"] {
        left: 0;
        top: 0;
        width: calc(50% - 0.5px);
        height: 25%;
        align-items: flex-end;
        justify-content: flex-start;
    }

    /* PROJECTS: right edge at screen right, top at 1st H line */
    .mobile-nav-item[data-pos="projects"] {
        left: calc(50% + 0.5px);
        top: calc(25% + 0.5px);
        width: calc(50% - 0.5px);
        height: 25%;
        align-items: flex-start;
        justify-content: flex-end;
    }

    /* RESUME: left edge at screen left, top at 2nd H line */
    .mobile-nav-item[data-pos="resume"] {
        left: 0;
        top: calc(50% + 0.5px);
        width: 50%;
        height: 25%;
        align-items: flex-start;
        justify-content: flex-start;
    }

    /* Contact page: 4x4 mobile grid with repositioned text */
    #page-contact.content-grid {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(4, 1fr);
    }

    .contact-email-module {
        grid-column: 1 / 4;
        grid-row: 1;
        align-items: flex-end;
        justify-content: flex-start;
    }

    #page-contact .contact-email {
        font-size: 11vw;
    }

    #page-contact .contact-phone-module {
        grid-column: 3 / 5;
        grid-row: 3;
        align-items: flex-start;
        justify-content: flex-end;
    }

    #page-contact .contact-phone {
        font-size: 5vw;
    }

    #page-contact .contact-address-module {
        grid-column: 1 / 5;
        grid-row: 4;
        align-items: flex-start;
        justify-content: flex-start;
    }

    #page-contact .contact-address {
        font-size: 5vw;
    }

    /* CONTACT (about position): left edge at middle V line, top at 3rd H line */
    .mobile-nav-item[data-pos="about"] {
        left: calc(50% + 0.5px);
        top: calc(75% + 0.5px);
        width: calc(50% - 0.5px);
        height: calc(25% - 0.5px);
        align-items: flex-start;
        justify-content: flex-start;
    }
}

/* Tablet text scaling — same layout as phone, smaller text for larger screens */
@media (min-width: 431px) and (max-width: 1024px) {
    :root {
        --font-size-title: 5vw;
        --font-size-text: 1.8vw;
    }

    .top-row {
        font-size: 9cqi;
    }

    .bottom-row {
        font-size: 9cqi;
    }

    .bio-module p {
        font-size: 5cqi;
    }

    .mobile-nav-toggle {
        width: calc((100vw - 3px) / 12);
        height: calc((100vw - 3px) / 12);
    }

    .mobile-nav-item {
        font-size: 3.5vw;
    }

    .mp-title {
        font-size: var(--font-size-title);
    }

    .mp-tech {
        font-size: var(--font-size-text);
    }

    .mp-date {
        font-size: var(--font-size-text);
    }

    .mp-desc {
        font-size: var(--font-size-text);
    }

    #page-contact .contact-email {
        font-size: 8vw;
    }

    #page-contact .contact-phone {
        font-size: 2.5vw;
    }

    #page-contact .contact-address {
        font-size: 2.5vw;
    }

    .portrait-module {
        grid-column: 3 / -1;
        grid-row: 1 / -1;
        overflow: hidden;
        align-items: flex-end;
        justify-content: flex-start;
    }

    .portrait-module img {
        width: auto;
        height: 70%;
    }
}