/* =====================================================================
   media-frame.css
   The display box every admin-uploaded picture on the site goes into.

   The uploads have no common size: the same news grid holds 1920x1080
   landscapes and 900x1200 portraits. A card that sizes itself to its
   picture breaks the row, and the fix this replaces -- a fixed inline
   height:300px on the <img> -- squashed every portrait.

   So the box is fixed and the picture is not. The picture is shown whole
   (object-fit: contain) and a blurred, over-scaled copy of itself fills
   whatever room it leaves, which gives a row of mismatched uploads one
   height with nothing cropped and nothing stretched.

   Markup: Views/Shared/_MediaFrame.cshtml
   Shapes: Models/ImageSpec.cs (the same numbers the admin crop box uses)
   ===================================================================== */

.media-frame {
    position: relative;
    display: block;
    width: 100%;
    /* The height is a percentage of the WIDTH, which is what keeps the shape
       at every breakpoint with no JavaScript. The partial writes the real
       value inline; this is only the fallback (16:9). `aspect-ratio` would
       say it in one line but is newer than the browsers this theme targets. */
    padding-bottom: 56.25%;
    overflow: hidden;
    /* Seen before the pictures decode, and through a transparent PNG. */
    background-color: #f1f1f1;
}

/* Both layers are absolutely positioned, so they size against the frame's
   padding box -- the box the padding-bottom above just gave a height.

   The !important flags are aimed at the theme's own image rules:
   `.thumb-info img` sets position and width, `.thumb-info:hover img` sets a
   transform, and both are more specific than a single class, so without
   them a frame inside a gallery card has its layers pulled out of shape. */
.media-frame-fill,
.media-frame-image {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: none;
    margin: 0;
    border: 0;
    border-radius: 0;
}

/* Fills the frame, then blurs. The scale pushes the blur's own soft,
   half-transparent edge past the frame, which overflow:hidden clips. */
.media-frame-fill {
    object-fit: cover;
    -webkit-filter: blur(24px);
    filter: blur(24px);
    -webkit-transform: scale(1.2) !important;
    transform: scale(1.2) !important;
}

/* The picture itself: whole, centred, never cropped, never distorted. */
.media-frame-image {
    object-fit: contain;
    object-position: center;
    -webkit-transform: none !important;
    transform: none !important;
    -webkit-transition: -webkit-transform 0.3s ease;
    transition: transform 0.3s ease;
}

/* Opt-in hover zoom for gallery grids. The frame carries its own because
   the geometry above has to switch off the theme's `.thumb-info:hover img`
   rule anyway, and zooming the blurred layer would uncover its edges. */
.media-frame-zoom:hover .media-frame-image {
    -webkit-transform: scale(1.06) !important;
    transform: scale(1.06) !important;
}

/* A record saved without a picture. The frame keeps its place in the grid
   so the row does not jump. */
.media-frame-empty {
    background-color: #e9e9e9;
}