/* Image element badge styles (theme-side)
   DOM inventory:
   - .w-image                      (wrapper)
   - .w-image-h                    (inner link/div)
   - .w-image-badges               (badge container, absolutely positioned)
   - .w-image-badge                (single badge wrapper)
   - .w-image-badge__text1         (first row, bigger)
   - .w-image-badge__text2         (second row, smaller)
*/

.w-image {
    position: relative; /* allow absolute badges */
}

.w-image .w-image-h {
    position: relative; /* stacking context for overlay */
    display: inline-block;
}

.w-image-badges {
    position: absolute;
    display: block;
    z-index: 2;
    pointer-events: none; /* badges do not block image link clicks */
}

/* Position modifiers */
.w-image-badges.pos-top-left {
    top: -0.5rem;
    left: -0.5rem;
    right: auto;
    bottom: auto;
}
.w-image-badges.pos-top-right {
    top: -0.5rem;
    right: -0.5rem;
    left: auto;
    bottom: auto;
    text-align: right;
}
.w-image-badges.pos-bottom-left {
    bottom: -0.5rem;
    left: -0.5rem;
    top: auto;
    right: auto;
}
.w-image-badges.pos-bottom-right {
    bottom: -0.5rem;
    right: -0.5rem;
    top: auto;
    left: auto;
    text-align: right;
}

.w-image-badge {
    pointer-events: auto; /* badge can be interacted if needed */
    display: block;
    background: var(--color-content-bg, #fff);
    color: var(--color-content-text, #111);
    padding: 1.5rem;
    border-radius: 1rem; /* per request */
    box-shadow: var(--box-shadow);
    border: var(--border-shadow-alt);
    line-height: 1.1;
}

.w-image-badge__text1 {
    display: block;
    font-size: 2rem; /* bigger */
    font-weight: var(--bold-font-weight, 700);
    color: var(--color-content-secondary);
}

.w-image-badge__text2 {
    display: block;
    margin-top: 0.5rem;
    color: var(--color-content-faded);
    font-size: 0.8rem;
}

@media (max-width: 600px) {
    .w-image-badges.pos-top-left { top: 6px; left: 6px; }
    .w-image-badges.pos-top-right { top: 6px; right: 6px; }
    .w-image-badges.pos-bottom-left { bottom: 6px; left: 6px; }
    .w-image-badges.pos-bottom-right { bottom: 6px; right: 6px; }
    .w-image-badge {
        padding: 0.75rem;
    }
    .w-image-badge__text1 { font-size: 1.5rem; }
    .w-image-badge__text2 { font-size: 0.75rem; }
}