/*===== Font Faces =====*/
@font-face {
    font-family: 'frutigerltarabic-55roman';
    src: url('../fonts/frutigerltarabic-55roman.ttf') format('truetype');
}

@font-face {
    font-family: 'frutigerltarabic-65bold';
    src: url('../fonts/frutigerltarabic-65bold.ttf') format('truetype');
}

/*===== General List Style =====*/
ul {
    list-style: none;
    
}

/*===== Video Grid Style =====*/
.video-grid.front-page {
    max-width: 1280px;
    margin: 0 auto;
    padding: 1em 2em;
}

ul.video-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5em; /* Reduced gap between video items */
}

/*===== Individual Video Item =====*/
li.video {
    position: relative;
    width: calc(33.33333% - 0.5em); /* Adjusted width with reduced gap */
    border: solid 0.2em transparent;
    overflow: hidden; /* Ensure rounded corners are visible */
    transition: transform 0.3s ease; /* Add smooth hover transition */
    border-radius: 5px; /* Less rounded corners */
}

    li.video a {
        outline: none;
    }

    /* Hover Effect */
    li.video:hover {
        transform: translateY(-10px); /* Elevate on hover */
    }

    /* Video Image & Caption Styling */
    li.video figure {
        position: relative;
        overflow: hidden; /* Ensure the image doesn't overflow the rounded corners */
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        transition: transform 0.3s ease; /* Smooth transformation */
        border-radius: 5px; /* Less rounded corners */
    }

        li.video figure img {
            display: block;
            max-width: 100%;
            height: auto;
            opacity: 0;
            transform: scale(0.5);
            transition: opacity 0.3s ease, transform 0.3s ease; /* Smooth hover effects */
            border-radius: 5px; /* Less rounded corners */
        }

        li.video figure figcaption {
            font-family: "frutigerltarabic-55roman";
            position: absolute;
            bottom: 0;
            width: 100%;
            background: rgba(0, 0, 0, 0.6);
            color: #fff;
            font-size: 16px;
            font-weight: 600;
            padding: 1rem;
            transform: translateY(0);
            opacity: 1;
            transition: opacity 0.3s ease, transform 0.3s ease; /* Smooth caption transitions */
        }

    /* Hover Effects */
    li.video:hover figure img {
        opacity: 1;
        transform: scale(1);
    }

    li.video:hover figure figcaption {
        opacity: 0;
        transform: translateY(50%);
    }

    li.video:hover:before {
        background-color: #bc8f21; /* Gold overlay on hover */
    }

    li.video:hover figure img {
        filter: brightness(1.2); /* Slightly lighten the image on hover */
    }

    /* Video Item Overlay */
    li.video:before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 96%;
        background-color: rgba(0, 0, 0, 0);
        transition: background-color 0.15s ease;
        border-radius: 5px;
    }

/*===== Mobile Responsiveness =====*/
@media screen and (max-width: 800px) {
    li.video {
        width: calc(50% - 0.5em); /* Adjusted for 2-column layout */
    }
}

@media screen and (max-width: 640px) {
    li.video {
        width: 100%; /* Full-width layout on smaller screens */
    }
}