/* Callout V1 — Horizontal CTA bar (repurposed from the centered callout) */

.clt.v1 {
    /* Rounded card corners (deep-tide defaults --bdr-rds-crd to 0) */
    --bdr-rds-crd: 1.11rem;

    /* Frosted brand bar — near-solid maroon (mirrors ContentV1's CTA card) */
    .bg-bx.frst-bg {
        --frst-bg-o: 0.85;
        --frst-blur: 7px;
        padding: 2rem 2.78rem;
        border: none;

        @media screen and (min-width: 1280px) {
            & {
                gap: 4.4rem;

                .itm {
                    gap: 3.33rem;
                }
            }
        }

        @media screen and (max-width: 1279px) {
            & {
                padding: 2rem;
            }
        }

        @media screen and (max-width: 699px) {
            & {
                gap: 1rem;
                padding: 1.5rem;
            }
        }
    }

    /* Subheading — uppercase, white so it contrasts the gold header */
    .clt-v1-sub {
        --title-color: var(--text-color);
        font-family: var(--fnt-t);
        font-weight: var(--fnt-t-co-w);
        text-transform: uppercase;
        margin: 0;
    }

    /* "About Us" button — force the gold accent. The default ulk-bg v1 button
       resolves to --btn-hvr-pry (a dark red), which reads as dark-on-dark
       against the maroon bar. Gold fill + maroon label makes it pop. */
    .bg-bx .btn.v1 {
        --btn-bg: var(--accent);
        --btn-clr: var(--background);

        @media (hover: hover) and (pointer: fine) {
            &:is(:hover, :focus-visible) {
                --btn-bg: var(--background);
                --btn-clr: var(--accent);
                background-color: var(--btn-bg);
            }
        }
    }
}