/* ===== Branded CTA (Static Image, auto height) ===== */
/* Full-bleed background; height is content-driven (no image-locked height) */
.cta-wave-container{
    position: relative;
    width: 100%;
    overflow: hidden;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    /* vertical space comes from padding instead of fixed/image height */
    padding-block: clamp(48px, 8vw, 120px);
    padding: 3rem;
}

/* Optional dim overlay */
.cta-overlay{
    position: absolute;
    inset: 0;
    background: var(--cta-overlay, rgba(0,0,0,0.35));
    pointer-events: none;
    z-index: 1;
}

/* Text block – centered vertically within the padded area; Bootstrap container inside */
.cta-wave-text{
    position: relative;       /* no absolute/inset: height is auto */
    z-index: 2;

    display: flex;
    align-items: center;      /* vertical centering within padding */
    justify-content: center;
    text-align: center;
    color: #fff;
    padding: 0 1rem;          /* horizontal breathing room; vertical handled by container padding */
}

.cta-wave-container.content-left  .cta-wave-text { justify-content: flex-start; text-align: left;  }
.cta-wave-container.content-right .cta-wave-text { justify-content: flex-end;   text-align: right; }

/* Bootstrap .container holds the stack and max-width */
.cta-wave-text .container{
    display: flex;
    flex-direction: column;
    align-items: center; /* overridden by alignment variants below */
    gap: 1rem;
}

.cta-wave-container.content-left  .cta-wave-text .container{ align-items: flex-start; }
.cta-wave-container.content-right .cta-wave-text .container{ align-items: flex-end; }

/* Typography */
.cta-wave-heading{
    margin: 0;
    letter-spacing: .02em;
    line-height: 1.1;
    font-size: clamp(1.5rem, 3.2vw + 0.6rem, 2.25rem);
    font-style: italic;
}

.cta-wave-subtext{
    font-style: normal;
    opacity: .95;
    line-height: 1.5;
    font-size: clamp(1rem, 1.2vw + .5rem, 1.125rem);
    max-width: 820px;
}

/* Button – only rendered if text provided */
.cta-wave-button{
    display: inline-block;
    text-decoration: none;
    padding: .6rem 1.5rem;
    border-radius: 999px;
    font-weight: 700;
    transition: opacity .2s ease, transform .15s ease, box-shadow .15s ease;
    box-shadow: 0 6px 16px rgba(0,0,0,.35);
    max-width:500px;
}
.cta-wave-button--dark { background:#000; color:#fff !important; }
.cta-wave-button--light{ background:#fff; color:#111 !important; }
.cta-wave-button:hover{ opacity:.92; transform: translateY(-1px); box-shadow:0 10px 20px rgba(0,0,0,.35); }
/* Shared utility modifiers for heading + subtext */
.cta-wave-heading.is-uppercase {
    text-transform: uppercase;
}
.cta-wave-heading.is-normal,
.cta-wave-subtext.is-normal { font-style: normal; }

.cta-wave-heading.is-italic,
.cta-wave-subtext.is-italic { font-style: italic; }

.cta-wave-heading.is-light,
.cta-wave-subtext.is-light { font-weight: 400; }

.cta-wave-heading.is-bold,
.cta-wave-subtext.is-bold { font-weight: 600; }
/* Mobile tweaks */
@media (max-width: 767px){
    .cta-wave-text{ padding: 0 1rem; } /* vertical comes from container padding-block */
}
