/* =============================================================================
   image-roles.css
   Controls how images look (role) and where they sit (placement).

   Usage in Twig:
     <div class="img-wrap {{ blockImage.cssClasses }}">
       <img src="{{ blockImage.image.webPath }}" alt="{{ blockImage.image.altText }}">
     </div>
============================================================================= */

/* ─── Base wrapper ─────────────────────────────────────────────────────────── */

.img-wrap {
    display: inline-block; /* shrink-wraps to content — no stretching without a role */
    overflow: hidden;
    position: relative;
    line-height: 0;
}

/*
    Default: image renders at natural size, capped to its container.
    Role classes below override width/height on the wrapper AND the img.
*/
.img-wrap img {
    display: block;
    max-width: 100%;
    height: auto;
    object-fit: cover;
}


/* =============================================================================
   ROLES  —  control the visual shape / crop of the image.
   Each role sets explicit dimensions on the wrapper, then forces the img to fill it.
============================================================================= */

/* Portrait  — tall card, like a profile photo */
.img-role--portrait {
    width: 260px;
    height: 320px;
    border-radius: 16px;
    flex-shrink: 0;
}
.img-role--portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Banner  — wide cinematic strip */
.img-role--banner {
    width: 100%;
    height: 340px;
    border-radius: 12px;
    display: block;
}
.img-role--banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Thumbnail  — small square preview */
.img-role--thumbnail {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    flex-shrink: 0;
}
.img-role--thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Icon  — tiny, usually a logo or skill icon */
.img-role--icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    flex-shrink: 0;
}
.img-role--icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Background  — fills the nearest position:relative parent, behind content */
.img-role--background {
    position: absolute !important;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
    z-index: 0;
    pointer-events: none;
    display: block;
}
.img-role--background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.25;
}

/* Gallery  — flexible grid item */
.img-role--gallery {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 10px;
    display: block;
}
.img-role--gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Logo  — preserves aspect ratio, no crop */
.img-role--logo {
    height: 48px;
    width: auto;
    border-radius: 0;
    flex-shrink: 0;
}
.img-role--logo img {
    height: 100%;
    width: auto;
    object-fit: contain;
}

/* Hero / Featured  — large splash image */
.img-role--hero {
    width: 100%;
    max-width: 360px;
    height: 360px;
    border-radius: 20px;
    flex-shrink: 0;
}
.img-role--hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}