/* Banner + — i2t3 component styles
 * Richer banner (vs. the Bootstrap "banner"): eyebrow label, headline, lead
 * text, up to two call-to-action buttons and content alignment. Background,
 * min-height, vertical alignment and parallax come from the global layout
 * system, so they are intentionally NOT re-implemented here.
 */

.i2t3-banner-plus__inner { max-width: 60rem; }

/* Breadcrumb above the headline (rendered via lib.breadcrumb) */
.i2t3-banner-plus__breadcrumb {
    font-size: .875rem;
    margin-bottom: .75rem;
    opacity: .85;
}

/* Content background overlay: a tinted, blurred box behind the text so it
 * stays readable on busy background images. The tint colour + blur sit on a
 * ::before layer, the text content stays above via z-index. */
.i2t3-banner-plus__inner--overlay {
    position: relative;
    z-index: 0;
    padding: 1.5rem;
    border-radius: .5rem;
    overflow: hidden;
}
.i2t3-banner-plus__inner--overlay > * { position: relative; z-index: 1; }
.i2t3-banner-plus__inner--overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: var(--i2t3-bannerplus-overlay, var(--bs-primary, #0d6efd));
    opacity: .5;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    pointer-events: none;
}
@media (min-width: 576px) {
    .i2t3-banner-plus__inner--overlay { padding: 3rem; }
}
.i2t3-banner-plus__inner--overlay-primary   { --i2t3-bannerplus-overlay: var(--bs-primary,   #0d6efd); }
.i2t3-banner-plus__inner--overlay-secondary { --i2t3-bannerplus-overlay: var(--bs-secondary, #6c757d); }
.i2t3-banner-plus__inner--overlay-dark      { --i2t3-bannerplus-overlay: var(--bs-dark,      #212529); }
.i2t3-banner-plus__inner--overlay-light     { --i2t3-bannerplus-overlay: var(--bs-light,     #f8f9fa); }
.i2t3-banner-plus__eyebrow {
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 600;
    font-size: .85rem;
    margin-bottom: .5rem;
    opacity: .85;
}
.i2t3-banner-plus__title { margin-bottom: 1rem; }
.i2t3-banner-plus__text { margin-bottom: 1.5rem; }
.i2t3-banner-plus__text > :last-child { margin-bottom: 0; }
.i2t3-banner-plus__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* Content alignment */
.i2t3-banner-plus--align-center { text-align: center; }
.i2t3-banner-plus--align-center .i2t3-banner-plus__inner { margin-left: auto; margin-right: auto; }
.i2t3-banner-plus--align-center .i2t3-banner-plus__actions { justify-content: center; }
.i2t3-banner-plus--align-right { text-align: right; }
.i2t3-banner-plus--align-right .i2t3-banner-plus__inner { margin-left: auto; }
.i2t3-banner-plus--align-right .i2t3-banner-plus__actions { justify-content: flex-end; }