/* Scoped section so styles don't affect other pages */
.feature {
    width: 100%;
    padding: 1.5rem 0; /* vertical spacing for the full-bleed stripe */
    position: relative;
    overflow: visible;
}

/* color tokens for easy tuning */
.feature-sections {
    --cap-white: #ffffff;
    --cap-gray: #e9ecef; /* tuned slightly darker */
}

/* Alternate white / light-gray backgrounds for the full-bleed stripes */
.feature-sections > .feature:nth-child(odd) {
    background: var(--cap-white);
}
.feature-sections > .feature:nth-child(even) {
    background: var(--cap-gray);
}

.feature__media-wrapper {
    max-width: 35%;
    margin-left: auto;
    margin-right: auto;
}

/* Decorative SVG wave separators */
.feature__wave {
    display: block;
    width: 100%;
    height: 96px; /* deeper wave */
    line-height: 0;
    margin-top: 0; /* remove extra top gap */
    margin-bottom: -25px; /* increase overlap to avoid seam */
    pointer-events: none;
}

.feature__wave svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* inner content sits above waves */
.feature .container {
    position: relative;
    z-index: 2;
}

/* odd stripe wave fills into the even (gray) color */
.feature-sections > .feature:nth-child(odd) .feature__wave path {
    fill: var(--cap-gray);
}

/* even stripe wave fills into the odd (white) color */
.feature-sections > .feature:nth-child(even) .feature__wave path {
    fill: var(--cap-white);
}

/* Vertical spacing for content inside each row's columns */
.feature .row > [class*="col-"] {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* Remove extra bottom spacing inside bleed so waves sit flush */
.feature .container.mb-5 {
    margin-bottom: 0;
    margin-top: 0;
}

.feature .row.mb-5 {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .feature__media-wrapper {
        max-width: 100%;
    }

    /* On small screens keep stripes compact; keep backgrounds so waves show */
    .feature-sections > .feature {
        padding-left: 0;
        padding-right: 0;
    }

    .feature .row > [class*="col-"] {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }
    /* tuned for mobile: reduce overall height but increase overlap so
       the curve blends across sections without a visible seam */
    .feature__wave {
        display: block;
        height: 60px; /* reduce height further so ends aren't tall */
        line-height: 0;
        margin-top: 0;
        margin-bottom: -36px; /* slightly larger overlap to keep sections blended */
        pointer-events: none;
        transform: translateZ(0); /* help with subpixel rendering */
        overflow: hidden;
    }

    /* ensure SVG fills the wave container and avoid tiny gaps from scaling */
    .feature__wave svg {
        display: block;
        height: 100%;
        width: 100%;
        preserveAspectRatio: none;
    }

    /* nudge the path up slightly on mobile to avoid a thin line caused by
       anti-aliasing at the SVG boundary */
    .feature__wave svg path {
        transform: translateY(2px); /* lower the path so end peaks sit lower */
        will-change: transform;
    }
}

.feature__media {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.feature__media-iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}