/* =========================================================
   LockedIn HQ — imagery system
   <image-slot> theming (on-brand empty states) + media layouts.
   Users drag royalty-free photos in; drops persist at project root.
   ========================================================= */

/* ---- <image-slot> on-brand empty states ---- */
image-slot{display:block}
image-slot::part(frame){background:linear-gradient(150deg,#164034,#0b201a 70%)}
image-slot::part(ring){border-color:rgba(244,239,225,.22)}
image-slot::part(empty){color:rgba(244,239,225,.72)}
.s-cream image-slot::part(frame),.s-cream-2 image-slot::part(frame){background:linear-gradient(150deg,#e7dfcc,#d6ccb2 70%)}
.s-cream image-slot::part(empty),.s-cream-2 image-slot::part(empty){color:rgba(19,49,43,.6)}
.s-green image-slot::part(frame){background:linear-gradient(150deg,#0f8a22,#0c5c19 70%)}
.s-green image-slot::part(empty){color:rgba(255,255,255,.85)}

/* ---- full-bleed media (hero / audience / feature bands) ---- */
.media-fill{position:absolute;inset:0;z-index:0;overflow:hidden}
.media-fill image-slot{position:absolute;inset:0;width:100%;height:100%}
.media-fill .scrim{position:absolute;inset:0;pointer-events:none;z-index:1}
.media-fill .tex{position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* scrim presets */
.scrim-left{background:linear-gradient(95deg,rgba(5,13,10,.94) 0%,rgba(5,13,10,.72) 40%,rgba(5,13,10,.28) 74%,transparent 100%)}
.scrim-bottom{background:linear-gradient(0deg,rgba(5,13,10,.94) 2%,rgba(5,13,10,.55) 32%,rgba(5,13,10,.12) 60%,transparent 100%)}
.scrim-both{background:linear-gradient(0deg,rgba(5,13,10,.92),rgba(5,13,10,.2) 55%,transparent),linear-gradient(95deg,rgba(5,13,10,.8),transparent 62%)}
.scrim-radial{background:radial-gradient(120% 90% at 70% 30%,transparent,rgba(5,13,10,.55) 70%,rgba(5,13,10,.85))}

/* ---- framed photo (in-flow, labeled) ---- */
image-slot.framed{border-radius:var(--r);overflow:hidden;width:100%}
.mediacard{position:relative;border-radius:var(--r);overflow:hidden}
.mediacard image-slot{width:100%;height:100%;position:absolute;inset:0}
.mediacard .ol{position:absolute;inset:0;z-index:2;pointer-events:none;display:flex;flex-direction:column;justify-content:flex-end;padding:20px;
  background:linear-gradient(0deg,rgba(5,13,10,.8),transparent 60%)}
.mediacard .ol .k{font-family:var(--disp);font-weight:700;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--green-soft)}
.mediacard .ol .t{font-family:var(--disp);font-weight:800;font-size:1.3rem;color:#fff;margin-top:5px;line-height:1.05}

/* on-photo type helpers */
.on-photo{color:#fff}
.eyebrow.on-photo{color:var(--green-soft)}
.on-photo-sub{color:rgba(255,255,255,.86)}