/* ==========================================================================
   RS OPC Portlets – Transparent Image
   Fully encapsulated below the .rs-transparent-image root class.
   Guarantees: no background, no border, no shadow, no visible container –
   the PNG alpha channel stays fully intact.
   Per-instance CSS custom properties (set inline, only when configured):
   --rs-ti-maxw-d / --rs-ti-maxw-t / --rs-ti-maxw-m  (max widths per device)
   --rs-ti-mt / --rs-ti-mb                           (outer spacing)
   ========================================================================== */

.rs-transparent-image {
    display: flex;
    width: 100%;
    margin-top: var(--rs-ti-mt, 0);
    margin-bottom: var(--rs-ti-mb, 0);
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.rs-transparent-image--align-left {
    justify-content: flex-start;
}

.rs-transparent-image--align-center {
    justify-content: center;
}

.rs-transparent-image--align-right {
    justify-content: flex-end;
}

/* Desktop first for the width cap, overridden per breakpoint below */
.rs-transparent-image__frame {
    max-width: var(--rs-ti-maxw-d, none);
    width: 100%;
    background: transparent;
}

@media (max-width: 1199.98px) {
    .rs-transparent-image__frame {
        max-width: var(--rs-ti-maxw-t, var(--rs-ti-maxw-d, none));
    }
}

@media (max-width: 767.98px) {
    .rs-transparent-image__frame {
        max-width: var(--rs-ti-maxw-m, var(--rs-ti-maxw-t, var(--rs-ti-maxw-d, none)));
    }
}

.rs-transparent-image__link {
    display: block;
    line-height: 0;
    background: transparent;
    text-decoration: none;
}

.rs-transparent-image__link:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 4px;
}

.rs-transparent-image__img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* ---------------------------------------------------- editor preview extras */

/* Only rendered inside the OPC editor preview when no image is selected */
.rs-transparent-image__empty-note {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 120px;
    padding: 1.25rem;
    border: 2px dashed #b3bcc7;
    border-radius: 0.5rem;
    background: #f4f6f8;
    color: #4d5560;
    text-align: center;
    font-size: 0.95rem;
}