/*
 * Shared: the framed case photo (.case-frame) and the pill + name row under it (.case-meta).
 * Used by the case-grid block, the homepage cases block and the next-case card (and anything else that
 * calls junnect_case_frame_html() in inc/cases.php). Loads before the block files that use it.
 *
 * The frame is the service colour (--c) with the band (--ct) and the photo inset in it exactly like the
 * services block (.svc-media: 496 / 384, inset 11cqw / 8cqw, outer --radius, inner --radius-s). Without a
 * photo the frame is just the colour and the band. Layout variants change the frame's size or aspect
 * ratio only; the photo insets scale with the frame (cqw).
 */

.case-frame { position: relative; aspect-ratio: 496 / 384; background: var(--c, var(--beige-deep)); overflow: hidden; container-type: inline-size; }
.case-frame .band { --bc: var(--ct, var(--beige)); --bl: 34%; --bw: 46%; }
.case-img { position: absolute; inset: 8cqw 11cqw; width: calc(100% - 22cqw); height: calc(100% - 16cqw); object-fit: cover; border-radius: var(--radius-s); }

.case-meta { display: grid; justify-items: start; gap: 18px; padding: 22px 24px 0; }
.case-meta h3 { font-size: clamp(30px, 2.6vw, 40px); }