/**
 * Slot → real asset swap helpers + production-ready empty states.
 * When a media host contains a real <img>, hide the placeholder .slot / .crop-ph / .feat-slot.
 * Replacement = drop file + run apply_launch_inputs.cjs --assets
 *   OR manually insert <img> as first child of [data-asset].
 *
 * Empty states stay quiet, no yellow TBD flags on buyer-facing frames.
 */

/* Hosts that wrap a single screenshot slot */
.media:has(> img) > .slot,
.feat-shot:has(> img) > .slot,
.crop:has(> img) > .crop-ph,
.feat-slot:has(+ img),
[data-asset]:has(> img) > .slot,
[data-asset]:has(> img) > .crop-ph,
[data-asset]:has(> img) > .feat-slot {
  display: none !important;
}

[data-asset] > img,
.media > img,
.feat-shot > img,
.crop > img,
.crop [data-asset] > img,
.proj-media > img,
.proj-media [data-asset] > img,
.cap-media > img,
.proof-shot > img,
.proof-shot .slot > img,
.slot > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Hide placeholder chrome when a visual is present */
[data-asset]:has(> img) > .slot,
[data-asset]:has(> img) > .crop-ph,
.crop:has([data-asset] > img) .crop-ph,
.proj-media:has([data-asset] > img) > [data-asset] > .slot,
.cap-media:has(> img) > .slot,
.feat-shot:has(> img) > .slot,
.proof-shot:has(> img) > .slot,
.proof-shot:has(> img) .slot .skel,
.proof-shot:has(> img) .slot .tagline,
.slot:has(> img) .skel,
.slot:has(> img) .tagline,
.slot:has(> img) .crop-slot,
.slot:has(> img) > .lines,
[data-asset]:has(> img) .skel,
[data-asset]:has(> img) .tagline,
[data-asset]:has(> img) .crop-slot {
  display: none !important;
}

.slot:has(> img),
[data-asset]:has(> img) > .slot {
  background: none;
  padding: 0;
  border: 0;
}

.proj-media:has(> img) > .slot,
.proj-media:has(> [data-asset] > img) > [data-asset] > .slot {
  display: none !important;
}

/* Premium image frames, consistent sizing */
.feat-media-frame .crop,
.proj-media,
.cap-media,
.proof-shot,
.shot .media,
[data-asset] {
  min-height: 0;
}

.feat-media-frame .crop [data-asset] > img,
.feat-media-frame .crop > img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.proj-media [data-asset] > img,
.cap-media > img,
.proof-shot > img {
  min-height: 100%;
  aspect-ratio: 16 / 10;
}

.shot--wide .media > img,
.shot--wide .slot > img {
  aspect-ratio: 21 / 9;
  object-fit: cover;
}

@media (max-width: 768px) {
  .feat-media-frame .crop [data-asset] > img,
  .proj-media [data-asset] > img {
    aspect-ratio: 16 / 9;
  }
}

/* Quiet empty frames (no flag.tbd noise) */
.slot,
.crop-ph,
.feat-slot {
  background:
    linear-gradient(160deg, #161C22 0%, #0E1216 100%);
}

.slot .tagline,
.crop-ph .tagline,
.feat-slot .tagline {
  font-family:var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #5C6670;
}

.shot-cap,
.cap-note {
  font-family:var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--steel-2, #626A73);
}

/* Soften leftover TBD badges if any remain in older markup */
.flag.tbd {
  border-color: var(--rule, #D2D2C9) !important;
  color: var(--steel, #5C6670) !important;
  background: transparent !important;
  font-weight: 400;
  letter-spacing: 0.08em;
}

/* Phase 11 · intentional empty hosts (not unfinished theater) */
.slot--editorial,
.cover--editorial,
.feat-slot--editorial {
  justify-content: space-between;
}

.proof--facts .q {
  padding: clamp(18px, 2.2vw, 26px);
  background: var(--white, #fff);
  border: 1px solid var(--rule, #d2d2c9);
  transition: border-color 0.35s ease, transform 0.45s cubic-bezier(0.16, 0.84, 0.44, 1);
}

.proof--facts .q:hover {
  border-color: var(--ink, #0e1216);
  transform: translate3d(0, -3px, 0);
}

@media (max-width: 860px) {
  .proof--facts {
    grid-template-columns: 1fr !important;
  }
}