/* AXM-768: CTA Popups. Layered on top of Bulma's .modal/.modal-content/.delete
   primitives - only the bits Bulma doesn't already provide live here. */

.cta-popup-card {
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
    max-width: 960px;
    /* A real fixed target height (not just an upper bound), so the card
       always renders at this size regardless of content length - falls
       back to something smaller than that on short viewports. */
    height: min(560px, calc(100vh - 80px));
    position: relative;
    display: flex;
}

.cta-popup-close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
}

.cta-popup-columns {
    margin: 0 !important;
    flex: 1 1 auto;
    /* Without this a flex item won't shrink below its content's natural
       height, which is what lets the content column scroll instead of
       stretching the row (and the image with it) to fit everything. */
    min-height: 0;
}

.cta-popup-image-column {
    position: relative;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    min-height: 0;
}

.cta-popup-image-overlay {
    position: absolute;
    inset: 0;
    opacity: 0.65;
}

.cta-popup-overlay-text {
    position: relative;
    z-index: 1;
    color: #fff;
    font-family: Impact, Arial, sans-serif;
    text-transform: uppercase;
    line-height: 1.15;
    padding: 40px;
    margin: 0;
}

.cta-popup-content-column {
    display: flex;
    min-height: 0;
}

.cta-popup-content-inner {
    /* Fills the column's already-resolved flex height and scrolls within
       it, rather than relying on percentage heights (which don't reliably
       resolve through a flex chain that has no explicit ancestor height).
       Deliberately not vertically centered: centering a flex container
       that can overflow makes the start of the content unreachable by
       scrolling, which matters more than the polish on short content. */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 48px 40px;
}

.cta-popup-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: #4ca700;
    color: #fff;
    margin-bottom: 16px;
}

.cta-popup-icon .icon {
    color: #fff;
}

.cta-popup-buttons {
    margin-top: 24px;
}

@media screen and (max-width: 768px) {
    /* Stack instead of side-by-side. Deliberately not using Bulma's
       is-multiline/is-*-mobile column classes for this - combining
       flex-wrap with a fixed-height stretch/scroll container like this
       one breaks cross-axis stretch (children stop being constrained to
       the row's height, so overflow-y:auto stops doing anything). */
    .cta-popup-columns {
        flex-direction: column;
    }

    .cta-popup-image-column {
        flex: 0 0 auto;
        min-height: 180px;
    }

    .cta-popup-content-inner {
        padding: 32px 24px;
    }

    .cta-popup-overlay-text {
        padding: 24px;
        font-size: 1.5rem;
    }
}