/* =============================================================
   uv-hero-photo.css — Shared hero photo slot styles (Sprint 9.1)

   Default state hides the container until the engine's render() marks it
   either --filled or --empty (owner). This prevents an empty Polaroid
   from showing on landing/preview routes where applyInvite() may not run.
   ============================================================= */
.uv-hero-photo:not(.uv-hero-photo--filled):not(.uv-hero-photo--empty) {
  display: none !important;
}

/* =============================================================

   BEM blocks:
     .uv-hero-photo              — container (set dimensions in per-template CSS)
     .uv-hero-photo--empty       — modifier: no photo yet
     .uv-hero-photo--filled      — modifier: photo is present
     .uv-hero-photo--busy        — modifier: upload in progress
     .uv-hero-photo--drag-over   — modifier: file dragged over container
     .uv-hero-photo__empty       — tap-to-add label (owner only)
     .uv-hero-photo__icon        — camera SVG inside empty label
     .uv-hero-photo__empty-text  — "Tap to add photo" caption
     .uv-hero-photo__file-input  — visually hidden <input type="file">
     .uv-hero-photo__img         — the filled <img>
     .uv-hero-photo__edit-btn    — hover/tap affordance over filled image
     .uv-hero-photo__edit-label  — text inside edit button
     .uv-hero-photo__menu        — Replace / Remove popup menu
     .uv-hero-photo__menu-btn    — individual menu action
     .uv-hero-photo__menu-replace — Replace action (label/input)
     .uv-hero-photo__menu-remove — Remove action
     .uv-hero-photo__menu-cancel — Cancel action
   ============================================================= */

/* ------------------------------------------------------------------
   Container baseline
   Dimensions are intentionally left to per-template CSS so each
   template can size / shape the slot to fit its own aesthetic.
   ------------------------------------------------------------------ */
.uv-hero-photo {
  position: relative;
  overflow: hidden;
  /* Soft transition between empty ↔ filled; honor prefers-reduced-motion */
  transition: opacity 0.25s ease, transform 0.25s ease;
}

@media (prefers-reduced-motion: reduce) {
  .uv-hero-photo,
  .uv-hero-photo__img,
  .uv-hero-photo__edit-btn,
  .uv-hero-photo__menu {
    transition: none !important;
    animation: none !important;
  }
}

/* ------------------------------------------------------------------
   Empty state — tap-to-add label
   Hidden from guests; only rendered when body.is-owner-editor is present.
   ------------------------------------------------------------------ */
.uv-hero-photo__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 100%;
  cursor: pointer;
  /* Soft dashed border as the "add photo" affordance */
  border: 2px dashed currentColor;
  border-radius: inherit;
  opacity: 0.55;
  transition: opacity 0.18s ease, background 0.18s ease;
  padding: 12px;
  box-sizing: border-box;
  text-align: center;
  /* Inherit color from surrounding context so it adapts to any palette */
  color: inherit;
  background: transparent;
  /* Remove default label cursor issues */
  user-select: none;
  -webkit-user-select: none;
}

.uv-hero-photo__empty:hover,
.uv-hero-photo--drag-over .uv-hero-photo__empty {
  opacity: 0.85;
  background: rgba(0, 0, 0, 0.04);
}

.uv-hero-photo__icon {
  flex-shrink: 0;
  pointer-events: none;
}

.uv-hero-photo__empty-text {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.3;
  pointer-events: none;
}

/* Visually-hidden file input — participates in label's click area for iOS */
.uv-hero-photo__file-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  font-size: 0;
  width: 100%;
  height: 100%;
  /* Ensure it sits above the label content so it captures the tap */
  z-index: 1;
}

/* ------------------------------------------------------------------
   Filled state — the hero image
   ------------------------------------------------------------------ */
.uv-hero-photo__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
}

/* ------------------------------------------------------------------
   Edit button overlay (owner, filled state)
   Appears on hover / focus / touch.
   ------------------------------------------------------------------ */
.uv-hero-photo__edit-btn {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 10px;
  border-radius: inherit;
  transition: background 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}

.uv-hero-photo__edit-btn:hover,
.uv-hero-photo__edit-btn:focus-visible {
  background: rgba(0, 0, 0, 0.28);
}

/* On touch/mobile, always show a subtle scrim so it's discoverable */
@media (hover: none) {
  .uv-hero-photo--filled .uv-hero-photo__edit-btn {
    background: rgba(0, 0, 0, 0.15);
  }
}

.uv-hero-photo__edit-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 12px;
  padding: 3px 10px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.uv-hero-photo__edit-btn:hover .uv-hero-photo__edit-label,
.uv-hero-photo__edit-btn:focus-visible .uv-hero-photo__edit-label {
  opacity: 1;
  transform: translateY(0);
}

@media (hover: none) {
  .uv-hero-photo--filled .uv-hero-photo__edit-label {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ------------------------------------------------------------------
   Replace / Remove inline menu
   Anchored inside the container, absolute-positioned.
   ------------------------------------------------------------------ */
.uv-hero-photo__menu {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: inherit;
  z-index: 20;
}

.uv-hero-photo__menu-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 160px;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  border: 1.5px solid transparent;
  text-align: center;
  transition: background 0.15s ease, color 0.15s ease;
  box-sizing: border-box;
  /* Reset <button> defaults */
  background: none;
  font-family: inherit;
  line-height: 1.4;
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
}

/* Replace — primary tint */
.uv-hero-photo__menu-replace {
  background: #2c2c2c;
  color: #fff;
}
.uv-hero-photo__menu-replace:hover {
  background: #444;
}

/* Remove — danger tint */
.uv-hero-photo__menu-remove {
  background: transparent;
  color: #c0392b;
  border-color: #c0392b;
}
.uv-hero-photo__menu-remove:hover {
  background: #fdecea;
}

/* Cancel — ghost */
.uv-hero-photo__menu-cancel {
  background: transparent;
  color: #666;
  border-color: #ccc;
}
.uv-hero-photo__menu-cancel:hover {
  background: #f5f5f5;
}

/* ------------------------------------------------------------------
   Busy / uploading state
   ------------------------------------------------------------------ */
.uv-hero-photo--busy::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.55);
  /* Spinning ring via border trick */
  border: 3px solid transparent;
  border-top-color: currentColor;
  animation: uv-hero-spin 0.7s linear infinite;
  z-index: 10;
  pointer-events: none;
}

@keyframes uv-hero-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .uv-hero-photo--busy::after {
    animation: none;
    background: rgba(255, 255, 255, 0.7);
  }
}

/* ------------------------------------------------------------------
   Drag-over highlight
   ------------------------------------------------------------------ */
.uv-hero-photo--drag-over {
  outline: 2.5px dashed currentColor;
  outline-offset: 2px;
}