/* ===== RESPONSIVE OVERLAY (TABLET/MOBILE BLOCKER) ===== */
.responsive-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #000;
    background-image: 
        repeating-linear-gradient(0deg, transparent, transparent 49px, rgba(255,255,255,0.1) 49px, rgba(255,255,255,0.1) 50px),
        repeating-linear-gradient(90deg, transparent, transparent 49px, rgba(255,255,255,0.1) 49px, rgba(255,255,255,0.1) 50px);
    z-index: 99999;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
}

/* Show overlay on tablet and mobile */
@media (max-width: 1024px) {
    .responsive-overlay {
        display: flex !important;
        pointer-events: all !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* ===== ROOT FONT SIZE SCALING - THE KEY TO RESPONSIVE DESIGN ===== */
/* This scales your entire site proportionally across all screen sizes */
/* Your design is optimized for 1440px, so that's our baseline (16px) */

/* Base styles (mobile first) */
:root {
    --content-width: 90vw;
    --grid-columns: 1;
    --spacing-scale: 1;
    --font-scale: 1;
}

html {
    overscroll-behavior-x: none;
    touch-action: pan-y;
    overflow-x: hidden;
    overflow-y: auto;
    font-size: 16px; /* Baseline for 1440px screens */
}

/* 4K and Ultra-wide monitors (2560px+) */
@media screen and (min-width: 2560px) {
    html { font-size: 24px; }
    
    :root {
        --spacing-scale: 1.3;
        --font-scale: 1.2;
        --content-width: 70vw;
        --grid-columns: 4;
    }
}

/* Full HD monitors (1920px - 2559px) */
@media screen and (min-width: 1920px) and (max-width: 2559px) {
    html { font-size: 20px; }
    
    :root {
        --spacing-scale: 1.15;
        --font-scale: 1.15;
        --content-width: 75vw;
        --grid-columns: 3;
    }
}

/* Large desktop (1600px - 1919px) */
@media screen and (min-width: 1600px) and (max-width: 1919px) {
    html { font-size: 18px; }
    
    :root {
        --spacing-scale: 1.1;
        --font-scale: 1.1;
        --content-width: 78vw;
        --grid-columns: 3;
    }
}

/* Standard desktop - YOUR DESIGN BASELINE (1440px - 1599px) */
@media screen and (min-width: 1440px) and (max-width: 1599px) {
    html { font-size: 16px; }
    
    :root {
        --spacing-scale: 1;
        --font-scale: 1;
        --content-width: 80vw;
        --grid-columns: 3;
    }
}

/* Smaller desktop (1280px - 1439px) */
@media screen and (min-width: 1280px) and (max-width: 1439px) {
    html { font-size: 15px; }
    
    :root {
        --spacing-scale: 0.95;
        --font-scale: 0.95;
        --content-width: 85vw;
        --grid-columns: 2;
    }
}

/* Laptop (1024px - 1279px) */
@media screen and (min-width: 1024px) and (max-width: 1279px) {
    html { font-size: 14px; }
    
    :root {
        --spacing-scale: 0.9;
        --font-scale: 0.92;
        --content-width: 88vw;
        --grid-columns: 2;
    }
}

/* Ultra-wide screen optimizations */
@media screen and (min-aspect-ratio: 21/9) {
    :root {
        --ultra-wide-padding: max(4rem, 8vw);
        --content-max-width: 2400px;
    }

    .full-width-section {
        padding-left: var(--ultra-wide-padding);
        padding-right: var(--ultra-wide-padding);
    }
    
    .grid-container {
        grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
        max-width: var(--content-max-width);
        margin: 0 auto;
    }

    .showcase-section {
        gap: clamp(2rem, 4vw, 6rem);
    }

    /* Prevent excessive line lengths for better readability */
    .text-content {
        max-width: 70ch;
        margin: 0 auto;
    }
}

/* Super Ultra-wide (32:9 and wider) */
@media screen and (min-aspect-ratio: 32/9) {
    :root {
        --ultra-wide-padding: max(6rem, 12vw);
    }

    /* Optional: Use multi-column layout for very wide screens */
    .text-rich-content {
        column-count: 2;
        column-gap: 4rem;
        max-width: 140ch;
    }
}

/* High pixel density screens */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Optimize image rendering */
    .image-container img,
    .grid-image-item img,
    .background-image {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }

    /* Sharper text rendering for high DPI */
    html {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
    }

    /* Ensure border widths are visible on high DPI */
    .border-element {
        border-width: 0.5px;
    }
}

/* 5K and higher resolution displays */
@media screen and (min-width: 5120px) {
    :root {
        --spacing-scale: 1.75;
        --font-scale: 1.5;
        --content-width: 60vw;
        --grid-columns: 5;
    }

    /* Ensure images remain sharp at very high resolutions */
    img[srcset] {
        image-rendering: crisp-edges;
    }
}

/* Print styles */
@media print {
    #breakpoint-indicator {
        display: none;
    }
}