/* Global Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Basic Layout */
html,
body {
    height: 100%;
    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        sans-serif;
    overflow: hidden;
    background: transparent;
    color-scheme: light dark; /* Support automatic dark/light mode */
}

/* Hidden Cursor - Apply to all elements */
body:not(.is-mobile),
body:not(.is-mobile) * {
    cursor: none !important; /* !important to override browser defaults */
}

/* Grid System */
.grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    height: 100vh;
    width: 100vw;
}

.image-box {
    position: relative;
    overflow: hidden;
}

/* Link Styling */
.grid-link {
    display: block;
    width: 100%;
    height: 100%;
    cursor: none !important; /* Ensure links don't show pointer cursor */
}

.grid-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.2s ease;
}

/* Image error state */
.grid-link img:not([src]),
.grid-link img[src=""],
.grid-link img.error {
    opacity: 0.2;
    background-color: #f5f5f5;
}

/* Overlays */
#base-overlay,
#top-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center; /* for dynamic-focal */
    align-items: center; /* for dynamic-focal */
    /* background-size: cover;          removed for dynamic-focal */
    /* background-position: center;     removed for dynamic-focal */
    /* background-repeat: no-repeat;    removed for dynamic-focal */
    background: transparent; /* Allow browser background to show through */
    pointer-events: none;
    z-index: 100;
    overflow: hidden;
}

/* Ambient blurred background for contain/padding modes */
#top-overlay::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--bg-image, none);
    background-size: cover;
    background-position: center;
    filter: blur(40px);
    transform: scale(1.1);
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    z-index: -1;
}

/* Show blurred background only in contain/padding modes */
.display-contain #top-overlay::before,
.display-padding #top-overlay::before {
    opacity: 0.6;
}

/* for dynamic-focal */
#base-overlay img,
#top-overlay img {
    position: absolute;
    width: 100%; /* for dynamic-focal */
    height: 100%; /* for dynamic-focal */
    /* min-width: 100%;         removed for dynamic-focal */
    /* min-height: 100%;        removed for dynamic-focal */
    object-fit: cover; /* for dynamic-focal */
    object-position: var(--focal-x, 50%) var(--focal-y, 50%);
    transition: opacity 0.1s ease-in-out;
}

#top-overlay {
    z-index: 101;
    opacity: 0;
    transition: opacity 0.1s ease-in-out;
    will-change: opacity, background-image; /* Performance hint for browsers */
}

/* --- Visibility Control --- */

/* Desktop content is visible by default */
.desktop-content {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1;
}

/* Mobile message styling */
.mobile-message {
    display: none;
    justify-content: center;
    align-items: center;
    height: 100vh;
    text-align: center;
    padding: 2rem;
    background-color: #f5f5f5;
    color: #333;
    font-size: 1.2rem;
    line-height: 1.5;
}

.mobile-message p {
    max-width: 80%;
}

/* --- Mobile Detection Handling --- */

/* When JS adds is-mobile class */
.is-mobile .desktop-content {
    display: none !important;
}

.is-mobile .mobile-message {
    display: flex !important;
}

.is-mobile #base-overlay,
.is-mobile #top-overlay {
    display: none !important;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns, 2), 1fr);
    grid-template-rows: repeat(var(--grid-rows, 2), 1fr);
    width: 100%;
    height: 100%;
    gap: 0; /* Remove any gaps between grid items */
}

/* Focus styles for accessibility */
.grid-link {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.grid-link img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Maintain aspect ratio while filling space */
    display: block; /* Remove any default inline spacing */
}

/* Hide images entirely - they're only used for fallback if overlays fail */
.desktop-content .grid-link img {
    opacity: 0;
}

/* Fallback for when JS is disabled completely */
noscript .noscript-message {
    display: block;
}

/* --- Display Mode Overrides --- */

/* 1. Contain Mode */
/* Switches the object-fit property to 'contain' when ?display=contain is in the URL. */
.display-contain #top-overlay img {
    object-fit: contain;
}

/* 2. Padding Mode */
/* Shrinks the image to create a 'framed' or 'padded' effect when ?display=padding is in the URL. */
.display-padding #top-overlay img {
    object-fit: contain;
    width: 90%;
    height: 90%;
}

/* --- Debug Overlays --- */
.debug-grid #base-overlay,
.debug-grid #top-overlay {
    opacity: 0.5 !important;
}

.debug-grid .grid-link {
    outline: 2px solid red !important; /* Very thick, opaque red border */
    z-index: 1000 !important; /* Ensure it's on top if anything else appears */
    position: relative !important; /* Ensure z-index works */
    /* overflow: visible !important;  Ensure no clipping */
}

.debug-grid .grid-container {
    /* outline: 5px dashed green !important; Very thick, opaque green outline for container */
    z-index: 999 !important;
    /* position: relative !important; */
}

/* style.css */
/* --- Make cursor visible for debugging (Corrected for specificity) --- */
body.debug-grid:not(.is-mobile),
body.debug-grid:not(.is-mobile) * {
    cursor: auto !important;
}

/* --- Reduced Motion Support --- */
/* Respect user's motion preferences for accessibility */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}