/* file: /assets/css/mdlite-media.css
   Baseline media + size semantics (hero/wide/regular/narrow/thumbnail)
*/

:root{
    /* tuning knobs */
    --md-img-radius: 10px;
    --md-img-gap: 14px;
    --md-img-gutter: 32px;     /* used by .is-wide bounded */
    --md-hero-h: 340px;        /* banner height */
}

/* Base image styling (only what MDLite emits) */
.md--rendered img.md-img{
    max-width: 100%;
    height: auto;
    display: block;
    margin: var(--md-img-gap) auto;
    border-radius: var(--md-img-radius);
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg) 92%, var(--fg) 8%);
}

/* Size presets */
.md--rendered img.md-img.is-thumbnail{ max-width: 240px; }
.md--rendered img.md-img.is-narrow{    max-width: 320px; }
.md--rendered img.md-img.is-regular{   max-width: 640px; }

/* hero: banner-like (cropped) */
.md--rendered img.md-img.is-hero{
    width: 100%;
    height: var(--md-hero-h);
    object-fit: cover;
    object-position: center;
}

/* wide: bounded + gutter (large editorial image) */
.md--rendered img.md-img.is-wide{
    max-width: 960px;
    width: min(960px, calc(100% - var(--md-img-gutter)));
}