.blog_card_media{aspect-ratio:2/1;width:100%;overflow:hidden;border-radius:8px;background:#fff;isolation:isolate}
.blog_card_media img{display:block;width:100%;height:100%;object-fit:contain;object-position:center}
a:hover .blog_card_media img{transform:none}
.blog_card_fallback{position:relative;display:flex;flex-direction:column;justify-content:flex-end;height:100%;padding:26px;background:radial-gradient(ellipse at 100% 0,rgba(238,103,35,.24),transparent 65%),linear-gradient(145deg,#172e4a,#0a1628);color:#fff;overflow:hidden}
.blog_card_fallback::before{content:'';position:absolute;width:350px;height:240px;left:25%;top:-10%;border:1px solid rgba(238,103,35,.35);border-radius:50%;transform:rotate(-30deg)}
.blog_card_mark{position:absolute;right:24px;top:20px;font-size:30px;font-weight:500;opacity:.65}.blog_card_mark span{color:#ee6723;font-size:22px;margin-left:3px}
.blog_card_category{font-size:22px;letter-spacing:-.5px;font-weight:500;position:relative}.blog_card_brand{font-size:8px;letter-spacing:2px;margin-top:9px;color:#b5c0cd}
@media(prefers-reduced-motion:reduce){.blog_card_media img{transition:none}}

/* Decorative brand signature; original image files stay untouched. */
.blog_card_media{position:relative}
.blog_card_media:has(> img)::after,.bp_hero_image:has(> img)::after{content:"";position:absolute;right:12px;bottom:12px;width:104px;height:30px;border:1px solid rgba(23,45,71,.09);border-radius:6px;background:#fff url('/img/ss_logo_dark_120_686.png') center / 88px auto no-repeat;box-shadow:0 2px 8px rgba(12,28,45,.08);pointer-events:none;z-index:1}
.bp_hero_image:has(> img)::after{right:36px;bottom:12px}
@media(max-width:640px){.blog_card_media:has(> img)::after{right:10px;bottom:10px;width:92px;height:27px;background-size:78px auto}}

/* Loading treatment is progressive: without JavaScript, images stay visible. */
.blog_card_media.is-image-loading,.bp_hero_image.is-image-loading{background:#edf1f5}
.blog_card_media.is-image-loading::before,.bp_hero_image.is-image-loading::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.65) 48%,transparent 76%);background-size:220% 100%;animation:blog-image-loading 2s ease-in-out infinite;pointer-events:none}
.blog_card_media>img,.bp_hero_image>img{transition:opacity .3s ease}
.is-image-loading>img{opacity:0}
@keyframes blog-image-loading{from{background-position:160% 0}to{background-position:-60% 0}}
@media(prefers-reduced-motion:reduce){.blog_card_media.is-image-loading::before,.bp_hero_image.is-image-loading::before{animation:none}.blog_card_media>img,.bp_hero_image>img{transition:none}}

/* Reserve the article artwork frame before its intrinsic size is available. */
.bp_hero_image>img{aspect-ratio:2/1;object-fit:contain}

/* Card thumbnails: the image sits inside <picture>, so the picture fills the
   frame and the whole image shows (no crop). Instead of white bars, the space
   around a wide or tall image is filled with a blurred copy of the same image
   (set by blog-media.js once the image has loaded). */
.blog_card_media picture{display:block;width:100%;height:100%;position:relative;z-index:1}
.blog_card_media.has-backdrop::before{content:"";position:absolute;inset:-28px;z-index:0;background:var(--card-bg) center/cover no-repeat;filter:blur(24px) saturate(1.1);opacity:.75;transform:scale(1.08)}