.ofw-image-host {
    display: block;
    position: relative;
}

.ofw-image-host video,
.ofw-image-host iframe {
    display: block;
    max-width: 100%;
}

.ofw-image-host--fill {
    width: 100%;
    height: 100%;
}

.ofw-image-host--fill > video,
.ofw-image-host--fill > iframe {
    width: 100%;
    height: 100%;
}

/*
 * Viewport AI text badge — visible label text inside the element.
 * Positions: 4 corners, center, midpoints of 4 sides.
 */
.ofw-ai-badge {
    --ofw-ai-badge-margin: clamp(8px, 2%, 16px);
    position: absolute;
    z-index: 5;
    display: inline-block;
    max-width: calc(100% - 2 * var(--ofw-ai-badge-margin));
    pointer-events: none;
    user-select: none;
    line-height: 1.2;
    font-size: clamp(0.65rem, 1.8vw, 0.75rem);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: none;
    white-space: nowrap;
    padding: 0.25em 0.55em;
    border-radius: 0.2em;
}

.ofw-ai-badge--on-dark {
    color: #fff;
    background: rgb(0 0 0 / 62%);
}

.ofw-ai-badge--on-light {
    color: rgb(0 0 0 / 78%);
    background: rgb(245 245 245 / 78%);
}

.ofw-ai-badge--top-left {
    top: var(--ofw-ai-badge-margin);
    left: var(--ofw-ai-badge-margin);
}

.ofw-ai-badge--top-center {
    top: var(--ofw-ai-badge-margin);
    left: 50%;
    transform: translateX(-50%);
}

.ofw-ai-badge--top-right {
    top: var(--ofw-ai-badge-margin);
    right: var(--ofw-ai-badge-margin);
}

.ofw-ai-badge--left-center {
    top: 50%;
    left: var(--ofw-ai-badge-margin);
    transform: translateY(-50%);
}

.ofw-ai-badge--center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.ofw-ai-badge--right-center {
    top: 50%;
    right: var(--ofw-ai-badge-margin);
    transform: translateY(-50%);
}

.ofw-ai-badge--bottom-left {
    left: var(--ofw-ai-badge-margin);
    bottom: var(--ofw-ai-badge-margin);
}

.ofw-ai-badge--bottom-center {
    bottom: var(--ofw-ai-badge-margin);
    left: 50%;
    transform: translateX(-50%);
}

.ofw-ai-badge--bottom-right {
    right: var(--ofw-ai-badge-margin);
    bottom: var(--ofw-ai-badge-margin);
}