/**
 * Homepage Video Section & "View More Videos" Button Optimization
 * Poquoson Tree & Crane Service (poquosontree.com)
 *
 * 1. Restores the balanced 2-column video grid layout (fixes corrupted flex-basis).
 * 2. Removes excessive white space and brings the button closer to video thumbnails.
 * 3. Professionally redesigns the "View More Videos" button with brand red background,
 *    crisp white typography, rounded corners, subtle hover animation, and center alignment.
 * 4. Maintains balanced spacing to the next homepage section.
 * 5. Fully responsive across Desktop, Laptop, Tablet, and Mobile.
 */

/* ==========================================================================
   1. VIDEO GRID COLUMNS & SPACING CORRECTION
   ========================================================================== */

/* Video columns container */
.wp-block-columns.are-vertically-aligned-center {
    display: flex !important;
    gap: 28px !important;
    margin-top: 10px !important;
    margin-bottom: 22px !important;
    box-sizing: border-box !important;
}

/* Desktop & Tablet: Balanced 2-Column Layout */
@media screen and (min-width: 782px) {
    .wp-block-columns.are-vertically-aligned-center > .wp-block-column {
        flex: 1 1 calc(50% - 14px) !important;
        flex-basis: calc(50% - 14px) !important;
        flex-grow: 1 !important;
        width: calc(50% - 14px) !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
}

/* Mobile: Single Column Stack */
@media screen and (max-width: 781px) {
    .wp-block-columns.are-vertically-aligned-center {
        flex-direction: column !important;
        gap: 20px !important;
        margin-bottom: 18px !important;
    }

    .wp-block-columns.are-vertically-aligned-center > .wp-block-column {
        flex: 1 1 100% !important;
        flex-basis: 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
}

/* Individual Video Figures & Video Elements */
.wp-block-columns.are-vertically-aligned-center figure.wp-block-video {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 18px 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.wp-block-columns.are-vertically-aligned-center figure.wp-block-video:last-child {
    margin-bottom: 0 !important;
}

.wp-block-columns.are-vertically-aligned-center figure.wp-block-video video {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    display: block !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.12) !important;
    background: #000000 !important;
    object-fit: cover !important;
}

/* Collapse empty spacer column containers between gallery and video section */
.wp-block-columns.is-layout-flex:empty,
.wp-block-columns > .wp-block-column:empty {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
}

/* ==========================================================================
   2. "VIEW MORE VIDEOS" BUTTON CONTAINER & BALANCED SPACING
   ========================================================================== */

/* Outer columns wrapper for the button */
.wp-block-columns.are-vertically-aligned-center + .wp-block-columns,
.wp-block-columns:has(a[href*="video-gallery"]) {
    margin-top: 0 !important;
    margin-bottom: 26px !important;
    padding: 0 !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.wp-block-columns.are-vertically-aligned-center + .wp-block-columns > .wp-block-column:empty {
    display: none !important;
}

.wp-block-columns.are-vertically-aligned-center + .wp-block-columns > .wp-block-column,
.wp-block-columns:has(a[href*="video-gallery"]) > .wp-block-column {
    flex: 1 1 100% !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    text-align: center !important;
}

/* Button flex row container */
.wp-block-buttons:has(a[href*="video-gallery"]) {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ==========================================================================
   3. PROFESSIONAL REDESIGN OF THE "VIEW MORE VIDEOS" BUTTON
   ========================================================================== */

a.wp-block-button__link[href*="video-gallery"],
.wp-block-button.is-style-outline a.wp-block-button__link[href*="video-gallery"] {
    background: #d10014 !important;
    background-color: #d10014 !important;
    color: #ffffff !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    letter-spacing: 0.4px !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
    text-transform: none !important;
    font-style: normal !important;
    padding: 14px 42px !important;
    border-radius: 50px !important;
    border: 2px solid #d10014 !important;
    box-shadow: 0 6px 20px rgba(209, 0, 20, 0.28) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
    max-width: 90% !important;
    box-sizing: border-box !important;
}

/* Reset any nested strong/em tag formatting inside the button */
a.wp-block-button__link[href*="video-gallery"] strong,
a.wp-block-button__link[href*="video-gallery"] em {
    font-style: normal !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    color: #ffffff !important;
}

/* Subtle Hover & Focus Animation */
a.wp-block-button__link[href*="video-gallery"]:hover,
a.wp-block-button__link[href*="video-gallery"]:focus {
    background: #a80010 !important;
    background-color: #a80010 !important;
    border-color: #a80010 !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 28px rgba(209, 0, 20, 0.4) !important;
    text-decoration: none !important;
}

a.wp-block-button__link[href*="video-gallery"]:active {
    transform: translateY(0) !important;
    box-shadow: 0 4px 14px rgba(209, 0, 20, 0.35) !important;
}

/* ==========================================================================
   4. BALANCED SPACING TO NEXT HOMEPAGE SECTION
   ========================================================================== */

/* Maintain clean, balanced breathing room above the following heading */
.wp-block-columns.are-vertically-aligned-center + .wp-block-columns + h3.wp-block-heading,
.wp-block-columns:has(a[href*="video-gallery"]) + h3.wp-block-heading {
    margin-top: 14px !important;
    margin-bottom: 24px !important;
    padding-top: 0 !important;
}

/* Collapse empty h3 tags if any exist between sections */
h3.wp-block-heading:empty {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
}

/* ==========================================================================
   5. RESPONSIVE BREAKPOINT ADAPTATIONS
   ========================================================================== */

@media screen and (max-width: 600px) {
    a.wp-block-button__link[href*="video-gallery"] {
        font-size: 15px !important;
        padding: 12px 30px !important;
        letter-spacing: 0.3px !important;
    }

    .wp-block-columns.are-vertically-aligned-center + .wp-block-columns,
    .wp-block-columns:has(a[href*="video-gallery"]) {
        margin-bottom: 22px !important;
    }
}