/* Breakout block — full-width image panel with overlay text. */

/* 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
   (hero.css) — shares its preset table via lcms_overlay_style_vars()
   (scrim-overlay-consolidation sprint, TODO.md C39). */
.block-breakout {
    position: relative;
    isolation: isolate;
}

/* Tint layer — flat colour, or a linear-gradient when --hero-tint-image is
   set (the 'gradient' preset). Sits above the section's background-image,
   below the content. CSS var names stay --hero-* even though this is now
   shared by Breakout — see includes/overlay-helpers.php for why the
   rename is deferred. */
.block-breakout::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;
}

/* Vignette layer — radial fade, dark at the corners. Strength 0..1.
   Renders transparent (no visual cost) when --hero-vignette-strength is 0. */
.block-breakout::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;
}

/* Ensure the inner container sits above the overlay pseudo-elements.
   z-index 3 sits above ::before (1) and ::after (2) — same convention as
   Hero's .block-hero__inner. */
.block-breakout__inner {
    position: relative;
    z-index: 3;
}

/* Height variants */
.block-breakout--height-small {
    min-height: 30vh;
}

.block-breakout--height-medium {
    min-height: 50vh;
}

.block-breakout--height-large {
    min-height: 70vh;
}

.block-breakout--height-full {
    min-height: 100vh;
}

/* Fixed (parallax) background */
.block-breakout--fixed {
    background-attachment: fixed;
}

/* Disable fixed attachment on touch devices (iOS ignores it / causes jank). */
@supports (-webkit-touch-callout: none) {
    .block-breakout--fixed {
        background-attachment: scroll;
    }
}

/* Layout — left/right 2-column grid */
.block-breakout__grid {
    display: block;
}

@media (min-width: 768px) {
    .block-breakout__grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 3rem;
    }

    .block-breakout__spacer {
        display: block;
    }
}

/* Content background panel — semi-transparent backdrop for legibility.
   Uses a pseudo-element so opacity affects only the background, not text. */
.block-breakout__content-bg {
    position: relative;
    padding: 2rem;
    border-radius: var(--border-radius, 8px);
}

.block-breakout__content-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
}

.block-breakout__content-bg .block-breakout__content {
    position: relative;
    z-index: 1;
}

.block-breakout__content-bg--brand::before {
    background-color: var(--color-brand-primary, #153f80);
    opacity: 0.75;
}

.block-breakout__content-bg--dark::before {
    background-color: #000;
    opacity: 0.6;
}

.block-breakout__content-bg--light::before {
    background-color: #fff;
    opacity: 0.7;
}

.block-breakout__content-bg--light .block-breakout__title,
.block-breakout__content-bg--light .block-breakout__subtitle {
    color: var(--color-text-dark, #1a1a1a);
}