/**
 * Leased Overlay styles
 * Renders a diagonal "LEASED" label across the featured image.
 */

.leased-overlay-wrapper {
    position: relative;
    display: block;
    line-height: 0; /* prevents extra space under the image */
    overflow: hidden;
    max-width: 100%;
    container-type: inline-size;
}

.leased-overlay-wrapper img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Whitish wash over the image so the LEASED text is always readable. */
.leased-overlay-wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(255, 255, 255, 0.55);
    pointer-events: none;
    z-index: 1;
}

.leased-overlay-label {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    transform: translate(-50%, -50%) rotate(-20deg);
    color: #22c55e; /* bright green similar to the reference */
    font-family: Impact, "Arial Black", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 900;
    font-style: italic;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    /* Scale with the image: ~18% of the wrapper width. */
    font-size: clamp(2rem, 18cqw, 12rem);
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* Fallback for browsers without container query unit support. */
@supports not (font-size: 1cqw) {
    .leased-overlay-label {
        font-size: clamp(2rem, 12vw, 8rem);
    }
}