/* Portrait upload — the add-a-photo crop step (Cropper.js mounts on .portrait-crop-img; see portrait.js). */

/* The crop STEP (help alert + fixed stage + buttons) is revealed once a file is chosen. portrait.js
 * toggles .is-active on THIS wrapper — the three rows inside are independent full-width blocks in the
 * col-lg-10 column, so the alert and buttons never track/shrink with the image. */
.portrait-crop-step { display: none; }
.portrait-crop-step.is-active { display: block; }

/* THE STAGE IS FIXED SIZE — a centred square, NOT sized to the image. 460x460 on a wide column, or a
 * column-width square when the column is narrower than 460. Cropper measures this stage as its parent
 * container and letterboxes the image inside it (grey where the image doesn't fill — accepted). Because
 * it never resizes per image, the sibling alert/buttons rows stay put across all orientations.
 * overflow:hidden keeps the box rigid during the brief pre-mount image flash. */
.portrait-crop-stage {
    width: min(460px, 100%);
    aspect-ratio: 1 / 1;
    margin-inline: auto;
    overflow: hidden;
}

/* Only for the pre-mount flash before Cropper restructures the DOM — fit within the fixed stage,
 * preserve aspect. Cropper replaces the visible image immediately after. */
.portrait-crop-img { display: block; max-width: 100%; max-height: 100%; }