/*
 * Featured-image HTML title overlay (featured-overlay-compat-v1).
 *
 * The wrapper takes the <img>'s place in the theme's layout, so it must size
 * like the slot the image occupied and never from its own content. It carries
 * NO size containment: `container-type: inline-size` on an in-flow box makes
 * its content-based width 0, which collapses it (and the image) to 0px in flex
 * items, auto/max-content grid tracks and every shrink-to-fit parent.
 * It must not start a block formatting context either (no overflow clipping):
 * themes give the image vertical margins that collapse through its figure
 * (Twenty Twenty-One: img 60px inside figure 20px), and a BFC wrapper would
 * stop the collapse and push the image down.
 */
.agent-news-sp-featured-overlay {
    position: relative;
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

/* Sole wrapper in a fixed-height slot: keep `img { height: 100% }` themes filling it. */
.agent-news-sp-featured-overlay:only-child {
    height: 100%;
}

/*
 * No rules for the <img> itself: its size and display stay the theme's.
 * `max-width: 100%` made a fixed-width image compressible (a table-cell slot
 * squeezed it to a few pixels), and `display: block` removed the inline gap an
 * inline-image theme leaves under it, shifting the page (Newspaperly: 7px).
 */

/*
 * The container for `cqw` title sizing. Absolutely positioned, so its width
 * comes from the wrapper and containment cannot collapse anything.
 */
.agent-news-sp-featured-overlay__layer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    container-type: inline-size;
    overflow: hidden;
    pointer-events: none;
}

.agent-news-sp-featured-overlay__title {
    position: absolute;
    box-sizing: border-box;
    width: max-content;
    padding: 0.18em 0.55em;
    overflow-wrap: anywhere;
    pointer-events: none;
    left: 50%;
    top: 96.5%;
    transform: translate(-50%, -100%);
    max-width: 80%;
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: 48px;
    font-size: clamp(14px, 4cqw, 72px);
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    text-shadow: 0 3px 8px #000;
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.7) 18%, rgba(0, 0, 0, 0.7) 82%, transparent);
}

@media (max-width: 560px) {
    .agent-news-sp-featured-overlay__title {
        padding: 0.14em 0.42em;
    }
}

/* A title at the 14px floor covers a small thumbnail instead of labelling it. */
@container (max-width: 279.98px) {
    .agent-news-sp-featured-overlay__title {
        display: none;
    }
}

/* The theme's own <h1> text lies on the image (assets/js/featured-overlay.js). */
.agent-news-sp-featured-overlay--theme-title .agent-news-sp-featured-overlay__title {
    display: none;
}

/*
 * Visible AI disclosure on a featured image (OWNER 2026-09-27): a small label over the image, in HTML - never burnt
 * into the file (the file may carry embedded provenance that must stay intact). Laid out like the title-overlay
 * wrapper above: it takes the image's place and never sizes from its own content. Logical properties only, so the
 * label sits at the reading start in RTL languages.
 */
.agent-news-sp-ai-image {
    position: relative;
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.agent-news-sp-ai-image:only-child {
    height: 100%;
}

.agent-news-sp-ai-image__label {
    position: absolute;
    inset-block-end: 8px;
    inset-inline-start: 8px;
    z-index: 3;
    max-width: calc(100% - 16px);
    padding: 2px 8px;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.62);
    color: #fff;
    font: 500 11px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    letter-spacing: 0.01em;
    overflow-wrap: anywhere; /* wraps on a small thumbnail instead of being cut: the label is never hidden */
    pointer-events: none;
}

/* The post's title overlay sits at the bottom: the label moves to the top edge so neither covers the other. */
.agent-news-sp-ai-image__label--top {
    inset-block-end: auto;
    inset-block-start: 8px;
}