/* Inline blog CTA: both cta-banner variants ("media" and "centered") placed
   inside post body copy by nm_inject_blog_inline_ctas(). Reuses cta-banner.css
   and cta-button.css as-is for the row layout itself — only the breakpoint
   mechanism and a few context-specific fixes live here. */

.blog-inline-cta {
    margin-block: 2.5rem;
    max-width: 100%;
    clear: both;

    /* Establishes the @container query below, and keeps .fixed-cta-text's
       nowrap label from widening .article-skeleton's width:fit-content. */
    container-type: inline-size;
    container-name: blog-inline-cta;
}

/* Buttons stacked one per line — a row doesn't leave enough room for
   "REQUEST A CASE EVALUATION" once the figure/portraits also need space. */
.blog-inline-cta .cta-banner-actions {
    flex-direction: column;
    align-items: stretch;
    align-self: stretch;
    margin-top: 0.75rem;
}

.blog-inline-cta .cta-btn {
    justify-content: center;
}

/* Caps the text column to roughly the description's 2-line width instead of
   the reference's unconstrained 'centered' content, since this placement is
   narrower (in-article) than the reference's full page section. */
.blog-inline-cta .cta-banner-wrapper--centered .cta-banner-content {
    max-width: 40rem;
}

/* Portraits sized up from the reference's 14rem/16rem. aspect-ratio 2/3
   (not the reference's 3/4) matches the uploaded photos' real ~0.65 ratio
   closer, so cover crops only a sliver off the bottom instead of a chunk. */
.blog-inline-cta .cta-banner-wrapper--centered .cta-banner-portrait {
    width: 16rem;
    max-width: 28%;
    aspect-ratio: 2 / 3;
    height: auto;
}

/* cta-banner.css's row/stacked split is a VIEWPORT query, but this sits in
   the article column (narrower than the viewport due to the sidebar), so a
   container query re-triggers the same tiers off the column's own width
   instead — same layout, just at the tier the column's real width calls for. */
@container blog-inline-cta (max-width: 62em) {
    .blog-inline-cta .cta-banner-title {
        font-size: 1.75rem;
        white-space: nowrap;
    }

    .blog-inline-cta .cta-banner-desc {
        font-size: 1rem;
    }

    /* Wider than the reference's 55% — room for the title to stay one line. */
    .blog-inline-cta .cta-banner-wrapper--media .cta-banner-content {
        max-width: 62%;
        padding: 2.5rem;
    }

    /* Sized to clear the full-width button row above. */
    .blog-inline-cta .cta-banner-figure {
        width: 37%;
        right: 1rem;
    }

    .blog-inline-cta .cta-banner-wrapper--centered .cta-banner-content {
        max-width: 30rem;
        padding: 2.5rem 1.5rem;
    }

    .blog-inline-cta .cta-banner-portrait {
        width: 8rem;
        aspect-ratio: 3 / 4;
        height: auto;
    }

    /* Same 2/3 fix as the base tier — repeated here (not left to the rule
       above) because this selector shares specificity with the base-tier
       one, so its own aspect-ratio would otherwise leak in over 3/4. */
    .blog-inline-cta .cta-banner-wrapper--centered .cta-banner-portrait {
        width: 10rem;
        aspect-ratio: 2 / 3;
        height: auto;
    }

    .blog-inline-cta .cta-banner-portrait-left {
        left: 1rem;
    }

    .blog-inline-cta .cta-banner-portrait-right {
        right: 1rem;
    }
}

@container blog-inline-cta (max-width: 48em) {
    .blog-inline-cta .cta-banner-wrapper {
        min-height: auto;
    }

    /* !important needed to beat Bootstrap's own .align-items-center utility. */
    .blog-inline-cta .cta-banner-wrapper--media {
        flex-direction: column;
        align-items: stretch !important;
    }

    .blog-inline-cta .cta-banner-content {
        order: 1;
    }

    .blog-inline-cta .cta-banner-title {
        white-space: normal;
    }

    /* Hidden, not shrunk — the wrapper already has its own solid bg-color. */
    .blog-inline-cta .cta-banner-bg,
    .blog-inline-cta .cta-banner-figure,
    .blog-inline-cta .cta-banner-portrait {
        display: none;
    }

    .blog-inline-cta .cta-banner-wrapper--media .cta-banner-content {
        max-width: 100%;
        padding: 2rem 1.5rem;
    }

    /* Left-aligned like 'media' once the portraits are gone — centered text
       has nothing left to visually balance against at this width. */
    .blog-inline-cta .cta-banner-wrapper--centered .cta-banner-content {
        max-width: 100%;
        padding: 2rem 1.5rem;
        align-items: flex-start;
        text-align: left;
    }
}

/* .article-skeleton a repaints every link black/italic/underlined with
   !important — this wins back the CTA buttons' own colors. */
.article-skeleton .blog-inline-cta .cta-btn-primary,
.article-skeleton .blog-inline-cta .cta-btn-primary:hover,
.article-skeleton .blog-inline-cta .cta-btn-primary:visited {
    color: var(--bs-secondary-500) !important;
    font-style: normal;
    text-decoration: none;
}

.article-skeleton .blog-inline-cta .cta-btn-secondary,
.article-skeleton .blog-inline-cta .cta-btn-secondary:hover,
.article-skeleton .blog-inline-cta .cta-btn-secondary:visited {
    color: var(--bs-white) !important;
    font-style: normal;
    text-decoration: none;
}