@import url('https://fonts.googleapis.com/css2?family=Inter:wght@700&family=Space+Grotesk:wght@400;700&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');

/* Variables */
:root {
    --m-base:           #F2F2F2;
    --m-surface:        #E5E5E5;
    --m-accent:         #FF5F05;
    --m-text-primary:   #0F0F0F;
    --m-text-secondary: #606060;
    --m-border:         #E5E5E5;

    --m-dark-base:    #111111;
    --m-dark-surface: #222222;
    --m-dark-text:    #F2F2F2;

    --m-nav-h: 64px;
}

/* Hidden by default; activated by the media query below */
.mobile-wrapper {
    display: none;
}

@media (max-width: 1024px) {
    .wrapper {
        display: none !important;
    }

    .mobile-wrapper {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100svh; /* constrain to viewport so grid can be the scroll context */
        background-color: var(--m-base);
        color: var(--m-text-primary);
        font-family: 'Space Mono', monospace;
        position: relative;
        overflow: hidden;
    }

    /* Typography */
    .m-header-text {
        font-family: 'Space Grotesk', 'Inter', sans-serif;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        line-height: 1;
    }

    .m-mono {
        font-family: 'Space Mono', monospace;
        text-transform: uppercase;
        font-size: 13px;
    }

    /* Header */
    .mobile-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px;
        border-bottom: 1px solid var(--m-border);
        font-family: 'Space Mono', monospace;
        font-size: 11px;
        color: var(--m-text-secondary);
        background: var(--m-base);
        z-index: 50;
        flex-shrink: 0; /* don't let the header compress */
    }

    .status-indicator {
        display: inline-block;
        width: 6px;
        height: 6px;
        background-color: var(--m-accent);
        border-radius: 50%;
        margin-right: 4px;
        animation: pulse 2s infinite;
    }

    @keyframes pulse {
        0%   { opacity: 1; }
        50%  { opacity: 0.4; }
        100% { opacity: 1; }
    }

    /*
     * Scroll container. flex: 1 fills the space between header and fixed nav.
     * scroll-snap-type makes each .m-section a locked snap point.
     */
    .mobile-grid-container {
        flex: 1;
        min-height: 0; /* required for flex children to scroll */
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-auto-rows: max-content;
        column-gap: 1px;
        background-color: var(--m-base);
        border-left: 1px solid var(--m-border);
        border-right: 1px solid var(--m-border);
        overflow-y: scroll;
        scroll-snap-type: y mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: var(--m-nav-h); /* clear the fixed nav */
    }

    /*
     * Each section is a full-height snap unit.
     * It acts as a sub-grid so inner elements still get the 4-column layout.
     * Inactive sections are dimmed; .m-section--active restores full opacity.
     */
    .m-section {
        grid-column: span 4;
        min-height: calc(100svh - 49px - var(--m-nav-h));
        scroll-snap-align: start;
        scroll-snap-stop: always;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        align-content: start;
        background-color: var(--m-base);
        opacity: 0.35;
        transition: opacity 0.35s ease;
        border-bottom: 2px solid var(--m-border);
    }

    .m-section.m-section--active {
        opacity: 1;
    }

    /* Restore base background on section children (mirrors the root grid rule) */
    .m-section > div {
        background-color: var(--m-base);
    }

    /* Project cards */
    #m-projects-list {
        grid-column: span 4;
        display: block;
    }

    .m-project-card {
        display: flex;
        flex-direction: column;
        border-bottom: 1px solid var(--m-border);
        position: relative;
    }

    .m-project-image-container {
        width: 100%;
        aspect-ratio: 16/9;
        overflow: hidden;
        position: relative;
        background-color: #ccc;
        border-bottom: 1px solid var(--m-border);
    }

    .m-project-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: grayscale(100%) contrast(1.1);
        transition: filter 0.2s ease;
    }

    .m-project-image:hover,
    .m-project-card:active .m-project-image {
        filter: none;
    }

    /* SVG diagonal-line texture overlay on project images */
    .m-noise-overlay {
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1IiBoZWlnaHQ9IjUiPgo8cmVjdCB3aWR0aD0iNSIgaGVpZ2h0PSI1IiBmaWxsPSIjZmZmIiBmaWxsLW9wYWNpdHk9IjAuMSIvPgo8cGF0aCBkPSJNMCA1TDUgMCIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEiIG9wYWNpdHk9IjAuMSIvPgo8L3N2Zz4=');
        pointer-events: none;
        opacity: 0.5;
    }

    .m-project-meta {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        font-family: 'Space Mono', monospace;
        font-size: 11px;
        color: var(--m-text-secondary);
    }

    .m-meta-item {
        padding: 8px;
        border-right: 1px solid var(--m-border);
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .m-meta-item:last-child {
        border-right: none;
    }

    .m-meta-label {
        font-size: 9px;
        opacity: 0.7;
    }

    .m-project-title-row {
        padding: 12px;
        border-top: 1px solid var(--m-border);
    }

    .m-project-title {
        font-size: 20px;
        color: var(--m-text-primary);
        margin: 0;
    }

    /* Section headers and content blocks span full grid width */
    .m-section-header {
        grid-column: span 4;
        padding: 24px 16px 8px 16px;
        border-bottom: 1px solid var(--m-border);
    }

    .m-text-block {
        grid-column: span 4;
        padding: 16px;
        font-size: 15px;
        line-height: 1.5;
        border-bottom: 1px solid var(--m-border);
    }

    .m-text-block p {
        color: var(--m-text-primary);
    }

    .m-text-block a {
        color: var(--m-accent);
    }

    .m-text-block h3,
    .m-text-block h4,
    .m-text-block .m-header-text,
    .m-text-block .m-mono {
        color: var(--m-text-primary);
    }

    /* Bottom navigation bar */
    .mobile-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: var(--m-nav-h);
        background: var(--m-base);
        border-top: 1px solid var(--m-border);
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        z-index: 100;
    }

    .m-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        color: var(--m-text-secondary);
        font-family: 'Space Mono', monospace;
        font-size: 11px;
        border-right: 1px solid var(--m-border);
        transition: background-color 0.1s linear, color 0.1s linear;
    }

    .m-nav-item:last-child {
        border-right: none;
    }

    .m-nav-item.active,
    .m-nav-item:active {
        background-color: var(--m-accent);
        color: #FFFFFF;
    }

    .m-nav-icon {
        font-size: 16px;
        margin-bottom: 4px;
    }

    /* Buttons */
    .m-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 12px 24px;
        background: transparent;
        border: 1px solid var(--m-text-primary);
        color: var(--m-text-primary);
        font-family: 'Space Grotesk', sans-serif;
        font-weight: 700;
        text-transform: uppercase;
        cursor: pointer;
        transition: all 0.1s linear;
        text-decoration: none;
        font-size: 15px;
    }

    .m-btn:active,
    .m-btn:hover {
        background: var(--m-accent);
        border-color: var(--m-accent);
        color: #FFFFFF;
        transform: scale(0.98);
    }

    .m-skill-box {
        border: 1px solid var(--m-border);
        padding: 8px;
        display: flex;
        flex-direction: column;
        font-family: 'Space Mono', monospace;
        font-size: 11px;
    }

    /* BLACKOUT MODE button */
    .m-darkmode-btn {
        display: block;
        width: 100%;
        padding: 12px 16px;
        font-family: 'Space Grotesk', sans-serif;
        font-weight: 700;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.10em;
        color: var(--m-text-primary);
        background: var(--m-base);
        border: 1px solid var(--m-text-primary);
        cursor: pointer;
        text-align: left;
        position: relative;
        top: 0;
        box-shadow: 0 3px 0 var(--m-border);
        transition: box-shadow 0.08s ease, top 0.08s ease, background-color 0.1s ease, color 0.1s ease, border-color 0.1s ease;
    }

    .m-darkmode-btn:active {
        box-shadow: none;
        top: 3px;
    }

    [data-theme="dark"] .m-darkmode-btn {
        background: var(--m-accent);
        color: #fff;
        border-color: var(--m-accent);
        box-shadow: 0 3px 0 #b84200;
    }

    [data-theme="dark"] .m-darkmode-btn:active {
        box-shadow: none;
    }
}