/*
 * Poster Heritage — front-end styles (image rendering).
 *
 * Decisions (2026-11-05):
 * - Product cards: native Elementor rendering (300x300 thumbnails, contain).
 *   No CSS frame — uniformity is handled upstream via the image standards.
 * - Single product: no CSS at all — the main image keeps its natural size/ratio.
 * - Artist photos & placeholders: cover their whole container (width AND
 *   height, object-fit: cover), no border, no radius.
 *
 * ".ph-artist-photo" is output by [poster_artist_photo] (no action needed).
 */

/* ---------------------------------------------------------------
 * Artist photos & placeholders — cover the whole container
 * --------------------------------------------------------------- */
.ph-artist-photo {
    position: relative;
    width: 100%;
    height: 100%; /* covers the whole "About the Artist" column when it stretches */
    aspect-ratio: 3 / 4; /* portrait fallback when the parent has no definite height */
    overflow: hidden;
    background: #0F2030; /* avoids gaps if the source ratio differs from the container */
    margin: 0;
    border: none;
    border-radius: 0;
}

.ph-artist-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border: none;
}

/* Artist name overlay on placeholders */
.ph-artist-name {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 10px 6px;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #F0EBE1;
    background: linear-gradient(to top, rgba(15, 32, 48, 0.85) 0%, rgba(15, 32, 48, 0) 100%);
}