/* ──────────────────────────────────────────────────────────────────────────
   image-select.css — swap a section's image/illustration from a library
   (edit mode only). PROTOTYPE library is the local asset set; production pulls
   from PMCR Video Assets / MDCR. Visual tokens from base.css.
   ────────────────────────────────────────────────────────────────────────── */

/* Editable content images get a hover affordance in edit mode */
body.editing img.media,
body.editing .thumb-preview img { cursor: pointer; }
body.editing .img-editable { position: relative; }
body.editing img.media:hover,
body.editing .thumb-preview img:hover { outline: 2px solid var(--sm-blue); outline-offset: 2px; }

/* a small "⇄ Swap image" hint shown on hover over an editable image */
.img-swap-hint {
  position: absolute; z-index: 6; top: 8px; left: 8px; display: none;
  font: 500 12px/1 'Roboto', sans-serif; color: #fff; background: var(--sm-blue);
  border-radius: 6px; padding: 5px 9px; pointer-events: none;
}
body.editing .img-swap-wrap:hover .img-swap-hint { display: inline-block; }
.img-swap-wrap { position: relative; display: inline-block; }   /* wrapper added around editable imgs in edit mode */

/* ── Picker modal ─────────────────────────────────────────────────────────── */
.img-picker {
  position: fixed; inset: 0; z-index: 120; display: none;
  align-items: center; justify-content: center;
  background: rgba(10, 37, 64, 0.45); backdrop-filter: blur(3px);
}
.img-picker.open { display: flex; }
.img-picker-panel {
  width: min(820px, 92vw); max-height: 86vh; overflow: auto;
  background: #fff; border-radius: 14px; box-shadow: 0 24px 70px rgba(0, 49, 102, 0.25);
  padding: var(--space-3);
}
.img-picker-head {
  display: flex; align-items: center; justify-content: space-between;
  font-family: 'Sunflower', sans-serif; font-size: 18px; color: var(--sm-text);
  margin-bottom: var(--space-2);
}
.img-picker-close {
  border: 0; background: none; font-size: 18px; cursor: pointer; color: var(--sm-text-body);
  width: 32px; height: 32px; border-radius: 8px;
}
.img-picker-close:hover { background: var(--sm-grey-1); color: var(--sm-text); }
.img-picker-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--space-2);
}
.img-picker-item {
  border: 1px solid var(--sm-border); border-radius: 10px; background: #fff; cursor: pointer;
  padding: 0; overflow: hidden; text-align: left; display: flex; flex-direction: column;
}
.img-picker-item:hover { border-color: var(--sm-blue); box-shadow: 0 4px 14px rgba(0, 49, 102, 0.12); }
.img-picker-item img { width: 100%; height: 104px; object-fit: cover; display: block; background: var(--sm-grey-1); }
.img-picker-item span { font-size: 13px; color: var(--sm-text); padding: 8px 10px; }
.img-picker-note { font-size: 12px; color: var(--sm-text-body); margin-top: var(--space-2); font-style: italic; }

/* Never show the picker / hints while presenting */
body.present .img-picker,
body.present .img-swap-hint { display: none !important; }
body.present img.media:hover,
body.present .thumb-preview img:hover { outline: none; }