/* Content V3 — Two-column intro (content + image) with Poseidon Promise banner below */

.cnt.v3 {

    .cnt-v3-split {
        align-items: stretch;
    }

    .mn_wd {
        z-index: 1;
    }

    /* ── Content-column callout (flair watermark + copy) ───── */

    .cnt-info {
        position: relative;
        overflow: hidden;
        /* Override the theme's centered .cnt-info — copy reads left here. */
        text-align: left;

        /* Bare <Flair> svg as a big faded watermark, anchored right and
           clipped by the card; copy stays left-aligned over the top. */
        svg {
            position: absolute;
            top: 50%;
            right: 1.5rem;
            transform: translateY(-50%);
            height: 145%;
            width: auto;
            opacity: 0.05;
            z-index: 0;
            pointer-events: none;

            /* Neutral gray (the flair path is hardcoded to the accent). */
            path {
                fill: hsl(from var(--text) h 0% l);
            }
        }

        /* Lift the copy above the watermark. */
        p {
            position: relative;
            z-index: 1;
        }
    }

    /* ── Inline phone callout ──────────────────────────────── */

    .cnt-v3-phone {
        --bg-bx-o: 1;
        padding: 1.75rem 2.5rem;
        backdrop-filter: blur(7px);
        -webkit-backdrop-filter: blur(7px);

        p {
            margin: 0;
            font-weight: 600;
            line-height: 1.75;
        }
    }


    /* ── Right-column services grid (home) ─────────────────── */

    .cnt-v3-srv-grd {
        /* Force a stable two-column layout inside the half-width column,
           independent of the .grd container-query breakpoints. */
        --itm-val: 50;

        > li > a {
            height: 100%;
        }

        .cnt-v3-srv-cta {
            margin-top: auto;
            text-align: right;
        }
    }

    /* ── Service card: photo background + icon ─────────────── */

    .cnt-v3-srv-crd {
        position: relative;
        overflow: hidden;
        isolation: isolate;
        min-height: 18rem;
        /* Text sits over a dark photo scrim, so force light foreground. */
        --title-color: var(--white);
        --text-color: var(--white);
        color: var(--white);
        border: solid 2px #af0a12;
    }

    /* Photo layer (Picture renders <picture><img></picture>) */
    .cnt-v3-srv-bg {
        position: absolute;
        inset: 0;
        z-index: 1;

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    /* Legibility scrim above the photo, below the content */
    .cnt-v3-srv-crd::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        background: linear-gradient(
            to top,
            hsl(from var(--black) h s l / 0.85) 0%,
            hsl(from var(--black) h s l / 0.55) 55%,
            hsl(from var(--black) h s l / 0.3) 100%
        );
    }

    /* Lift card content above the photo + scrim */
    .cnt-v3-srv-crd > :not(.cnt-v3-srv-bg) {
        position: relative;
        z-index: 2;
    }

    .cnt-v3-srv-icn {
        display: flex;
        flex-shrink: 0;
        color: var(--link-hover);
        transform: translateY(-.2rem);

        svg {
            width: 2.75rem;
            height: 2.75rem;
        }
    }

    /* Outline "Learn More" button over the photo (overrides the filled v2) */
    .cnt-v3-srv-cta .btn.v2 {
        background-color: transparent;
        border: 1px solid var(--link-hover);
        color: var(--white);
    }

    @media (hover: hover) and (pointer: fine) {
        .cnt-v3-srv-grd a:is(:hover, :focus-visible) .btn.v2 {
            background-color: var(--link-hover);
            border-color: var(--link-hover);
            color: var(--btn-sec-txt);
        }
    }

    @media screen and (max-width: 699px) {
        .cnt-v3-srv-grd {
            --itm-val: 100;
        }
    }


    /* ── Right-column image ────────────────────────────────── */

    .cnt-v3-img {
        align-self: stretch;

        picture, img {
            display: block;
            width: 100%;
            height: 100%;
            min-height: 23rem;
            object-fit: cover;
        }
    }


    /* ── Poseidon Promise banner ───────────────────────────── */

    .cnt-v3-promise {
        --bg-bx-o: 0.85;
        gap: 1.25rem;
        padding: 2.25rem 3.125rem;
        backdrop-filter: blur(7px);
        -webkit-backdrop-filter: blur(7px);
        background-color: hsl( from var(--inner-theme) h s l / 0.85);
    }

    .cnt-v3-promise-l {
        flex-shrink: 0;

        @media screen and (min-width: 1280px) {
            width: var(--three-8ths);
        }
    }

    .cnt-v3-promise-ttl {
        margin: 0;
    }

    .cnt-v3-promise-sub {
        --title-color: var(--fnt-t-co);
        text-transform: uppercase;
        margin: 0;
    }

    .cnt-v3-promise-r {
        flex: 1;
        justify-content: flex-end;
        gap: 1.5rem;
        min-width: 0;
    }

    .cnt-v3-promise-body {
        flex: 1;
        font-size: 1.25rem;
        font-weight: 500;
        line-height: 1.6;
        margin: 0;
        min-width: 0;
    }


    /* ── Responsive ────────────────────────────────────────── */

    @media screen and (max-width: 1279px) {
        .cnt-v3-promise {
            padding: 2rem;
        }

        .cnt-v3-promise-r {
            margin-top: 1rem;
        }
    }

    @media screen and (max-width: 699px) {
        .cnt-v3-phone {
            padding: 1.25rem 1.5rem;
        }

        .cnt-v3-promise {
            padding: 1.5rem;
            gap: 1rem;
        }

        .cnt-v3-img picture,
        .cnt-v3-img img {
            min-height: 15rem;
        }
    }
}