/* Hide empty or failed widget targets (failed call, empty response, missing image). */
.sdui-widget__target[data-sdui-state="empty"],
.sdui-widget__target[data-sdui-state="error"] {
    display: none;
}

/* State messages remain hidden until their matching state is active. */
.sdui-widget__empty-message,
.sdui-widget__error-message {
    display: none;
}

/* Show state messages when their matching state is active. */
.sdui-widget__target[data-sdui-state="empty"] ~ .sdui-widget__empty-message,
.sdui-widget__target[data-sdui-state="error"] ~ .sdui-widget__error-message {
    display: flex;
    justify-content: center;
    color: var(--text-body-error, #a32a33);
}

.sdui-widget__target {
    display: flex;
    justify-content: center;
    width: 100%;
    min-width: 320px;
    padding-inline: 16px;
}

.sdui-widget {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: 100%;
    min-width: 0;
    padding-bottom: 4px;
}

.sdui-widget__link {
    display: block;
    width: 100%;
}

.sdui-widget__link:focus-visible {
    outline: solid 2px var(--border-button-secondary, #413d3c);
    outline-offset: 2px;
}

.sdui-widget__image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: var(--banner-ratio);
    object-fit: cover;
    border-radius: 8px;
}

/* Mobile defaults: below 768px. */
.sdui-widget__ribbon_banner {
    --banner-ratio: 5 / 1;
}

.sdui-widget__bar_banner {
    --banner-ratio: 5 / 2;
}

.sdui-widget__canvas_banner {
    --banner-ratio: 5 / 4;
}

.sdui-widget__compact_banner {
    --banner-ratio: 6 / 1;
    max-width: 600px;
}

/* Tablet and above: 768px+. */
@media (min-width: 768px) {
    .sdui-widget__target[data-sdui-breakpoint="tablet"],
    .sdui-widget__target[data-sdui-breakpoint="desktop"] {
        padding-inline: 24px;
    }

    .sdui-widget__target[data-sdui-breakpoint="tablet"] .sdui-widget__bar_banner,
    .sdui-widget__target[data-sdui-breakpoint="desktop"] .sdui-widget__bar_banner {
        --banner-ratio: 12 / 1;
    }

    .sdui-widget__target[data-sdui-breakpoint="tablet"] .sdui-widget__canvas_banner,
    .sdui-widget__target[data-sdui-breakpoint="desktop"] .sdui-widget__canvas_banner {
        --banner-ratio: 24 / 7;
    }
}

/* Desktop and above: 992px+. */
@media (min-width: 992px) {
    .sdui-widget__target[data-sdui-breakpoint="desktop"] .sdui-widget__ribbon_banner {
        --banner-ratio: 24 / 1;
    }
}

.sdui-widget__sponsored {
    font:
        400 10px/1.25 Inter,
        Arial,
        sans-serif;
    color: var(--color__gray-dark, #414646);
    white-space: nowrap;
    user-select: none;
    pointer-events: none;

    display: none;
}

/* ==========================================================================
   GAM Overrides
   ========================================================================== */

/* Mobile: all banner types use 320 × 50 */
.sdui-widget__ribbon_banner,
.sdui-widget__bar_banner,
.sdui-widget__canvas_banner,
.sdui-widget__compact_banner {
    --banner-ratio: 320 / 50;
    width: 320px;
    height: 50px;
}

/* Tablet: ribbon uses 728 × 50; other banners use 728 × 90 */
@media (min-width: 768px) {
    .sdui-widget__target[data-sdui-breakpoint="tablet"] .sdui-widget__ribbon_banner {
        --banner-ratio: 728 / 50;
        width: 728px;
        height: 50px;
    }

    .sdui-widget__target[data-sdui-breakpoint="tablet"] .sdui-widget__bar_banner,
    .sdui-widget__target[data-sdui-breakpoint="tablet"] .sdui-widget__canvas_banner,
    .sdui-widget__target[data-sdui-breakpoint="tablet"] .sdui-widget__compact_banner {
        --banner-ratio: 728 / 90;
        width: 728px;
        height: 90px;
    }
}

/* Desktop: widths increase to 970px; tablet heights remain */
@media (min-width: 992px) {
    .sdui-widget__target[data-sdui-breakpoint="desktop"] .sdui-widget__ribbon_banner {
        --banner-ratio: 970 / 50;
        width: 970px;
        height: 50px;
    }

    .sdui-widget__target[data-sdui-breakpoint="desktop"] .sdui-widget__bar_banner,
    .sdui-widget__target[data-sdui-breakpoint="desktop"] .sdui-widget__canvas_banner,
    .sdui-widget__target[data-sdui-breakpoint="desktop"] .sdui-widget__compact_banner {
        --banner-ratio: 970 / 90;
        width: 970px;
        height: 90px;
    }
}