/* django-imagefield + Unfold integration.
 *
 * Two cosmetic fixes on top of the package's ppoi.css:
 * 1. Hide Unfold's built-in clearable-file-input preview when our wrapper
 *    is present — otherwise the field shows two thumbnails (imagefield's
 *    PPOI overlay + Unfold's plain preview).
 * 2. Style the imagefield-preview container so it matches Unfold's chrome
 *    (rounded corner, subtle border, dark-mode aware, sensible max-width).
 */

.imagefield {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: flex-start;
}

.imagefield .imagefield-preview {
  position: relative;
  display: inline-block;
  max-width: 24rem;
  border-radius: 0.375rem;
  overflow: hidden;
  border: 1px solid rgb(229 231 235); /* base-200 */
  background: #fff;
}

@media (prefers-color-scheme: dark) {
  .imagefield .imagefield-preview {
    border-color: rgb(55 65 81); /* base-700 */
    background: rgb(17 24 39);   /* base-900 */
  }
}

.imagefield .imagefield-preview-image {
  display: block;
  width: 100%;
  height: auto;
  cursor: crosshair;
}

/* Suppress Unfold's plain preview when the imagefield wrapper is present.
 * The wrapper's `.imagefield-widget > .mb-4.max-w-48` is the duplicate. */
.imagefield .imagefield-widget > .mb-4.max-w-48 {
  display: none;
}

/* PPOI dot styled to read against any photo (red core + white halo).
 * Overrides the package default which is hard to see on dark images. */
.imagefield .imagefield-point {
  background: #dc2626;
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.35), 0 1px 2px rgba(0, 0, 0, 0.4);
  opacity: 1;
}

.imagefield-preview:hover .imagefield-point,
.imagefield-point.opaque {
  opacity: 1;
}

/* PPOI hidden field row hint — show a tiny help string rather than a blank
 * "Photo ppoi" label (the actual <input> is hidden via PPOIWidget). */
.form-row.field-photo_ppoi label::after,
.form-row.field-cover_photo_ppoi label::after,
.form-row.field-avatar_ppoi label::after,
.form-row.field-featured_image_ppoi label::after,
.form-row.field-og_image_ppoi label::after,
.form-row.field-cover_image_ppoi label::after,
.form-row.field-website_cover_image_ppoi label::after {
  content: " — click the image above to set the focal point.";
  font-weight: 400;
  font-size: 0.75rem;
  color: rgb(107 114 128);
  margin-left: 0.25rem;
}