/*
 * Virgo CMS - Random Photo module styles.
 *
 * A single image picked at random per request from a chosen media folder. The
 * box is sized by a fixed pixel width (--rp-width, the master dimension) with an
 * optional aspect ratio (--rp-aspect; 'auto' keeps the source ratio) and rounded
 * corners (--rp-radius). The image is cover-cropped into the box so any source
 * ratio fills it cleanly.
 *
 * Runtime values come from CSS custom properties set inline by the renderer
 * (the only sanctioned inline-style use): --rp-width, --rp-radius, --rp-aspect.
 */

.random-photo {
    --rp-width: 200px;
    --rp-radius: 8px;
    --rp-aspect: auto;

    box-sizing: border-box;
    /* The box never overflows its column: the requested width is the upper
       bound, capped by the available width on small screens. */
    width: var(--rp-width);
    max-width: 100%;
}

.random-photo *,
.random-photo *::before,
.random-photo *::after {
    box-sizing: border-box;
}

.random-photo__figure {
    margin: 0;
    width: 100%;
    /* When an aspect ratio is set it pins the box height; otherwise the figure
       grows to the image's own ratio (aspect-ratio: auto / from <img>). */
    aspect-ratio: var(--rp-aspect);
    border-radius: var(--rp-radius);
    overflow: hidden;
    line-height: 0;
    background-color: var(--bs-gray-100, #f8f9fa);
}

/* frameless off → a bordered card wraps the image (padding + border + bg). */
.random-photo--framed {
    padding: var(--bs-gutter-x, 0.75rem);
    background-color: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
}

.random-photo__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--rp-radius);
}