/*
 * Frames for uploaded images (<x-media-frame>): every slot has the ratio the template was designed for,
 * so a portrait, very wide or huge upload can no longer stretch a card or push text out of line.
 *
 * The frame is an inner element, so the theme's <figure> keeps its floats, margins and decorations
 * (e.g. the .post-tp-19 corner drawn below the figure). Widths stay with the theme: the default width
 * below has zero specificity (:where), so the theme's own responsive image widths still apply.
 * .adaptive is deliberately left untouched (it is also used by logos and static template images).
 */
.media-frame {
    display: block;
    position: relative;
    overflow: hidden;
    background: #f5f5f5;
    max-width: 100%;
}

:where(.media-frame) > .media-frame__img {
    width: 100%;
}

.media-frame > .media-frame__img {
    display: block;
    height: 100%;
    max-width: 100%;
}

.media-frame--cover > .media-frame__img { object-fit: cover; }

.media-frame--contain { background: #fff; }
.media-frame--contain > .media-frame__img { object-fit: contain; padding: 4px; box-sizing: border-box; }

/* Ratios = the width/height each template slot declares. */
.media-frame--post-card     { aspect-ratio: 345 / 242; } /* blog/product listings, related items, popular lead, gallery */
.media-frame--post-list     { aspect-ratio: 223 / 156; } /* homepage latest posts */
.media-frame--post-thumb    { aspect-ratio: 115 / 85; }  /* small side thumbnails: popular, sidebars, related customers */
.media-frame--post-avatar   { aspect-ratio: 1 / 1; }     /* blog featured strip (theme renders it as a circle) */
.media-frame--product-card  { aspect-ratio: 285 / 224; } /* homepage products */
.media-frame--download-card { aspect-ratio: 285 / 224; } /* homepage downloads */
.media-frame--download-list { aspect-ratio: 273 / 206; } /* download center listing */
.media-frame--search-result { aspect-ratio: 270 / 189; } /* download search results (.post-tp-24) */
.media-frame--review-lead   { aspect-ratio: 360 / 245; } /* blog sidebar review lead */
.media-frame--customer-logo { aspect-ratio: 224 / 150; } /* customer logos on /products */

/*
 * Floated card figures (.post-tp-6/9/17/26) shrink to their content. Inside a frame the image width no longer
 * gives them the template size, so the frame takes the theme's image width explicitly, breakpoints included
 * (same values as main.css: 115px / max 105px at <=1229px; 223px and 273px -> 160px at <=639px -> 100% at <=479px).
 */
.post-tp-6 .media-frame--post-thumb,
.post-tp-9 .media-frame--post-thumb { width: 115px; }
.post-tp-17 .media-frame--post-list { width: 223px; }
.post-tp-26 .media-frame--download-list { width: 273px; }
.post-tp-24 .media-frame--search-result { width: 270px; }

@media screen and (max-width: 639px) {
    .post-tp-17 .media-frame--post-list,
    .post-tp-26 .media-frame--download-list,
    .post-tp-24 .media-frame--search-result { width: 160px; }
}

@media screen and (max-width: 479px) {
    .post-tp-17 .media-frame--post-list,
    .post-tp-26 .media-frame--download-list,
    .post-tp-24 .media-frame--search-result { width: 100%; }
}

/* Detail/hero images: full content width, never taller than 460px. */
.media-frame--detail { aspect-ratio: 16 / 9; max-height: 460px; margin-bottom: 20px; }

/*
 * Homepage cover (.main-posts-4): the theme gives each column a fixed height (511px desktop, 330/260px on
 * mobile), so the frames fill their slot instead of using a ratio: lead = 570×511, each stacked image = 285×255.
 * Selectors outrank the theme's ".main-posts-4 .post-tp-12 img { width: auto; max-width: none }".
 */
.main-posts-4 .post-tp-12 figure,
.main-posts-4 .post-tp-12 figure > a,
.main-posts-4 .post-tp-20 figure > a { height: 100%; }
.main-posts-4 .post-tp-20 figure { height: 50%; margin: 0; }
.media-frame--home-cover-lead,
.media-frame--home-cover-secondary { height: 100%; }
.main-posts-4 .media-frame > .media-frame__img { width: 100%; max-width: 100%; height: 100%; }