/* /css/viewport.css */

/* 1. GLOBAL FIXES: Prevent accidental scrolling and zooming */
* {
    box-sizing: border-box; /* Ensures padding doesn't break the 'frame' */
    -webkit-tap-highlight-color: transparent; /* Removes the ugly blue box on mobile taps */
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Keeps everything locked into your 'page' container */
    background: #000; /* Prevents white flashes between loads */
    position: fixed; /* Extra protection against mobile 'rubber-banding' */
}

/* Safe-area helpers (iPhone notch/home indicator) */
:root {
    --sat: env(safe-area-inset-top, 0px);
    --sar: env(safe-area-inset-right, 0px);
    --sab: env(safe-area-inset-bottom, 0px);
    --sal: env(safe-area-inset-left, 0px);
    /* JS will update these to the *visual* viewport size */
    --dvh: 100vh;
    --dvw: 100vw;
}

/* A consistent full-screen page container */
.page {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--dvw);
    height: var(--dvh);
    padding-top: var(--sat);
    padding-right: var(--sar);
    padding-bottom: var(--sab);
    padding-left: var(--sal);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* “Full bleed” camera/video background */
.videoFill {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #000;
    z-index: -1; /* Keep it behind your UI elements */
}

/* 2. MOBILE-FIRST GRID: Vertical for phones, Horizontal for Desktop */
.grid {
    display: grid;
    gap: 10px;
    width: 100%;
    height: 100%;
    padding: 10px;
}

    /* Default mobile view (1 or 2 columns max) */
    .grid.auto {
        grid-template-columns: repeat(auto-fit, minmax(45%, 1fr));
        grid-auto-rows: minmax(180px, 1fr);
    }

/* Desktop override: allow more columns */
@media (min-width: 1024px) {
    .grid.auto {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
}

/* Each tile keeps its own safe framing */
.tile {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    background: #222; /* Darker grey so you can see empty tiles */
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}

    .tile video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* 3. MOBILE UI HELPERS */
/* Use this for buttons to make them big enough for thumbs */
.mobile-btn {
    min-height: 44px;
    min-width: 44px;
    padding: 10px 20px;
}