/* ═══════════════════════════════════════
   VOV Course Banners
   WordPress block-based layout with
   custom styling for banner components
   ═══════════════════════════════════════ */

/* ── Outer wrapper (wp:columns) ── */
.vov-course-cards {
    gap: 24px !important;
    margin-bottom: 40px;
    font-family: 'Source Sans 3', sans-serif;
}

/* ── Each banner card (wp:column > wp:group) ── */
.vov-banner {
    border-radius: 4px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    padding: 0 !important;
    height: 100%;
}

/* Force outer columns to stretch equally */
.vov-course-cards > .wp-block-column {
    display: flex !important;
    flex-direction: column;
}

.vov-banner:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 36px rgba(0, 0, 0, 0.18);
}

/* ── Inner columns (text + photo split) ── */
.vov-banner-inner {
    gap: 0 !important;
    margin-bottom: 0 !important;
    min-height: 320px;
    flex: 1 1 auto !important;
}

/* Ensure the wp:group inner container stretches */
.vov-banner > .wp-block-group__inner-container,
.vov-banner > .is-layout-flow {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    padding: 0 !important;
}

.vov-banner-inner .wp-block-column {
    margin: 0 !important;
}

/* ── Text panel ── */
.vov-text-panel {
    background: #ffffff;
    padding: 24px 22px !important;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    border-right: 1px solid #e0e6ed;
}

/* Push CTA button to the bottom of the text panel */
.vov-cta {
    margin-top: auto !important;
}

.vov-flipped .vov-text-panel {
    border-right: none;
    border-left: 1px solid #e0e6ed;
    text-align: right;
}

.vov-flipped .vov-text-panel .wp-block-buttons {
    justify-content: flex-end;
}

/* ── Photo panel ── */
.vov-photo-panel {
    background: #f0f4f8;
    padding: 0 !important;
    position: relative;
    overflow: hidden;
    min-height: 100%;
}

.vov-photo-panel .wp-block-image {
    margin: 0;
    height: 100%;
}

.vov-photo-panel .wp-block-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    min-height: 320px;
}

.vov-photo-panel .wp-block-image a {
    display: block;
    height: 100%;
}

/* ── Tag line ── */
.vov-tag {
    font-family: 'Oswald', sans-serif !important;
    font-size: 10px !important;
    font-weight: 400 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase;
    color: #c8102e !important;
    margin-bottom: 4px !important;
}

/* ── Title ── */
.vov-title {
    font-family: 'Oswald', sans-serif !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #1a2a3a !important;
    line-height: 1.08 !important;
    text-transform: uppercase;
    margin-bottom: 8px !important;
    margin-top: 0 !important;
}

/* ── Subtitle ── */
.vov-sub {
    font-family: 'Source Sans 3', sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #5a7080 !important;
    line-height: 1.55 !important;
    margin-bottom: 14px !important;
}

/* ── Divider ── */
.vov-divider {
    border-top: 1px solid #e0e6ed !important;
    margin: 0 0 12px 0 !important;
}

/* ── Stats row ── */
.vov-stats {
    display: flex !important;
    margin-bottom: 16px !important;
    gap: 0 !important;
    padding: 0 !important;
}

.vov-stats .wp-block-column {
    text-align: center;
    padding: 0 !important;
    margin: 0 !important;
}

.vov-stats .wp-block-column + .wp-block-column {
    border-left: 1px solid #e0e6ed;
}

.vov-stat-num {
    font-family: 'Oswald', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #c8102e !important;
    line-height: 1 !important;
    margin-bottom: 0 !important;
}

.vov-stat-lbl {
    font-family: 'Source Sans 3', sans-serif !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    color: #7a9aaa !important;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-top: 2px !important;
    margin-bottom: 0 !important;
}

/* ── CTA button ── */
.vov-cta .wp-block-button__link,
.vov-cta a.wp-block-button__link {
    font-family: 'Oswald', sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase;
    background: #c8102e !important;
    color: #fff !important;
    padding: 8px 14px !important;
    border-radius: 3px !important;
    text-decoration: none !important;
    transition: background-color 0.2s ease;
}

.vov-cta .wp-block-button__link:hover,
.vov-cta a.wp-block-button__link:hover {
    background: #a00d24 !important;
    color: #fff !important;
}

/* ═══════════════════════════════════════
   Responsive
   ═══════════════════════════════════════ */
@media (max-width: 768px) {
    .vov-course-cards {
        flex-direction: column !important;
        gap: 20px !important;
    }

    .vov-banner-inner {
        flex-direction: column !important;
        min-height: auto;
    }

    .vov-banner-inner .wp-block-column {
        flex-basis: 100% !important;
    }

    /* Flipped card: put text before photo on mobile */
    .vov-flipped .vov-banner-inner {
        flex-direction: column !important;
    }

    .vov-flipped .vov-banner-inner .vov-text-panel {
        order: -1;
    }

    .vov-text-panel {
        padding: 20px 18px !important;
        border-right: none !important;
        border-bottom: 1px solid #e0e6ed;
    }

    .vov-flipped .vov-text-panel {
        border-left: none !important;
        text-align: left;
    }

    .vov-flipped .vov-text-panel .wp-block-buttons {
        justify-content: flex-start;
    }

    .vov-photo-panel .wp-block-image img {
        min-height: 200px;
    }

    /* Keep stats row horizontal on mobile */
    .vov-stats {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
    }

    .vov-stats .wp-block-column {
        flex-basis: 0 !important;
        flex-grow: 1 !important;
    }
}