/* ---------------------------------------------------
       STRICT MOBILE WIDTH ENFORCEMENT
       Guarantees nothing blows out the side of the screen
    --------------------------------------------------- */
    html, body {
        max-width: 100vw;
        overflow-x: hidden;
    }
    
    * {
        box-sizing: border-box;
    }

    /* Main Container */
    .media-container {
        max-width: 1400px; 
        margin: 0 auto;
        padding: 40px 20px;
        font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    }

    /* ---------------------------------------------------
       RESPONSIVE YOUTUBE VIDEOS
    --------------------------------------------------- */
    .video-grid {
        display: grid;
        /* Increased from 280px to 450px to force larger, wider videos on desktop */
        grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
        gap: 40px;
    }

    .video-wrapper {
        position: relative;
        padding-bottom: 56.25%; /* Forces a 16:9 aspect ratio */
        height: 0;
        overflow: hidden;
        border-radius: 8px;
        box-shadow: 0px 10px 20px rgba(0,0,0,0.1);
    }

    .video-wrapper iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    /* ---------------------------------------------------
       RESPONSIVE PHOTO GALLERY
    --------------------------------------------------- */
    .photo-grid {
        display: grid;
        /* Increased from 150px to 300px for larger desktop thumbnails */
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 30px; 
    }

    .gallery-item {
        width: 100%;
        height: 250px; /* Forces uniform height for a clean grid */
        object-fit: cover; /* Prevents image distortion */
        border-radius: 8px;
        cursor: pointer;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .gallery-item:hover {
        transform: scale(1.03);
        box-shadow: 0px 8px 15px rgba(0,0,0,0.15);
    }

    /* ---------------------------------------------------
       LIGHTBOX STYLES
    --------------------------------------------------- */
    .lightbox-modal {
        display: none;
        position: fixed;
        z-index: 1000;
        left: 0;
        top: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0,0,0,0.9);
        align-items: center;
        justify-content: center;
    }

    .lightbox-content {
        max-width: 90%;
        max-height: 90vh;
        border-radius: 4px;
    }

    .close-lightbox {
        position: absolute;
        top: 20px;
        right: 30px;
        color: #fff;
        font-size: 40px;
        font-weight: bold;
        cursor: pointer;
    }

    /* Mobile overrides */
    @media (max-width: 768px) {
        .media-container {
            padding: 20px 15px; 
        }
    }