/* ============================================================
   SNS Valley View — responsive image component.
   Structural CSS for web/templates/responsive_image.templ. Not part of
   the design handoff's token set — this is Phase 0d pipeline plumbing,
   not a ported design component, so it lives in its own file rather than
   inside tokens.css.

   The blur-placeholder reveal is pure CSS occlusion, not a JS-triggered
   crossfade: the blur <img> is absolutely positioned to fill the same box
   as the real <img>, which sits on top in normal flow. Once the real
   image has decoded enough to paint, it covers the blur beneath it —
   ordinary browser paint order, no onload handler, no class toggle, no
   script. See docs/DECISIONS.md for why this couldn't be a CSS
   background-image on the real <img> instead: this site's CSP has no
   'unsafe-inline' in style-src, which blocks inline style="" attributes
   entirely, and a per-image data URI can't be expressed as a static rule
   in an external stylesheet.
   ============================================================ */

.responsive-image {
  position: relative;
  display: block;
  overflow: hidden;
}

.responsive-image__blur {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.responsive-image__real {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}