/**
 * Monarch Design System v0.8.3.7
 * File: assets/css/images.css
 * Purpose: Default image roles, image presentation library, and reusable media treatments.
 */
.image-frame {
    display: block;
    inline-size: 100%;
    overflow: hidden;
    border: var(--border-width-default) solid var(--site-color-stroke);
    border-radius: var(--radius-lg);
    background: var(--surface-soft);
    box-shadow: var(--shadow-sm);
}
.image-frame img,
.image-default {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}
.image-role--hero { aspect-ratio: 16 / 7; }
.image-role--banner { aspect-ratio: 21 / 6; }
.image-role--landscape { aspect-ratio: 16 / 9; }
.image-role--card { aspect-ratio: 4 / 3; }
.image-role--square { aspect-ratio: 1 / 1; }
.image-role--portrait { aspect-ratio: 4 / 5; }
.image-role--avatar { inline-size: 6rem; block-size: 6rem; aspect-ratio: 1 / 1; border-radius: 50%; margin-inline: auto; }
.image-role--background { aspect-ratio: 16 / 10; }
.image-role--logo-light,
.image-role--logo-dark { aspect-ratio: 4 / 1; background: var(--surface-medium); padding: var(--space-md); }
.image-role--logo-light img,
.image-role--logo-dark img { object-fit: contain; }
.image-role--image-not-found { aspect-ratio: 16 / 9; border-style: dashed; }
.image-fit--contain img { object-fit: contain; padding: var(--space-md); }
.image-fit--cover img { object-fit: cover; }
.image-shape--circle { border-radius: 50%; aspect-ratio: 1 / 1; }
.image-shape--soft { border-radius: var(--radius-xl); }
.image-shape--sharp { border-radius: 0; }
.image-shadow--strong { box-shadow: var(--shadow-lg); }
.image-border--accent { border-color: var(--site-color-accent); }
.image-border--primary { border-color: var(--site-color-primary); }
.image-muted img { filter: grayscale(100%); opacity: .9; }
.image-overlay {
    position: relative;
    display: grid;
    overflow: hidden;
    border-radius: var(--radius-lg);
}
.image-overlay > .image-frame { grid-area: 1 / 1; border-radius: inherit; }
.image-overlay__content {
    grid-area: 1 / 1;
    z-index: 1;
    align-self: end;
    padding: var(--space-lg);
    color: var(--site-color-background);
    background: linear-gradient(180deg, transparent, var(--overlay-dark));
    text-align: center;
}
.image-overlay__content > * { margin-block: 0; }
.image-figure {
    margin: 0;
    display: grid;
    gap: var(--space-sm);
}
.image-figure figcaption {
    color: var(--site-color-muted);
    font-size: var(--fs-sm);
    text-align: center;
}
.image-library-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-lg);
}
.image-library-card {
    align-items: stretch;
    justify-content: flex-start;
    text-align: start;
}
.image-library-card h2,
.image-library-card p { text-align: start; }
.image-library-card .composition-meta { justify-content: flex-start; }
.image-library-card .image-frame { margin-block: var(--space-sm); }
.image-spec-list {
    display: grid;
    gap: var(--space-xs);
    padding: 0;
    margin: 0;
    list-style: none;
    color: var(--site-color-muted);
    font-size: var(--fs-sm);
}
.image-spec-list strong { color: var(--site-color-text); }
@media (max-width: 64rem) {
    .image-library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 42rem) {
    .image-library-grid { grid-template-columns: 1fr; }
    .image-role--hero,
    .image-role--banner { aspect-ratio: 16 / 10; }
}

/* v0.8.3.7.2: CSS-first image masks. Masks are presentation classes, not alternate assets. */
.img-mask-rounded { border-radius: var(--radius-xl); }
.img-mask-circle { border-radius: var(--radius-full); aspect-ratio: 1 / 1; }
.img-mask-pill { border-radius: var(--radius-full); }
.img-mask-diamond { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }
.img-mask-hex { clip-path: polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0% 50%); }
.img-mask-fade-bottom {
    -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
}
.img-mask-fade-top {
    -webkit-mask-image: linear-gradient(0deg, #000 72%, transparent 100%);
    mask-image: linear-gradient(0deg, #000 72%, transparent 100%);
}
.img-mask-fade-left {
    -webkit-mask-image: linear-gradient(270deg, #000 72%, transparent 100%);
    mask-image: linear-gradient(270deg, #000 72%, transparent 100%);
}
.img-mask-fade-right {
    -webkit-mask-image: linear-gradient(90deg, #000 72%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 72%, transparent 100%);
}
.image-frame--masked { background: transparent; }
.image-frame--masked .img-mask-circle,
.image-frame--masked .img-mask-diamond,
.image-frame--masked .img-mask-hex { aspect-ratio: 1 / 1; }


/* v0.8.3.7.2 visibility patch: Image Mask Library presentation. */
.image-mask-section .section-intro,
.section-lead {
    max-width: 72ch;
    margin-inline: auto;
    text-align: center;
}
.image-mask-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-lg);
    align-items: stretch;
}
.image-mask-card {
    text-align: center;
    outline: var(--border-width-default) solid var(--site-color-stroke);
    outline-offset: var(--space-xs);
}
.image-mask-card .image-frame {
    margin-block: var(--space-md);
}
.image-mask-demo-image {
    width: min(100%, 18rem);
    margin-inline: auto;
}
.image-mask-class {
    margin-block-end: 0;
}
@media (max-width: 64rem) {
    .image-mask-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 42rem) {
    .image-mask-grid { grid-template-columns: 1fr; }
}

/* v0.8.3.7.3 — first-round fade masks extended for a more gradual transition. */
:root {
    --image-mask-fade-distance: 34%;
}
.img-mask-fade-bottom {
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - var(--image-mask-fade-distance)), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - var(--image-mask-fade-distance)), transparent 100%);
}
.img-mask-fade-top {
    -webkit-mask-image: linear-gradient(to top, #000 0%, #000 calc(100% - var(--image-mask-fade-distance)), transparent 100%);
    mask-image: linear-gradient(to top, #000 0%, #000 calc(100% - var(--image-mask-fade-distance)), transparent 100%);
}
.img-mask-fade-left {
    -webkit-mask-image: linear-gradient(to left, #000 0%, #000 calc(100% - var(--image-mask-fade-distance)), transparent 100%);
    mask-image: linear-gradient(to left, #000 0%, #000 calc(100% - var(--image-mask-fade-distance)), transparent 100%);
}
.img-mask-fade-right {
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - var(--image-mask-fade-distance)), transparent 100%);
    mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - var(--image-mask-fade-distance)), transparent 100%);
}