/* Inline blog CTA: the cta-banner "media" variant placed inside post body
   copy by nm_inject_blog_inline_ctas(). Reuses css/flexible-content/cta-banner.css
   and cta-button.css as-is (both already loaded on blog singles by the
   "load every flexible-content stylesheet" fallback in
   castroverde_enqueue_flexible_styles()) for the row layout itself — only
   the breakpoint mechanism and a couple of context-specific fixes live here.
   See the container-query block below for why. */

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

    /* container-type:inline-size both establishes the container the
       @container rules below query against, and (same as the inline-size
       containment it was set for originally) stops .fixed-cta-text (the CTA
       button's label, white-space:nowrap) from feeding its preferred
       max-content width upward into .article-skeleton's width:fit-content
       sizing — a long "CALL NOW - ..." label would otherwise act as a floor
       that widens the article column at the sidebar's expense. */
    container-type: inline-size;
    container-name: blog-inline-cta;
}

/* Buttons always stacked (one per line) rather than side by side — tried
   sharing a row with equal widths first, but the longer label
   ("REQUEST A CASE EVALUATION") needs more room than a 2-up row leaves once
   the figure image also has real width to itself, and shrinking that room
   further clipped the label's text instead of wrapping it (.cta-btn's
   overflow:hidden, needed for the label's hover-slide animation, resets a
   flex item's automatic min-width to 0 — nothing stopped it shrinking below
   its own content). Stacked avoids the fight entirely.
   align-self:stretch (this block, relative to .cta-banner-content) and
   align-items:stretch (its own children, the buttons) both fill the full
   width of the text column above — same width as each other as a side
   effect of both filling that same box, no separate rule needed for that. */
.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;
}

/* cta-banner.css's own row/stacked split is a VIEWPORT media query
   (max-width: 48em/62em), but this sits in the article column — narrower
   than the viewport at any desktop width because of the sidebar next to it.
   A real desktop viewport (e.g. 1440px+) never matches those queries even
   though the column itself might only be ~850px, so the reference's row
   layout was rendering at its widest (2.5rem title, 62% content column)
   inside a column that only has room for its own ~62em "medium" tier —
   hence the title wrapping hard and ballooning the card's height when this
   was first tried with the reference's unmodified breakpoints.
   A container query re-triggers those exact same tiers off the column's own
   rendered width instead of the viewport's, so the sizing that actually
   fits is the one that applies — row layout still shows on real desktop
   widths (per the user's request), just at the tier its actual width calls
   for, same as it would if the reference component itself were placed in a
   column this narrow. Selectors below are duplicated at matching
   specificity across tiers on purpose, narrowest tier last, so the cascade
   (not a specificity fight) decides which wins when a width matches both. */
@container blog-inline-cta (max-width: 62em) {
    /* Both variants get the same title/description size reduction — neither
       is scoped to one variant, since the reference itself doesn't scope
       these either. */
    .blog-inline-cta .cta-banner-title {
        font-size: 1.75rem;
        white-space: nowrap;
    }

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

    /* 'media': content column + figure. Wider content than the reference's
       own 55% at this tier — specifically enough room for the title above
       to fit on one line at 1.75rem instead of wrapping. */
    .blog-inline-cta .cta-banner-wrapper--media .cta-banner-content {
        max-width: 62%;
        padding: 2.5rem;
    }

    /* Sized to clear the buttons above, which now stretch to the full width
       of .cta-banner-content (62%) — any wider and the figure would start
       overlapping them. Still noticeably bigger than the reference's own
       40% at this tier. */
    .blog-inline-cta .cta-banner-figure {
        width: 37%;
        right: 1rem;
    }

    /* Deliberately NOT copying the reference's own vertical (to-bottom)
       gradient for this tier: that one exists because at the reference's
       true medium-width tier the figure only covers part of a taller card,
       leaving plain background above it that a vertical fade needs to dim.
       Here the title is one line (see above) and the card is short enough
       that a vertical fade instead washed out almost the whole thing,
       hiding the city background photo behind the tint. Leaving ::after
       unset here falls back to the base (widest-tier) rule's horizontal
       "to right" gradient, which only dims the text side and leaves the
       figure/city side clear. */

    /* 'centered': content isn't width-constrained (it's centered, not a
       column beside a figure) — same as the reference, only the padding
       shrinks at this tier. Portraits get the reference's own exact 62em
       treatment (8rem, moved in from 2rem to 1rem) verbatim; unlike the
       figure above they're small enough already not to need a bigger
       allowance in this narrower context. */
    .blog-inline-cta .cta-banner-wrapper--centered .cta-banner-content {
        padding: 2.5rem 1.5rem;
    }

    .blog-inline-cta .cta-banner-portrait {
        width: 8rem;
        aspect-ratio: 3 / 4;
        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;
    }

    .blog-inline-cta .cta-banner-wrapper--media {
        flex-direction: column;

        /* Bootstrap's .align-items-center on this element (in the markup,
           meant for centering content next to the row layout's figure) has
           nothing to center once flex-direction is column — cross-axis
           becomes horizontal, and align-items:center then shrinks
           .cta-banner-content to its own content width instead of
           stretching it, leaving an empty gap on the right. !important is
           required: Bootstrap's utility classes compile with !important
           themselves, so a plain override can never win against it
           regardless of specificity. */
        align-items: stretch !important;
    }

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

    /* Undo the row tier's one-line title — specific to sitting next to the
       figure; stacked mode is full-width with the figure below, so the
       title can wrap normally again. */
    .blog-inline-cta .cta-banner-title {
        white-space: normal;
    }

    /* Hidden rather than shrunk further: the image was the single biggest
       contributor to card height on mobile in both variants, and
       .cta-banner-wrapper already has its own solid background-color (base
       rule in cta-banner.css) behind everything, so removing it entirely
       still leaves a clean solid-teal card instead of an empty gap. */
    .blog-inline-cta .cta-banner-bg,
    .blog-inline-cta .cta-banner-figure,
    .blog-inline-cta .cta-banner-portrait {
        display: none;
    }

    /* 'centered' has no percentage-width column to reset (unlike 'media'
       above) — just the same full-width/compact padding treatment now that
       its portraits are gone. */
    .blog-inline-cta .cta-banner-wrapper--centered .cta-banner-content {
        max-width: 100%;
        padding: 2rem 1.5rem;
    }
}

/* .article-skeleton a repaints every link in the post body black, italic and
   dotted-underlined with !important, which would swallow both CTA buttons.
   Only color needs !important to win here — cta-banner's own rules for
   font-style/text-decoration have no !important, so this selector's higher
   specificity already overrides those on its own. Applies at every
   container width, not just a specific tier. */
.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;
}