/* ==========================================================================
   GAM Widget Target Styles Overrides
   ========================================================================== */

/* GAM Widget Target Styles Overrides (mobile) */
.sdui-widget__target {
    display: block;
    width: 100%;
    max-width: 320px;
    height: 50px;
    margin: 0 auto;
}

/* GAM Widget Target Styles Overrides (tablet) */
@media (min-width: 768px) and (max-width: 991px) {
    .sdui-widget__target {
        max-width: 728px;
        height: 90px;
    }
}

/* GAM Widget Target Styles Overrides (desktop) */
@media (min-width: 992px) {
    .sdui-widget__target {
        max-width: 970px;
        height: 90px;
    }
}

/* SDUI Widget Target States */
/* No target available (failed call, empty response, missing image) */
.sdui-widget__target[data-sdui-state="empty"],
.sdui-widget__target[data-sdui-state="error"] {
    display: none;
}

/* SDUI Widget Container Styles */
.sdui-widget {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}

/* SDUI Widget Image Styles */
.sdui-widget img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

/* Focus-visible styles for SDUI widget links (OPTIONAL) */
.sdui-widget__link:focus-visible {
    outline: solid 2px var(--border-button-secondary, #413d3c);
    outline-offset: 2px;
}

/* ==========================================================================
   SDUI Widget Image Styles (aspect ratios/dimensions enforced by creatives)
   ========================================================================== */

/* SDUI Widget Image Styles (mobile) */
.sdui-widget__ribbon_banner img {
    aspect-ratio: 375 / 75;
}

.sdui-widget__bar_banner img {
    aspect-ratio: 375 / 150;
}

.sdui-widget__canvas_banner img {
    aspect-ratio: 375 / 300;
}

.sdui-widget__compact_banner img {
    aspect-ratio: 600 / 100;
}

/* SDUI Widget Image Styles (tablet) */
@media (min-width: 768px) and (max-width: 991px) {
    .sdui-widget__ribbon_banner img {
        aspect-ratio: 768 / 80;
    }
    .sdui-widget__bar_banner img {
        aspect-ratio: 768 / 100;
    }
    .sdui-widget__canvas_banner img {
        aspect-ratio: 768 / 224;
    }
    .sdui-widget__compact_banner img {
        aspect-ratio: 600 / 100;
    }
}

/* SDUI Widget Image Styles (desktop) */
@media (min-width: 992px) {
    .sdui-widget__ribbon_banner img {
        aspect-ratio: 1200 / 50;
    }
    .sdui-widget__bar_banner img {
        aspect-ratio: 1200 / 100;
    }
    .sdui-widget__canvas_banner img {
        aspect-ratio: 1200 / 350;
    }
    .sdui-widget__compact_banner img {
        aspect-ratio: 600 / 100;
    }
}

/* ==========================================================================
   GAM Widget Image Styles Overrides
   ========================================================================== */

/* GAM Widget Image Styles (mobile) */
.sdui-widget__ribbon_banner img,
.sdui-widget__bar_banner img,
.sdui-widget__canvas_banner img,
.sdui-widget__compact_banner img {
    aspect-ratio: auto 320 / 50;
    width: 320px;
    height: 50px;
}

/* GAM Widget Image Styles (tablet) */
@media (min-width: 768px) and (max-width: 991px) {
    .sdui-widget__ribbon_banner img,
    .sdui-widget__bar_banner img {
        aspect-ratio: auto 728 / 90;
        width: 728px;
        height: 90px;
    }
    .sdui-widget__canvas_banner img,
    .sdui-widget__compact_banner img {
        aspect-ratio: auto 728 / 50;
        width: 728px;
        height: 50px;
    }
}

/* GAM Widget Image Styles (desktop) */
@media (min-width: 992px) {
    .sdui-widget__ribbon_banner img,
    .sdui-widget__bar_banner img {
        aspect-ratio: auto 970 / 90;
        width: 970px;
        height: 90px;
    }
    .sdui-widget__canvas_banner img,
    .sdui-widget__compact_banner img {
        aspect-ratio: auto 970 / 50;
        width: 970px;
        height: 50px;
    }
}