/* WashOnDaGo — imagery components.
   Separate from brand.css because the photography is fixed-resolution (720px source ceiling):
   every rule here is written to keep those files inside their native size. Never upscale. */

/* ---- frames -------------------------------------------------------------- */
.media{position:relative;overflow:hidden;border-radius:var(--r-m);background:var(--ink-3);
  border:1px solid var(--line);line-height:0}
.media img{display:block;width:100%;height:100%;object-fit:cover;max-width:100%}
.media--r43{aspect-ratio:4/3} .media--r169{aspect-ratio:16/9}
.media--r11{aspect-ratio:1/1}  .media--r916{aspect-ratio:9/16}
.media--round{border-radius:var(--r-pill);aspect-ratio:1/1}
.media--soft{border-radius:var(--r-l)}
.media--glow{box-shadow:var(--shadow-cyan)}

/* Source images cap at 720px wide. Beyond that a photo must sit behind a scrim or inside a
   constrained frame, never full-bleed at full opacity. */
.media--cap{max-width:720px;margin-inline:auto}

/* ---- scrims: how a photo carries text without going soft ------------------ */
.media--scrim::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(5,8,12,.15) 0%,rgba(5,8,12,.72) 68%,rgba(5,8,12,.95) 100%)}
.media--scrim-l::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(5,8,12,.92) 0%,rgba(5,8,12,.55) 45%,rgba(5,8,12,.05) 100%)}
.media .on-media{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(16px,3vw,28px)}

/* ---- bands: photo as a section background -------------------------------- */
.photoband{position:relative;isolation:isolate;background:var(--ink-2);overflow:hidden}
.photoband>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:-2;opacity:.55;filter:saturate(1.05)}
.photoband::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(120% 90% at 30% 30%,rgba(0,200,248,.18),transparent 60%),
             linear-gradient(180deg,rgba(5,8,12,.78),rgba(5,8,12,.94))}

/* ---- figure + caption ---------------------------------------------------- */
figure.fig{margin:0}
figure.fig figcaption{margin-top:10px;font:500 .875rem/1.5 var(--f-body);color:var(--fg-dim)}

/* ---- the four finished social creatives ---------------------------------- */
/* Whole pieces with baked-in headline + designer credit — never crop, never overlay. */
.creatives{display:grid;gap:clamp(12px,2vw,20px);
  grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}
.creatives .media{aspect-ratio:9/16;max-width:360px;margin-inline:auto;width:100%}
.creatives img{transition:transform .5s var(--ease)}
@media (hover:hover){.creatives .media:hover img{transform:scale(1.04)}}

/* ---- decorative bubbles, pure CSS, layered with the photography ---------- */
.bubbles{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.bubbles i{position:absolute;border-radius:50%;background:radial-gradient(circle at 32% 30%,
  rgba(255,255,255,.55),rgba(123,228,255,.20) 45%,rgba(0,200,248,.05) 70%);
  border:1px solid rgba(255,255,255,.16);animation:rise linear infinite}
@keyframes rise{from{transform:translate3d(0,110%,0) scale(.7);opacity:0}
  12%{opacity:.85} to{transform:translate3d(0,-30%,0) scale(1.05);opacity:0}}

@media (prefers-reduced-motion:reduce){
  .bubbles i{animation:none;opacity:.32}
  .creatives .media:hover img{transform:none}
}
@media print{.photoband>img,.bubbles{display:none}}