/* content-creation.css - Styles for Content Creation Section */

/* Opsters eSports Videos */
.opsters-videos-container {
    /* Add any other styles you need */
    width: 100%; /* Ensure full width */
}

/* Responsive video container - applies generally to single videos */
.video-container {
    position: relative;
    overflow: hidden;
    width: 100%; /* Make it full width by default */
    max-width: 840px; /* Max width can be based on original iframe width or desired max */
    margin: 20px auto; /* Center it and add vertical spacing */
    background: #000; /* Optional: background for letterboxing if aspect ratios differ slightly */
    box-sizing: border-box;
}

.video-container::before {
    content: "";
    display: block;
    padding-top: 56.25%; /* Default 16:9 Aspect Ratio (height/width * 100) */
}

/* Specific aspect ratio for 840x437.5 videos */
.video-container.aspect-840-437::before {
    padding-top: 52.0833%; /* (437.5 / 840) * 100 */
}

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

/* Video Grid specific styles */
.video-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px; /* Spacing between grid items */
    padding: 10px 0; /* Padding around the grid */
}

/* Wrapper for each video in the grid for better flex control and aspect ratio */
.video-grid-item {
    flex: 1 1 calc(50% - 15px); /* Two columns, accounting for gap */
    max-width: calc(50% - 15px); /* Max width for two columns */
    min-width: 280px; /* Minimum width before breaking to single column if needed */
    position: relative;
    overflow: hidden;
    background: #000; /* Background for the item */
    box-sizing: border-box;
}

.video-grid-item::before { /* Default 16:9 aspect ratio for grid items */
    content: "";
    display: block;
    padding-top: 56.25%;
}

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

/* Responsive adjustments for video grid items */
@media screen and (max-width: 768px) {
    .video-grid-item {
        flex: 1 1 calc(100% - 15px); /* Single column on smaller screens */
        max-width: calc(100% - 15px);
    }
}

@media screen and (max-width: 600px) {
    .video-grid-item {
        /* Ensure it doesn't get smaller than min-width allows if that causes issues,
           but generally 100% width is desired here. */
        min-width: 0; /* Allow it to shrink fully if needed */
    }
}