/* anchor added by JS on the featured image's direct parent, so the badge
   positions over the image regardless of whether it sits in a <figure> or a plain <div> */
.ai-badge-anchor {
    position: relative;
}

.ai-image-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 44px;
    height: 44px;
    line-height: 0;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
    z-index: 2;
}

.ai-image-badge svg {
    width: 100%;
    height: 100%;
    display: block;
}

.ai-text-badge-row {
    display: flex;
    justify-content: center;
    /* .featured-image has margin: 4rem 0 in the theme, which otherwise leaves
       this badge stranded below an empty gap instead of tucked under it */
    margin-top: -3.5rem;
    padding-bottom: 1rem;
}

.ai-text-badge {
    display: inline-flex;
    align-items: center;
    color: #fff;
    font-family: 'Open-Sans-ExtraBold', sans-serif;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
}

.ai-text-badge--generated {
    background: var(--sapphire, #1720ff);
}

.ai-text-badge--modified {
    background: var(--aqua-dark, #12aa87);
}