/* ==========================================================================
   Section 5 — แม้เศรษฐกิจจะโตต่ำ แต่ภาคธุรกิจก็ยังพอมีทาง (.bp-section-5)
   Desktop: video full-bleed left (mask-fade right edge) | text right
   Mobile : text top / video full-bleed bottom (mask-fade bottom edge)
   ========================================================================== */

/* Override .bp-section default flex centering so we can split the section
   into a two-column layout without an inner max-width container. */
.bp-section-5 {
    display: block;
    padding: 0;
}

/* --- Video pane — full bleed, blends into bg via right-edge mask fade --- */
.bp-section-5__media {
    position: absolute;
    top: 0;
    left: 0;
    width: 55%;
    height: 100%;
    z-index: 2;
    overflow: hidden;
    opacity: 0;
    /* Fade the video itself to transparent on its right edge so the underlying
       bp-section__bg shows through seamlessly. Using mask (not an overlay) so
       there's no tonal mismatch at the boundary. */
    -webkit-mask-image: linear-gradient(to right, #000 55%, transparent 100%);
            mask-image: linear-gradient(to right, #000 55%, transparent 100%);
}
.bp-section-5__video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* If both video sources fail, hide the media pane entirely so the section
   bg shows through — the mask-fade would otherwise leave a dark empty box. */
.bp-section-5__media.is-video-failed {
    display: none;
}

/* --- Text column — occupies the right half, centered in its area --- */
.bp-section-5__content {
    position: relative;
    z-index: 3;
    margin-left: 50%;
    min-height: 100vh;
    padding: 80px 64px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    color: #ffffff;
}
.bp-section-5__title {
    color: #E01C24;
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 12px;
    opacity: 0;
}
.bp-section-5__subtitle {
    color: #ffffff;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 40px;
    opacity: 0;
}
.bp-section-5__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: center;
    color: #ffffff;
    font-size: 1.75rem;
    font-weight: 700;
    text-decoration: none;
    opacity: 0;
    transition: transform 0.25s ease, color 0.25s ease;
}
.bp-section-5__cta:hover {
    transform: translateX(4px);
    color: #E01C24;
}
.bp-section-5__cta-chev {
    color: #bdbdbd;
    font-weight: 700;
}
.bp-section-5__cta:hover .bp-section-5__cta-chev {
    color: #E01C24;
}

/* --- Tablet --- */
@media (max-width: 1024px) {
    .bp-section-5__content { padding: 64px 40px; }
    .bp-section-5__title { font-size: 2.5rem; }
    .bp-section-5__subtitle { font-size: 1.6rem; }
    .bp-section-5__cta { font-size: 1.4rem; }
}

/* --- Mobile: text on top, video full-bleed bottom with bottom-edge fade --- */
@media (max-width: 768px) {
    /* Replace bg-mobile.jpg with solid black — the video mask fades both edges
       into transparent so it blends with the bg naturally; no gradient needed. */
    .bp-section-5 {
        display: flex;
        flex-direction: column;
        background: #000;
    }
    .bp-section-5 > .bp-section__bg { display: none; }

    .bp-section-5__content {
        position: relative;
        z-index: 3;
        order: 1;
        margin-left: 0;
        min-height: 0;
        padding: 64px 20px 32px;
    }
    .bp-section-5__title { font-size: 1.85rem; }
    .bp-section-5__subtitle { font-size: 1.25rem; margin-bottom: 24px; }
    .bp-section-5__cta { font-size: 1.2rem; }

    .bp-section-5__media {
        position: relative;
        order: 2;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 11;
        /* Fade BOTH edges into transparent so the video blends seamlessly into
           the section's black bg above and the gradient below — no hard cuts. */
        -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 78%, transparent 100%);
                mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 78%, transparent 100%);
    }
}