/*
 * Cross-page placeholder used everywhere a real photo/logo/map is missing.
 * Reads --ratio from the inline style set by the template; must read as an
 * intentional "photo coming" panel, not as a broken image.
 */

.img-placeholder {
    aspect-ratio: var(--ratio, 4 / 3);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.25vw;
    background: var(--color-surface-muted);
    border: 2px dashed var(--color-border);
    border-radius: var(--radius);
}

.img-placeholder span {
    color: var(--color-text-muted);
    font-size: 0.83vw;
    line-height: 1.4;
}

@media only screen and (max-width: 767.98px) {
    .img-placeholder {
        padding: 4vw;
    }

    .img-placeholder span {
        font-size: 3.47vw;
    }
}