/**
 * AdPulse slot chrome. Spec §12 (no layout shift) and D9 (neutral naming).
 *
 * The container reserves its declared aspect ratio before anything is injected,
 * so client-side delivery costs no CLS. --apx-ratio / --apx-ratio-m are written
 * inline by Slot::reservationStyle(); a slot sized by its parent ships neither
 * and reserves nothing.
 */

.apx-u {
    position: relative;
    margin-inline: auto;
    max-width: 100%;
}

/**
 * ⛔ Must not be dropped.
 *
 * The container ships `hidden` and JS removes it once a creative is mounted.
 * Several slot rules below set `display: grid` / `display: block`, and an
 * author `display` beats the UA stylesheet's `[hidden] { display: none }` —
 * without this, the overlay's full-screen scrim covers every page before it
 * has anything to show.
 */
.apx-u[hidden] {
    display: none !important;
}

.apx-u[style*="--apx-ratio"] {
    aspect-ratio: var(--apx-ratio);
}

@media (max-width: 767px) {
    .apx-u[style*="--apx-ratio-m"] {
        aspect-ratio: var(--apx-ratio-m);
    }
}

/**
 * A fixed-position slot is out of flow, so it cannot shift anything — there is
 * no space worth reserving, and reserving it stretches the creative to the
 * viewport instead. Size those by their content.
 */
.apx-u[data-apx-slot="sticky-bottom-1"],
.apx-u[data-apx-slot="overlay-1"] {
    aspect-ratio: auto !important;
}

.apx-u__link {
    display: block;
    line-height: 0;
    overflow: hidden;
    border-radius: 8px;
}

.apx-u__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
}

.apx-u__text {
    display: block;
    line-height: 1.6;
}

/* Close control, added by JS only for slots declared dismissible. */
.apx-u__close {
    position: absolute;
    inset-block-start: 6px;
    inset-inline-end: 6px;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    color: #fff;
    background: rgba(0, 0, 0, .55);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    z-index: 2;
}

.apx-u__close:hover {
    background: rgba(0, 0, 0, .75);
}

/* ---------------------------------------------------------------- groups */

.apx-u--sidebar {
    max-width: 285px;
}

.apx-u--in-content {
    margin-block: 25px;
}

/* Full-bleed strip above the header. */
.apx-u[data-apx-slot="above-header-1"] {
    max-width: none;
}

.apx-u[data-apx-slot="above-header-1"] .apx-u__link {
    border-radius: 0;
}

/**
 * Sticky bottom bar — chrome carried over from ad-beta's
 * sticky-bottom-banner-3.css: pinned, full width, its own ground colour and
 * rounded top corners. The creative is a full-width image inside it.
 *
 * It was desktop-hidden there via CSS. That is targeting, not styling, so it
 * moved to the assignment as a `device: mobile` condition instead.
 */
.apx-u[data-apx-slot="sticky-bottom-1"] {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 9990;
    max-width: 100%;
    background: #0b2770;
    border-radius: 12px 12px 0 0;
    overflow: hidden;
}

.apx-u[data-apx-slot="sticky-bottom-1"] .apx-u__link {
    border-radius: 0;
}

.apx-u[data-apx-slot="sticky-bottom-1"] .apx-u__img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* Centre overlay with a scrim. Dialog width matches popup-3.css exactly. */
.apx-u[data-apx-slot="overlay-1"] {
    position: fixed;
    inset: 0;
    z-index: 9995;
    display: grid;
    place-items: center;
    padding: 16px;
    background: rgba(0, 0, 0, .6);
}

/*
 * The dialog: the creative, whether or not it is wrapped in a link. Sized on
 * the direct child so an unlinked image is a 328px dialog too, not its own
 * intrinsic width.
 */
.apx-u[data-apx-slot="overlay-1"] > :not(.apx-u__close) {
    width: 328px;
    max-width: calc(100vw - 48px);
    overflow: hidden;
    border-radius: 24px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .35);
}

.apx-u[data-apx-slot="overlay-1"] .apx-u__img {
    height: auto;
    object-fit: contain;
}

/**
 * Stack the creative and the close button in one grid cell so the button
 * anchors to the dialog's corner, not the full-screen scrim's.
 *
 * `place-content: center` is what makes that true. Without it the single
 * implicit track stretches to fill the container, the cell becomes the whole
 * viewport, and the button lands in the screen's corner. Centred, the tracks
 * shrink to their content — the 328px dialog.
 */
.apx-u[data-apx-slot="overlay-1"] {
    grid-template-areas: "stack";
    place-content: center;
}

.apx-u[data-apx-slot="overlay-1"] > * {
    grid-area: stack;
}

/*
 * Straddles the dialog's corner rather than sitting inside the artwork.
 * Negative logical margins pull it past the cell's end edge, which is the left
 * in RTL; the dialog's `overflow: hidden` does not clip it, as it is a sibling.
 */
.apx-u[data-apx-slot="overlay-1"] .apx-u__close {
    position: static;
    place-self: start end;
    width: 34px;
    height: 34px;
    margin: 0;
    margin-block-start: -12px;
    margin-inline-end: -12px;
}

@media (prefers-reduced-motion: no-preference) {
    .apx-u.is-shown {
        animation: apx-fade .25s ease-out;
    }
}

@keyframes apx-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}