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

body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    background: #f8f9fa;
    color: #222;
    padding: 0;
}

/* ===== Header & Navigation ===== */
header {
    background: #222;
    color: #fff;
    padding: 20px;
    text-align: center;
}

header h1 {
    font-size: 2rem;
    margin-bottom: 10px;
}

nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
}

nav a {
    text-decoration: none;
    color: #fff;
    padding: 8px 15px;
    border-radius: 5px;
    transition: background 0.3s ease;
}

nav a:hover {
    background: #444;
}

/* ===== Main Content ===== */
main {
    padding: 40px 20px;
    max-width: 800px;
    margin: auto;
}

main h1 {
    text-align: center;
    margin-bottom: 40px;
}

/* ===== Offers ===== */
.offer {
    background-color: #fff;
    padding: 20px;
    margin-bottom: 100px;   /* space below each offer */
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    clear: both;            /* prevents overlap */
}

.offer + .offer {
    border-top: 1px solid #ccc;  /* optional divider */
    padding-top: 60px;           /* space from border to content */
}

.offer h1 {
    font-size: 1.8rem;
    margin-bottom: 15px;
}

.offer p {
    font-size: 1.1rem;
    margin-bottom: 20px;
}

/* ===== Product Images ===== */
.product-image img,
.responsive-img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 30px auto; /* spacing between image and button/content */
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* ===== Buttons ===== */
.cta-btn {
    display: inline-block;
    margin-top: 20px;   /* space above next content */
    padding: 12px 25px;
    background: #007bff;
    color: #fff !important;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: background 0.3s ease;
}

.cta-btn:hover {
    background: #0056b3;
}

/* ===== Footer ===== */
footer {
    background: #222;
    color: #ccc;
    text-align: center;
    padding: 15px;
    margin-top: 60px;
    font-size: 0.9rem;
}

/* ==================================== */
/* ===== Motion Video Grid Styles ===== */
/* ==================================== */

.video-grid-container {
    /* KEY TO RESPONSIVENESS: CSS Grid */
    /* Creates a grid and automatically fills columns based on the minmax size. */
    display: grid;
    gap: 20px; /* Space between each video box */
    /* auto-fit: creates as many columns as fit */
    /* minmax(280px, 1fr): columns will be at least 280px wide, max 1 fraction unit */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    /* Reset max-width if main content is too narrow for a wide grid */
    max-width: none; 
    margin: 40px auto; 
}

/* Ensure the grid doesn't break the max-width of the main content area */
/* This is optional, but ensures full-width usage for the grid */
@media (min-width: 840px) {
    main {
        max-width: 1000px; /* Temporarily expand main content for the grid */
    }
}


.video-item {
    text-align: center;
    border: 1px solid #ddd;
    /* Using your standard border-radius and box-shadow */
    border-radius: 8px; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    overflow: hidden; 
    transition: transform 0.3s, box-shadow 0.3s;
}

.video-item:hover {
    transform: translateY(-3px); /* Subtle lift on hover */
    box-shadow: 0 6px 12px rgba(0,0,0,0.15); 
}

.video-item a {
    text-decoration: none;
    color: #222; /* Matches your body text color */
    display: block; 
}

.video-item img {
    /* Matches your existing product-image styling */
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 0; /* Clear the radius on the image itself, let the container handle it */
    box-shadow: none; /* Clear the shadow on the image itself */
}

.caption {
    padding: 15px 10px;
    font-size: 0.95em;
    font-weight: bold;
    background-color: #f1f1f1; /* Light background for caption */
    min-height: 45px; /* Ensures consistent height for captions */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ==================================== */
/* ===== Grid Width Override Fix ====== */
/* ==================================== */

/* Apply this rule when the screen is wide enough to support a wider grid */
@media (min-width: 1000px) {
    /* Temporarily allow the main content area to expand only for the grid. */
    main {
        max-width: 1000px; /* Expands to 1000px on desktop */
    }

    /* Target the grid container and allow it to use the full expanded width */
    .video-grid-container {
        /* Set columns to be explicitly 2 wide on larger screens */
        /* This ensures the items don't stretch too wide if only 2 are present */
        grid-template-columns: 1fr 1fr; 
        
        /* If you want 3 or more columns, keep the auto-fit rule, 
           but make sure the main max-width is large enough (e.g., 1400px) */
    }
}


/* ==================================== */
/* ===== Debug Width Display ====== */
/* ==================================== */

#debug-width {
    position: fixed; /* Keeps it on screen while scrolling */
    top: 0;
    left: 0;
    background-color: red; /* Highly visible debug color */
    color: white;
    padding: 5px 10px;
    font-size: 14px;
    font-weight: bold;
    z-index: 9999; /* Ensures it is always on top of other elements */
}