/* CTA block — supplementary styles beyond Tailwind utilities. */

/* Stacking context for the overlay pseudo-elements below — without
   `isolation: isolate` ::before / ::after can leak into a parent stacking
   context if a parent has transform/filter/etc. Same mechanism as Hero/
   Breakout — shares their preset table via lcms_overlay_style_vars()
   (scrim-overlay-consolidation sprint, TODO.md C39). Only relevant when
   the default variant has a background image; harmless no-op otherwise
   (--hero-tint-opacity defaults to 0). Nav-tile uses its own
   .block-cta-nav-tile class and the separate .lcms-scrim component —
   unaffected by these rules. */
.block-cta {
    position: relative;
    isolation: isolate;
}

.block-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background-color: var(--hero-tint-color, transparent);
    background-image: var(--hero-tint-image, none);
    opacity: calc(var(--hero-tint-opacity, 0) * var(--hero-strength-multiplier, 1));
    pointer-events: none;
}

.block-cta::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    background: radial-gradient(
        ellipse at center,
        transparent 50%,
        rgba(0, 0, 0, calc(var(--hero-vignette-strength, 0) * var(--hero-strength-multiplier, 1))) 100%
    );
    pointer-events: none;
}

.block-cta__inner {
    position: relative;
    z-index: 3;
}

/* Links inside brand/dark CTA body inherit the reversed text colour. */
.block-cta--brand .block-cta__body a,
.block-cta--dark .block-cta__body a {
    color: inherit;
    text-decoration: underline;
}

.block-cta--brand .block-cta__body a:hover,
.block-cta--dark .block-cta__body a:hover {
    opacity: 0.75;
}

/* Button-on-brand-surface styling now lives in lcms-core.css
   (.lcms-bg-brand .btn-*) — token-driven, all variants, any brand-bg block.
   The CTA brand variant carries .lcms-bg-brand (lcms_background_classes), so
   it's covered automatically; the old .block-cta--brand .btn-primary provision
   was removed. */

/* Horizontal layout — stacked on mobile, side-by-side on desktop. */
.block-cta__row {
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .block-cta__row {
        flex-direction: row;
        text-align: left;
        align-items: center;
        justify-content: space-between;
        gap: 3rem;
    }

    .block-cta__text {
        flex: 1;
    }

    .block-cta__actions {
        flex-shrink: 0;
    }
}

/* Vertical layout, left/right text_align — same 60/40 grid pattern as
   Hero's split layout (block-hero__grid), keeping the text column
   capped at ~60% instead of stretching full-width when pinned to one
   edge. `.block-cta__secondary` holds the `secondary_html` field
   (Gravity Forms embed, etc.); `.block-cta__spacer` is its empty-state
   sibling, holding the grid's shape open with nothing in it — same
   relationship media_type/feature_image have to Hero's own spacer.
   Center alignment doesn't use this grid at all — single column,
   full-width, unaffected. */
.block-cta__grid {
    display: block;
}

@media (min-width: 768px) {
    .block-cta__grid {
        display: grid;
        grid-template-columns: 3fr 2fr;
        gap: 3rem;
        align-items: center;
    }

    /* Force content/secondary to fill their grid column so width is
       determined by the column (3fr/2fr), not intrinsic content size. */
    .block-cta__grid .block-cta__content,
    .block-cta__grid .block-cta__secondary {
        width: 100%;
    }

    .block-cta__spacer {
        display: block;
    }
}

/* ─────────────────────────────────────────────────────────────
   nav-tile variant — boxed CTA tile for top-level nav pages.
   Background image fills the tile; content sits flex-column with
   heading anchored top and buttons anchored bottom, offset to one
   side. Use multiple instances with alternating content_align.
   ─────────────────────────────────────────────────────────────── */

.block-cta-nav-tile {
    position: relative;
    overflow: hidden;
    border-radius: var(--border-radius-lg, 16px);
    box-shadow: var(--block-shadow, 0 4px 6px -1px rgba(0,0,0,0.1));
    isolation: isolate;
    /* Flex column lets the content child stretch to fill min-height —
       bg + overlay are absolutely-positioned so they don't participate. */
    display: flex;
    flex-direction: column;
}

.block-cta-nav-tile__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* The image overlay is now rendered via the generic .lcms-scrim
   component (lcms-core.css), driven by brand-config scrim.* defaults
   and per-block scrim_color / scrim_direction overrides. */

/* Tile content — flex column that fills the tile height. Heading + body
   stay grouped at the top; actions are pushed to the bottom via
   margin-top:auto so any body text flows directly under the heading
   rather than floating in the middle. */
.block-cta-nav-tile__content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 2rem 1.5rem;
    color: #fff;
    flex: 1; /* fills the tile's min-height */
}

.block-cta-nav-tile__actions {
    margin-top: auto;
}

@media (min-width: 768px) {
    .block-cta-nav-tile__content {
        padding: 3rem 3rem;
        max-width: 55%;
    }

    .block-cta-nav-tile--right .block-cta-nav-tile__content {
        margin-left: auto;
    }

    .block-cta-nav-tile--center .block-cta-nav-tile__content {
        margin-left: auto;
        margin-right: auto;
    }
}

/* Right-aligned variant — text and buttons follow the content offset.
   Auto-derived from content_align so the alternating pattern reads
   correctly without needing a separate text_align field. */
.block-cta-nav-tile--right .block-cta-nav-tile__content {
    text-align: right;
}

.block-cta-nav-tile--right .block-cta-nav-tile__actions > * {
    justify-content: flex-end;
}

/* Centered variant — same auto-derived pairing as right above. The
   scrim itself stays the default (non-`--right`) content-side gradient
   — that gradient is a two-sided (near/far edge) sweep with no
   center-anchored equivalent, so a centered tile reads slightly
   asymmetric (darker toward the left) rather than perfectly even. Good
   enough for text legibility; a true center-anchored scrim gradient is
   a real follow-up if this gets used a lot, not a blocker for shipping
   the alignment option itself. */
.block-cta-nav-tile--center .block-cta-nav-tile__content {
    text-align: center;
}

.block-cta-nav-tile--center .block-cta-nav-tile__actions > * {
    justify-content: center;
}

/* Min-height presets. */
.block-cta-nav-tile--h-small  { min-height: 220px; }
.block-cta-nav-tile--h-medium { min-height: 320px; }
.block-cta-nav-tile--h-large  { min-height: 440px; }

@media (min-width: 768px) {
    .block-cta-nav-tile--h-small  { min-height: 260px; }
    .block-cta-nav-tile--h-medium { min-height: 380px; }
    .block-cta-nav-tile--h-large  { min-height: 520px; }
}

/* Background crop anchor is set inline from the attachment focal point
   (see nav-tile.php); the base .block-cta-nav-tile__bg rule above keeps a
   center fallback for images that carry no focal meta. */

/* Buttons inside a nav-tile — left-aligned. */
.block-cta-nav-tile__actions > * {
    justify-content: flex-start;
}