/* ============================================================
   Lead Magnets — banner styles
   Theme each portal by overriding the CSS vars in the portal's stylesheet.
   ============================================================ */

.lm-banner {
    --lm-bg: #0a1530;
    --lm-bg-overlay: rgba(10, 21, 48, 0.78);
    --lm-color: #ffffff;
    --lm-cta-bg: #1d6bff;
    --lm-cta-bg-hover: #1656d6;
    --lm-cta-color: #ffffff;
    --lm-radius: 8px;

    position: relative;
    margin: 32px 0;
    padding: 32px 24px;
    background-color: var(--lm-bg);
    background-size: cover;
    background-position: center;
    border-radius: var(--lm-radius);
    color: var(--lm-color);
    overflow: hidden;
    text-align: center;
}

.lm-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--lm-bg-overlay);
    z-index: 0;
}

.lm-banner__inner {
    position: relative;
    z-index: 1;
    max-width: 520px;
    margin: 0 auto;
}

.lm-banner--inline .lm-banner__inner {
    padding-bottom: 30px!important;
}

.lm-banner__title {
    margin: 0 0 12px;
    font-size: 2.25rem!important;
    line-height: 1.25;
    color: #fff!important;
}

aside.lm-banner--sidebar .lm-banner__title {
    margin: 0 0 12px;
    font-size: 1.40rem!important;
    line-height: 1.25;
    font-weight: 600!important;
    color: #fff!important;
    padding: 20px 0!important;
    line-height: 2rem!important;
}

.lm-banner__text {
    margin: 0 0 20px;
    font-size: 0.95rem;
    line-height: 1.5;
}

.lm-banner__text p { margin: 0 0 8px; }
.lm-banner__text p:last-child { margin-bottom: 0; }

a.lm-banner__cta {
    display: inline-block;
    padding: 12px 24px;
    font-size: 1.1rem!important;
    background: var(--lm-cta-bg);
    color: #fff!important;
    text-decoration: none!important;
    border-radius: 4px;
    font-weight: 600;
    transition: background 0.15s ease;
}

aside.lm-banner--sidebar a.lm-banner__cta {
    font-size: 1rem!important;
    font-weight: 500!important;
}

.lm-banner__cta:hover,
.lm-banner__cta:focus {
    background: var(--lm-cta-bg-hover);
    color: var(--lm-cta-color);
}

/* Sidebar variant — tighter for narrow column */
.lm-banner--sidebar {
    margin: 0;
    padding: 24px 18px;
}

.lm-banner--sidebar .lm-banner__title {
    font-size: 1.1rem;
}

.lm-banner--sidebar .lm-banner__text {
    font-size: 0.875rem;
}

.lm-banner--sidebar .lm-banner__cta {
    padding: 10px 20px;
    font-size: 0.875rem;
    width: 100%;
    box-sizing: border-box;
}

/* ============================================================
   Aside column integration.
   Uses !important on grid-template-columns to win over the
   theme's existing .single-layout:has(.single-layout__toc) rule
   that gets loaded after this stylesheet.
   ============================================================ */

.single-layout__aside {
    min-width: 0;
}

.single-layout__aside .lm-banner--sidebar {
    position: sticky;
    top: calc(var(--header-height, 60px) + 16px);
}

@media (min-width: 1024px) {

    /* Case A: TOC + aside → 5 columns */
    .single-layout.single-layout--has-aside:has(.single-layout__toc) {
        grid-template-columns:
            1fr
            260px
            minmax(0, var(--w-content))
            260px
            1fr !important;
        column-gap: var(--sp-6) !important;
    }

    .single-layout.single-layout--has-aside:has(.single-layout__toc) > .single-layout__toc {
        grid-column: 2 !important;
    }

    .single-layout.single-layout--has-aside:has(.single-layout__toc) > .single-layout__main {
        grid-column: 3 !important;
    }

    .single-layout.single-layout--has-aside:has(.single-layout__toc) > .single-layout__aside {
        grid-column: 4 !important;
        align-self: start;
    }

    /* Case B: aside without TOC → 4 columns */
    .single-layout.single-layout--has-aside:not(:has(.single-layout__toc)) {
        grid-template-columns:
            1fr
            minmax(0, var(--w-content))
            260px
            1fr !important;
        column-gap: var(--sp-6) !important;
    }

    .single-layout.single-layout--has-aside:not(:has(.single-layout__toc)) > .single-layout__main {
        grid-column: 2 !important;
    }

    .single-layout.single-layout--has-aside:not(:has(.single-layout__toc)) > .single-layout__aside {
        grid-column: 3 !important;
        align-self: start;
    }

    /* Inline banner stays visible on desktop too (shows at ~50% of content
       in addition to the sidebar banner on the right). */
}

/* Tablet / mobile: hide aside, inline banner handles mobile */
@media (max-width: 1023px) {
    .single-layout__aside { display: none !important; }
}

@supports not selector(:has(*)) {
    .single-layout__aside { display: none; }
}