/* ── Banner Carousel ── */
.pulse-banner-carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 8px;
}

.pulse-banner-slides {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.pulse-banner-slide {
    min-width: 100%;
    position: relative;
}

.pulse-banner-slide img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    display: block;
}

.pulse-banner-slide a {
    display: block;
}

.pulse-banner-overlay {
    position: absolute;
    bottom: 0;
    padding: 16px 24px;
    max-width: 60%;
    display: grid;
    gap: 10px;
}

.pulse-banner-overlay-title {
    margin: 0;
    font-size: clamp(1.4rem, 2.4vw, 2rem);
    font-weight: 700;
    line-height: 1.2;
    text-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
}

.pulse-banner-overlay-body {
    margin: 0;
    font-size: 1rem;
    line-height: 1.55;
    text-shadow: 0 2px 8px rgba(15, 23, 42, 0.16);
}

.pulse-banner-overlay-body :first-child {
    margin-top: 0;
}

.pulse-banner-overlay-body :last-child {
    margin-bottom: 0;
}

.pulse-banner-carousel[data-banner-style="hero"] .pulse-banner-slide img {
    height: 420px;
}

.pulse-banner-carousel[data-banner-style="hero"] .pulse-banner-overlay {
    padding: 28px 32px;
}

.pulse-banner-carousel[data-banner-renderer="meta"] {
    border-radius: 16px;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.12);
}

.pulse-banner-carousel[data-banner-renderer="meta"] .pulse-banner-dot.active {
    background: #2563eb;
}

.pulse-banner-carousel[data-banner-renderer="dfg"] .pulse-banner-indicators {
    justify-content: flex-start;
    padding-left: 18px;
}

.pulse-banner-carousel[data-banner-renderer="mini"] .pulse-banner-slide img {
    height: 160px;
}

.pulse-banner-carousel[data-banner-renderer="live-event"] .pulse-banner-slide img {
    height: 240px;
}

.pulse-banner-carousel[data-banner-renderer="live-event"] .pulse-banner-overlay {
    top: 0;
    bottom: auto;
}

.pulse-banner-carousel[data-banner-renderer="brand-champion"] .pulse-banner-slide img {
    height: 360px;
    object-fit: contain;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
}

.pulse-banner-carousel[data-banner-renderer="brand-champion"] .pulse-banner-nav,
.pulse-banner-carousel[data-banner-renderer="mini"] .pulse-banner-nav {
    background: rgba(15, 23, 42, 0.56);
}

.pulse-banner-overlay.pos-left   { left: 0;   text-align: left; }
.pulse-banner-overlay.pos-center { left: 50%; transform: translateX(-50%); text-align: center; }
.pulse-banner-overlay.pos-right  { right: 0;  text-align: right; }

.pulse-banner-indicators {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 10px 0;
}

.pulse-banner-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #cbd5e1;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
}

.pulse-banner-dot.active {
    background: #1d4ed8;
}

/* Legacy offered two indicator shapes per tenant: circles ("default") and hyphens. The setting
   round-tripped through admin in the new system but nothing read it — this is what reads it. */
.pulse-banner-carousel[data-banner-indicator-style="hyphen"] .pulse-banner-dot {
    width: 22px;
    height: 3px;
    border-radius: 0;
}

.pulse-banner-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
    border: none;
    font-size: 24px;
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 4px;
    z-index: 2;
}

.pulse-banner-prev { left: 8px; }
.pulse-banner-next { right: 8px; }

.pulse-banner-carousel:not([data-banner-count]) .pulse-banner-nav,
.pulse-banner-carousel[data-banner-count="0"] .pulse-banner-nav,
.pulse-banner-carousel[data-banner-count="1"] .pulse-banner-nav {
    display: none;
}

@media (max-width: 768px) {
    .pulse-banner-slide img {
        height: 220px;
    }

    .pulse-banner-overlay,
    .pulse-banner-carousel[data-banner-style="hero"] .pulse-banner-overlay {
        max-width: calc(100% - 32px);
        padding: 16px;
    }
}

/* ── Narrow carousels: the sidebar slot ──────────────────────────────────────────────────────
 *
 * The overlay was sized against the VIEWPORT, not against the carousel. The title's
 * `clamp(1.4rem, 2.4vw, 2rem)` reads 2.4% of a 1920 px window — 32 px — and `max-width: 60%` of
 * the 260 px sidebar leaves about 108 px of text column after padding. A 32 px headline in a
 * 108 px column wraps to four or five lines, and the 160 px-tall mini image cannot hold them, so
 * the text ran over itself and out of the card. The 768 px media query did not help: the viewport
 * is wide, only the container is narrow.
 *
 * Container queries, not a `[data-banner-location="Sidebar"]` selector: the problem is the width
 * the carousel is given, and any narrow column — a future two-column layout, a widget, a preview
 * pane — has it. Keying off the location would fix exactly one of them.
 */
.pulse-banner-carousel {
    container-type: inline-size;
    container-name: pulse-banner;
}

@container pulse-banner (max-width: 420px) {
    .pulse-banner-overlay,
    .pulse-banner-carousel[data-banner-style="hero"] .pulse-banner-overlay {
        /* Full width minus a gutter: 60% of a narrow card is not a usable column. */
        max-width: calc(100% - 16px);
        padding: 10px 12px;
        gap: 4px;
        /* The last line of defence. However the text is authored, it cannot escape the image. */
        max-height: 100%;
        overflow: hidden;
    }

    .pulse-banner-overlay-title {
        font-size: 1rem;
        line-height: 1.25;
    }

    .pulse-banner-overlay-body {
        font-size: 0.8125rem;
        line-height: 1.35;
        /* Two lines, then an ellipsis. A banner body is a teaser; the link carries the detail. */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* The prev/next chevrons eat most of a 260 px card. The dots still allow navigation. */
    .pulse-banner-nav {
        display: none;
    }
}