/*
 * The photo framing control (static/js/epk_focus.js), wherever a press kit
 * photo is chosen: the builder and the band studio's Photos group.
 *
 * The frame is the shape the kit crops to -- a strip about twice as wide as
 * it is tall -- so what is in it is what the kit shows. Without JavaScript it
 * is a still preview beside the select; with it, the photo can be dragged.
 */

.epk-focus-frame {
    position: relative;
    width: 100%;
    max-width: 520px;
    aspect-ratio: 2 / 1;
    overflow: hidden;
    border: 1px solid #333;
    border-radius: 4px;
    background: #000;
    touch-action: none;
}
.epk-focus-frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 30%;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}
.epk-focus.is-live .epk-focus-frame { cursor: grab; }
.epk-focus.is-live .epk-focus-frame.is-dragging { cursor: grabbing; }
.epk-focus-frame:focus-visible { outline: 2px solid #ff0000; outline-offset: 2px; }

/* A new builder with no photo yet: the frame waits for one. */
.epk-focus:not(.has-image) .epk-focus-frame { display: none; }

/* Whole photo: nothing is cropped, so there is nothing to drag. */
.epk-focus.is-whole .epk-focus-frame { aspect-ratio: auto; max-height: 360px; cursor: default; }
.epk-focus.is-whole .epk-focus-frame img { height: auto; max-height: 360px; object-fit: contain; }
.epk-focus.is-whole [data-focus-hint],
.epk-focus.is-whole .epk-focus-preset { display: none; }

.epk-focus-hint { color: #8b8b8b; font-size: .8rem; margin: .4rem 0 0; }
.epk-focus-preset { display: flex; align-items: center; gap: .5rem; margin-top: .5rem; flex-wrap: wrap; }
.epk-focus-preset label { color: #ccc; font-size: .85rem; font-weight: 700; margin: 0; }
.epk-focus .epk-focus-preset select { width: auto; min-width: 200px; }
.epk-focus-fits { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: .25rem 0 .5rem; }
.epk-focus-fits label { display: inline-flex; align-items: center; gap: .4rem; color: #ccc; font-size: .88rem; font-weight: 400; cursor: pointer; }