:root {
    --mac-blue: #0058d2;
    --system-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
    --window-bg: #1c1c1c; /* Centralized background color variable */
}

* { box-sizing: border-box; user-select: none; margin: 0; padding: 0; }

body { 
    overflow: hidden; font-family: var(--system-font); 
    height: 100vh; width: 100vw; background: #111; 
}

#bg-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
#bg-video { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.6); }

/* QUICK LOOK */
#quick-look {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.9); z-index: 100000;
    display: none; align-items: center; justify-content: center;
    cursor: zoom-out; backdrop-filter: blur(10px);
}
#quick-look img { max-width: 95%; max-height: 95%; object-fit: contain; box-shadow: 0 0 50px rgba(0,0,0,0.5); }

/* MENUBAR */
.menubar {
    position: fixed; top: 0; width: 100%; height: 30px;
    background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(50px) saturate(150%);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 15px; color: white; z-index: 50000; font-size: 13px;
}

#desktop { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; }

/* DESKTOP ICONS */
.desktop-icon { 
    position: absolute; width: 100px; display: flex; flex-direction: column; 
    align-items: center; cursor: grab; padding: 8px; border-radius: 6px; 
}
.desktop-icon:active { cursor: grabbing; }
.desktop-icon:hover { background: rgba(255, 255, 255, 0.1); }
.desktop-icon.selected { background: rgba(255, 255, 255, 0.25) !important; }

.preview-wrapper { width: 85px; height: 85px; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.preview-media { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 3px; box-shadow: 0 5px 15px rgba(0,0,0,0.5); }
.icon-label { 
    color: white; 
    font-size: 13px; /* Slightly smaller looks better with wrapped text */
    font-weight: 500;
    margin-top: 6px; 
    padding: 2px 4px; 
    border-radius: 3px; 
    text-align: center; 
    text-shadow: 0 1px 4px rgba(0,0,0,1); 
    
    /* THE FIX */
    max-width: 100%; 
    white-space: normal;       /* Allows text to wrap to the next line */
    overflow: visible;         /* Ensures no text is hidden */
    text-overflow: clip;       /* Removes the "..." */
    
    line-height: 1.2;          /* Keeps wrapped lines tight together */
}
.desktop-icon.selected .icon-label { background: var(--mac-blue); text-shadow: none; }

/* WINDOWS */
.window { 
    position: absolute; 
    min-width: 250px; 
    min-height: 150px; 
    background: var(--window-bg); 
    color: #f0f0f0; 
    
    /* 1. THE MASK: This clips the sharp corners of internal elements */
    border-radius: 12px; 
    overflow: hidden; 

    box-shadow: 0 40px 80px rgba(0,0,0,0.8); 
    border: 1px solid #333;
    display: none; 
    flex-direction: column; 
    z-index: 100;
}

/* RESIZE HANDLES */
.resizer { position: absolute; z-index: 100; }
.resizer.t { top: -5px; left: 10px; right: 10px; height: 10px; cursor: ns-resize; }
.resizer.b { bottom: -5px; left: 10px; right: 10px; height: 10px; cursor: ns-resize; }
.resizer.l { left: -5px; top: 10px; bottom: 10px; width: 10px; cursor: ew-resize; }
.resizer.r { right: -5px; top: 10px; bottom: 10px; width: 10px; cursor: ew-resize; }
.resizer.tl { top: -5px; left: -5px; width: 15px; height: 15px; cursor: nwse-resize; }
.resizer.tr { top: -5px; right: -5px; width: 15px; height: 15px; cursor: nesw-resize; }
.resizer.bl { bottom: -5px; left: -5px; width: 15px; height: 15px; cursor: nesw-resize; }
.resizer.br { bottom: -5px; right: -5px; width: 15px; height: 15px; cursor: nwse-resize; }
.window.maximized { width: 100vw !important; height: 100vh !important; top: 0 !important; left: 0 !important; border-radius: 0; }
.window-header { 
    height: 40px; 
    display: flex; 
    align-items: center; 
    padding: 0 15px; 
    background: #2a2a2a; 
    border-bottom: 1px solid #000; 
    cursor: grab;

    /* 2. MATCH THE TOP CURVE: Ensures the header fits perfectly in the round top */
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}
.window-header:active { cursor: grabbing; }

.traffic-lights { display: flex; gap: 8px; }
.traffic-light { width: 12px; height: 12px; border-radius: 50%; border: 0.5px solid rgba(0,0,0,0.2); cursor: pointer; }
.close-btn { background: #ff5f56; } .min-btn { background: #ffbd2e; } .max-btn { background: #27c93f; }

.window-content { 
    flex: 1; 
    overflow-y: auto; 
    overflow-x: hidden;
    background: var(--window-bg);
    display: flex;
    flex-direction: column; /* Stack Desc on top of Media */
    
    /* Ensures the bottom of the content also respects the curve */
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

/* --- MAC OS SCROLLBAR --- */
.window-content::-webkit-scrollbar { width: 10px; background: transparent; }
.window-content::-webkit-scrollbar-track { background: transparent; }
.window-content::-webkit-scrollbar-thumb { background-color: rgba(255,255,255,0.2); border-radius: 10px; border: 2px solid var(--window-bg); }
.window-content::-webkit-scrollbar-thumb:hover { background-color: rgba(255,255,255,0.3); }

/* GALLERY & DESCRIPTION STYLING */
.gallery-item { 
    width: 100%; 
    display: flex; 
    justify-content: center;
    align-items: flex-start;
}

/* THE FIX: CENTER THE LAST ODD ITEM */
/* If an item is the LAST child AND it is an ODD number (1st, 3rd, 5th...) */
.gallery-item:last-child:nth-child(odd) {
    grid-column: 1 / span 2; /* Make it take up the width of both columns */
}

/* Add a max-width to the centered item so it doesn't get too massive */
.gallery-item:last-child:nth-child(odd) .gallery-img,
.gallery-item:last-child:nth-child(odd) .gallery-video {
    max-width: 70%; /* Adjust this percentage to your liking */
    margin: 0 auto;
}

.gallery-img, .gallery-video { 
    width: 100%; 
    height: auto; 
    object-fit: cover;
    border-radius: 4px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
}

@container (max-width: 400px) {
    .media-stack { grid-template-columns: 1fr; }
}
.desc-container { 
    padding: 30px 50px; 
    width: 100%; 
    border-bottom: 1px solid #333; /* Border now at bottom of text */
    order: 1; /* Ensures it stays at the top */
}
.media-stack {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Two equal columns */
    gap: 20px;
    padding: 30px 50px;
    order: 2;
}
.desc-title { font-size: 24px; font-weight: 700; margin-bottom: 18px; color: #fff; }
.desc-text { font-size: 20px !important; line-height: 1.6; color: #ccc;white-space: pre-line; }

.resizer { position: absolute; width: 20px; height: 20px; bottom: 0; right: 0; cursor: nwse-resize; z-index: 100; }

/* ERROR POPUP STYLES */
.error-hidden { display: none !important; }
#error-popup {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 99999; display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.4); backdrop-filter: blur(2px);
}
.error-box {
    width: 300px; background: #ececec; border-radius: 12px;
    padding: 20px; text-align: center; box-shadow: 0 20px 40px rgba(0,0,0,0.5);
    border: 1px solid #fff; color: #333; font-family: var(--system-font);
}
.error-box h3 { margin: 10px 0 5px 0; font-size: 16px; }
.error-box p { font-size: 13px; color: #666; margin-bottom: 15px; }
.error-box button {
    padding: 6px 20px; border: 1px solid #bbb; background: #fff;
    border-radius: 6px; cursor: pointer; font-weight: 600;
}
.error-box button:active { background: #ddd; }

/* DOCK */
.dock-container { position: fixed; bottom: 12px; width: 100%; display: flex; justify-content: center; z-index: 60000; }
.dock { background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(40px); border-radius: 22px; padding: 7px; display: flex; align-items: flex-end; gap: 3px; height: 75px; border: 1px solid rgba(255,255,255,0.1); }
.dock-item-wrapper { position: relative; cursor: grab; }
.dock-item { width: 54px; height: 54x; transition: transform 0.2s; cursor: inherit; transform-origin: center; }
.dock-item:hover { transform: scale(1.3) translateY(-8px); }
.dock-tooltip { position: absolute; bottom: 80px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.7); color: white; padding: 4px 12px; border-radius: 6px; font-size: 12px; opacity: 0; pointer-events: none; transition: 0.2s; white-space: nowrap; }
.dock-item-wrapper:hover .dock-tooltip { opacity: 1; }

/* Update your description text to allow custom HTML formatting */
.desc-text {
    font-size: 20px;
    line-height: 1;
    color: #f0f0f0;
    text-align: left;
}

/* CV TAB STYLING - SCOPED */
.cv-container {
    padding: 10px 20px;
    font-family: var(--system-font);
    color: white;
    text-align: left; /* Ensures CV doesn't inherit centering from other tabs */
}

.cv-container .cv-name {
    font-size: 30px;
    margin: 0 0 0px 0; 
    letter-spacing: 1px;
    color: white;
}

.cv-container .cv-subtitle {
    font-size: 20px;
    color: #888;
    margin: 0 0 0px 0;
    text-transform: uppercase;
}

.cv-container .cv-section-title {
    font-size: 17px;
    color: #0058d2;
    margin: 0px 0 0px 0;
    border-bottom: 1px solid #333;
    padding-bottom: 2px;
}

/* Scoped specifically to paragraphs inside the CV only */
.cv-container p.cv-text {
    font-size: 17px;
    line-height: 1.4;
    margin: 0px 0;
    color: #f0f0f0;
}

.cv-container .cv-item {
    margin-bottom: -30px;
}

.cv-container .cv-item-header {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    color: white;
}

/* Scoped lists so they don't mess up your media gallery */
.cv-container ul.cv-list {
    font-size: 17px;
    color: #ccc;
    margin: 4px 0 0 0;
    padding-left: 18px;
    list-style-type: disc; /* Ensures bullets appear only here */
}

.cv-container .cv-list li {
    margin-bottom: 2px;
    color: #ccc;
}
/* --- CV: TRUSTED BY LOGOS --- */
.cv-container .trusted-grid {
    display: flex;
    flex-wrap: wrap;       /* Lets logos wrap to the next line on mobile */
    justify-content: center;
    gap: 25px;             /* Space between logos */
    margin-top: 15px;
    align-items: center;   /* Centers them vertically if some are taller */
}

.cv-container .trusted-logo {
    height: 100px;          /* Forces all logos to have the same height */
    width: auto;           /* Keeps the aspect ratio normal */
    max-width: 120px;      /* Prevents super wide logos from taking over */
    object-fit: contain;   
    
    /* Premium Effect: Gray and slightly faded until hovered */
    opacity: 0.6;
    filter: grayscale(100%) contrast(120%);
    transition: all 0.3s ease;
}

.cv-container .trusted-logo:hover {
    opacity: 1;
    filter: grayscale(0%) contrast(100%);
}
/* --- DESKTOP: SMART SCALING (Standard 80px) --- */
@media (min-width: 769px) {
    
    .desktop-icon {
        width: auto; /* Let the image decide the width */
        display: flex; 
        flex-direction: column; 
        align-items: center; 
        cursor: grab; 
        padding: 10px;
        border-radius: 6px; 
    }

    .preview-wrapper { 
        width: auto; 
        height: auto; 
        
        /* Minimum touch target */
        min-width: 80px;
        min-height: 80px;
        
        display: flex; 
        align-items: flex-end; 
        justify-content: center; 
        pointer-events: none; 
        margin-bottom: 5px;
    }

    .preview-media {
        /* DEFAULT: Lock Height to 80px, let Width flow 
           (Perfect for Square & Wide images) */
        height: 70px; 
        width: auto;
        
        object-fit: contain;
        border-radius: 3px; 
        box-shadow: 0 4px 10px rgba(0,0,0,0.4); 
    }

    .icon-label { 
        font-size: 12px; /* Slightly smaller text for balance */
        padding: 2px 6px;
        max-width: 120px; 
        line-height: 1.2;
        text-shadow: 0 1px 3px rgba(0,0,0,1);
        text-align: center;
        
        /* Cut off super long names */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .dock { height: 75px; padding: 7px; gap: 5px; border-radius: 22px; }
    .dock-item { width: 54px; height: 54px; }
    .dock-tooltip { bottom: 80px; font-size: 12px; padding: 4px 12px; }
}
/* --- MOBILE RESPONSIVENESS (FINAL iOS FIX) --- */
@media (max-width: 768px) {
    
    html, body {
        overflow: hidden !important; 
        position: fixed; 
        width: 100%; height: 100%;
    }

    #desktop {
        width: 100vw; height: 100vh;
        position: relative; overflow: hidden;
    }

    /* ICONS */
    .desktop-icon { width: 64px; }
    /* Inside @media (max-width: 768px) */

    .preview-wrapper { 
        width: 55px;  /* Fixed container size */
        height: 55px; 
        display: flex;
        align-items: center;    /* Center vertically */
        justify-content: center; /* Center horizontally */
    }

    .preview-media { 
        /* Ensure the image fits inside without cropping */
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain; 
        
        border-radius: 6px;
        
        /* THE FIX: Remove box-shadow and use filter */
        box-shadow: none; 
        filter: drop-shadow(0 4px 5px rgba(0,0,0,0.6)); /* Shadow follows the image shape */
    }
    .icon-label { font-size: 10px; max-width: 64px; line-height: 1.1; }

    /* DOCK */
    .dock-container { bottom: 15px; }
    .dock {
        height: auto; padding: 10px 15px; gap: 10px;
        border-radius: 20px; display: flex; justify-content: center;
        max-width: 95%; overflow: visible; 
    }
    .dock-item { width: 40px; height: 40px; transition: none; }
    .dock-item:hover { transform: none; }
    .dock-tooltip { display: none; }

    /* --- WINDOW FIX: FORCE POP-UP --- */
    .window {
        position: fixed !important; 
        
        /* Force explicit dimensions */
        width: 90vw !important;
        height: 70vh !important;
        
        /* Center using modern CSS */
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        
        /* Reset margins */
        margin: 0 !important;
        
        /* Visuals */
        border-radius: 16px !important;
        box-shadow: 0 50px 100px rgba(0,0,0,0.8) !important;
        border: 1px solid #333 !important;
        z-index: 99999 !important; /* Ensure it's on top of everything */
    }
    
    /* PREVENT FULLSCREEN OVERRIDE */
    .window.maximized {
        width: 90vw !important;
        height: 70vh !important;
        top: 50% !important;
        left: 50% !important;
        border-radius: 16px !important;
    }

    .window-header { height: 45px; border-radius: 16px 16px 0 0 !important; }
    .window-content { border-radius: 0 0 16px 16px !important; }
    
    /* Scroll inside the pop-up */
    .window-content {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch; /* Smooth scroll on iOS */
    }

    .media-stack {
        /* Turn off the column math for mobile */
        column-count: auto; 
        
        /* Force a simple, unbreakable vertical stack */
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    .desc-container { padding: 15px; }
}
/* --- REAL MAC OS ALERT STYLE --- */
.warning-hidden { display: none !important; }

#mobile-warning {
    position: fixed; 
    top: 0; left: 0; 
    width: 100%; height: 100%;
    z-index: 200000; 
    display: flex; 
    align-items: center; 
    justify-content: center;
    background: rgba(0,0,0,0.3); /* Subtle dimming */
    backdrop-filter: blur(5px);   /* Blur the background */
}

.mac-alert {
    width: 320px;
    background: rgba(236, 236, 236, 0.95); /* Mac Alert Gray */
    backdrop-filter: blur(20px);
    border-radius: 14px;
    padding: 20px;
    display: flex;
    flex-direction: row; /* Icon Left, Text Right */
    gap: 20px;
    box-shadow: 
        0 0 1px rgba(0,0,0,0.2), 
        0 20px 40px rgba(0,0,0,0.25); /* Deep Mac Shadow */
    border: 0.5px solid rgba(0,0,0,0.1);
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    animation: popIn 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes popIn {
    0% { transform: scale(0.8); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.mac-alert-icon {
    width: 64px;
    height: 64px;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.15));
}

.mac-alert-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.mac-alert-title {
    font-size: 13px;
    font-weight: 700;
    color: #000;
    margin: 0 0 5px 0;
}

.mac-alert-text {
    font-size: 12px;
    line-height: 1.4;
    color: #000;
    margin-bottom: 15px;
}

.mac-alert-buttons {
    display: flex;
    justify-content: flex-end;
}

/* The Authentic Blue Mac Button */
.mac-btn-primary {
    background: #007aff;
    background: linear-gradient(180deg, #3795ff 0%, #0063e1 100%);
    border: 0.5px solid #004fb3;
    color: white;
    font-size: 13px;
    font-weight: 500;
    padding: 4px 12px;
    min-width: 70px;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 0 1px 1px rgba(0,0,0,0.1);
}

.mac-btn-primary:active {
    background: #0063e1;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
}
/* --- PERFORMANCE OPTIMIZATIONS --- */

/* 1. Hardware Acceleration for Moving Parts */
.window, .desktop-icon, .dock-item {
    /* Tells browser to prepare for movement (smoother dragging) */
    will-change: transform, left, top;
    
    /* crisper text rendering on Mac */
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale;
}

/* 2. Content Visibility (Huge booster) */
/* This tells the browser: "If the window content is off-screen, don't waste power drawing it." */
.window-content {
    content-visibility: auto; 
    contain-intrinsic-size: 800px 600px; /* Guess the size to prevent scroll jumps */
}

/* 3. Optimize Blur Effects */
/* Heavy blurs can lag on old phones. This simplifies them slightly. */
.dock, .menubar, #mobile-warning, .window {
    backdrop-filter: blur(20px); 
    -webkit-backdrop-filter: blur(20px);
}
/* --- FIX FULLSCREEN VIDEO ZOOM/CROPPING --- */
video:fullscreen {
    object-fit: contain !important;
    background-color: #000 !important; /* Ensures bars are black */
    width: 100vw !important;
    height: 100vh !important;
}

/* Vendor prefixes for Safari, Chrome, and older browsers */
video:-webkit-full-screen {
    object-fit: contain !important;
    background-color: #000 !important;
    width: 100vw !important;
    height: 100vh !important;
}

video:-moz-full-screen {
    object-fit: contain !important;
    background-color: #000 !important;
}

video::-webkit-media-controls-enclosure {
    object-fit: contain !important;
}