/* =====================================================================
   product-edit-photos.css  —  Photos uploader  (task t-006, worker-6)
   Scope: .pe-section[data-section="photos"]

   Styles the dropzone + thumbnail grid that js/product-form.js renders
   (refs #pfImagesEmpty / #pfImagesGrid and the .pf-image-* tiles). This is
   a UI/polish partial — it does NOT change the upload write path. The JS
   delta (per-tile progress bar, failed/retry, render-on-status) is supplied
   as a patch in results/t-006.md for the planner to fold into product-form.js.

   Brand tokens (--terra-*, --ink*, --canvas*, --danger-*, --radius-*,
   --shadow-*) come from product-edit-base.css (worker-1); fallbacks inline
   so the partial degrades gracefully on its own.
   ===================================================================== */

[data-section="photos"] {
  --pe-photo-min: 132px;            /* min thumbnail width before wrap */
  --pe-photo-radius: var(--radius-card, 16px);
}

/* ---------- Section helper line ---------- */
[data-section="photos"] .pe-section__body > p,
[data-section="photos"] .pe-photos__hint {
  margin: 0 0 14px;
  color: var(--ink-muted, #7A6F68);
  font-size: 0.875rem;
  line-height: 1.5;
}

/* =====================================================================
   Dropzone  (#pfImagesEmpty.pf-images-empty)  — was tiny, now generous
   ===================================================================== */
[data-section="photos"] .pf-images-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 208px;
  padding: 32px 24px;
  text-align: center;
  cursor: pointer;
  color: var(--ink-soft, #3A2F2A);
  font: inherit;
  font-size: 0.92rem;
  line-height: 1.55;
  background:
    radial-gradient(120% 120% at 50% 0%, var(--terra-50, #FBF3EC) 0%, var(--canvas-soft, #F3EADC) 100%);
  border: 2px dashed var(--terra-200, #ECC2A0);
  border-radius: var(--pe-photo-radius);
  transition: border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease;
}
[data-section="photos"] .pf-images-empty strong {
  color: var(--ink, #1A1412);
  font-weight: 600;
}
/* Upload glyph (zero-markup: data-URI cloud-arrow in terracotta) */
[data-section="photos"] .pf-images-empty::before {
  content: "";
  width: 46px;
  height: 46px;
  margin-bottom: 6px;
  background: var(--terra-500, #B8451F);
  -webkit-mask: var(--pe-upload-glyph) center / contain no-repeat;
          mask: var(--pe-upload-glyph) center / contain no-repeat;
  --pe-upload-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14.9A4 4 0 0 0 6 22h12a4 4 0 0 0 1.7-7.6'/%3E%3Cpath d='M8.5 9.5 12 6l3.5 3.5'/%3E%3Cpath d='M12 6v10'/%3E%3C/svg%3E");
  transition: transform .18s ease;
}
[data-section="photos"] .pf-images-empty:hover,
[data-section="photos"] .pf-images-empty:focus-visible {
  border-color: var(--terra-400, #D17A40);
  background:
    radial-gradient(120% 120% at 50% 0%, var(--terra-100, #F6E2D1) 0%, var(--canvas-soft, #F3EADC) 100%);
  outline: none;
}
[data-section="photos"] .pf-images-empty:hover::before { transform: translateY(-2px); }
[data-section="photos"] .pf-images-empty:focus-visible {
  box-shadow: 0 0 0 3px var(--terra-200, #ECC2A0);
}
/* Active drag-over the dropzone */
[data-section="photos"] .pf-images-empty.is-drop-target {
  border-color: var(--terra-500, #B8451F);
  border-style: solid;
  background: var(--terra-50, #FBF3EC);
  transform: scale(1.004);
  box-shadow: var(--shadow-lift, 0 10px 28px -10px rgb(26 20 18 / 0.18));
}

/* =====================================================================
   Thumbnail grid  (#pfImagesGrid.pf-images)
   ===================================================================== */
[data-section="photos"] .pf-images {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--pe-photo-min), 1fr));
  gap: 12px;
}

[data-section="photos"] .pf-image-tile,
[data-section="photos"] .pf-image-add {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-input, 12px);
  background: var(--canvas-soft, #F3EADC);
  overflow: hidden;
}

/* ---------- A populated tile ---------- */
[data-section="photos"] .pf-image-tile {
  border: 1px solid rgba(26, 20, 18, 0.10);
  cursor: grab;
  box-shadow: var(--shadow-card, 0 2px 8px -2px rgb(26 20 18 / 0.06));
  transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease, opacity .16s ease;
}
[data-section="photos"] .pf-image-tile:hover { box-shadow: var(--shadow-lift, 0 10px 28px -10px rgb(26 20 18 / 0.18)); }
[data-section="photos"] .pf-image-tile:active { cursor: grabbing; }
[data-section="photos"] .pf-image-tile img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  user-select: none; -webkit-user-drag: none;
}

/* ---------- Primary photo ---------- */
[data-section="photos"] .pf-image-tile:first-child,
[data-section="photos"] .pf-image-tile.is-primary {
  border-color: var(--terra-400, #D17A40);
  box-shadow: 0 0 0 2px var(--terra-300, #E09F6F), var(--shadow-card, 0 2px 8px -2px rgb(26 20 18 / 0.06));
}
[data-section="photos"] .pf-image-primary-badge {
  position: absolute;
  top: 8px; left: 8px;
  z-index: 3;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px;
  background: var(--terra-500, #B8451F);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  box-shadow: 0 1px 3px rgb(26 20 18 / 0.28);
}
[data-section="photos"] .pf-image-primary-badge::before {
  content: "";
  width: 9px; height: 9px;
  background: currentColor;
  -webkit-mask: var(--pe-star) center / contain no-repeat;
          mask: var(--pe-star) center / contain no-repeat;
  --pe-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='m12 2 2.9 6.3 6.9.7-5.1 4.6 1.4 6.8L12 17.8 5.9 20.4l1.4-6.8L2.2 9l6.9-.7z'/%3E%3C/svg%3E");
}

/* ---------- Drag-reorder affordance (grip) ---------- */
[data-section="photos"] .pf-image-handle,
[data-section="photos"] .pf-image-tile::after {
  position: absolute;
  top: 8px; right: 8px;
  z-index: 2;
  width: 26px; height: 26px;
  border-radius: 7px;
  background: rgba(26, 20, 18, 0.52) var(--pe-grip) center / 15px no-repeat;
  --pe-grip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Ccircle cx='9' cy='6' r='1.6'/%3E%3Ccircle cx='15' cy='6' r='1.6'/%3E%3Ccircle cx='9' cy='12' r='1.6'/%3E%3Ccircle cx='15' cy='12' r='1.6'/%3E%3Ccircle cx='9' cy='18' r='1.6'/%3E%3Ccircle cx='15' cy='18' r='1.6'/%3E%3C/svg%3E");
  content: "";
  opacity: 0;
  pointer-events: none;          /* whole tile is draggable; this is affordance only */
  transition: opacity .16s ease;
}
/* When the JS patch injects a real .pf-image-handle element, suppress the
   pseudo fallback to avoid a double grip. */
[data-section="photos"] .pf-image-tile:has(.pf-image-handle)::after { content: none; }
[data-section="photos"] .pf-image-tile:hover .pf-image-handle,
[data-section="photos"] .pf-image-tile:hover::after,
[data-section="photos"] .pf-image-tile:focus-within .pf-image-handle { opacity: 1; }

/* ---------- Hover actions (set-primary / delete / retry) ---------- */
[data-section="photos"] .pf-image-actions {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 8px;
  background: linear-gradient(to top, rgba(26, 20, 18, 0.72) 0%, rgba(26, 20, 18, 0) 100%);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .16s ease, transform .16s ease;
}
[data-section="photos"] .pf-image-tile:hover .pf-image-actions,
[data-section="photos"] .pf-image-tile:focus-within .pf-image-actions { opacity: 1; transform: none; }
[data-section="photos"] .pf-image-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 30px;
  padding: 5px 10px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink, #1A1412);
  border: 0;
  border-radius: 8px;
  font: inherit;
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .14s ease, color .14s ease;
}
[data-section="photos"] .pf-image-btn:hover { background: #fff; }
[data-section="photos"] .pf-image-btn.is-danger {
  margin-left: auto;
  width: 30px; padding: 0;
  font-size: 1.05rem; line-height: 1;
  color: var(--danger-700, #B91C1C);
}
[data-section="photos"] .pf-image-btn.is-danger:hover { background: var(--danger-500, #DC2626); color: #fff; }
[data-section="photos"] .pf-image-btn.pf-image-retry { color: var(--danger-700, #B91C1C); }

/* ---------- Drag states ---------- */
[data-section="photos"] .pf-image-tile.is-dragging { opacity: 0.4; cursor: grabbing; }
[data-section="photos"] .pf-image-tile.is-drop-target { outline: 2px dashed var(--terra-500, #B8451F); outline-offset: -4px; }

/* =====================================================================
   Per-file upload progress  (.pf-image-progress + __bar from JS patch)
   ===================================================================== */
[data-section="photos"] .pf-image-tile.is-uploading { cursor: progress; }
[data-section="photos"] .pf-image-tile.is-uploading img { filter: brightness(0.82) saturate(0.85); }
[data-section="photos"] .pf-image-progress {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 4;
  height: 6px;
  background: rgba(26, 20, 18, 0.35);
  overflow: hidden;
}
/* Determinate fill — JS sets inline width:NN%. With no width (legacy/unknown),
   the bar animates indeterminately so "uploading" still reads. */
[data-section="photos"] .pf-image-progress__bar {
  height: 100%;
  width: 0;
  background: var(--terra-500, #B8451F);
  border-radius: 0 3px 3px 0;
  transition: width .25s ease;
}
[data-section="photos"] .pf-image-progress:not(:has(.pf-image-progress__bar))::after,
[data-section="photos"] .pf-image-progress__bar:not([style*="width"]) {
  content: "";
  display: block;
  height: 100%;
  width: 40%;
  background: var(--terra-500, #B8451F);
  animation: pe-progress-indeterminate 1.1s ease-in-out infinite;
}
@keyframes pe-progress-indeterminate {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(320%); }
}

/* ---------- Failed state ---------- */
[data-section="photos"] .pf-image-tile.is-failed { border-color: var(--danger-500, #DC2626); }
[data-section="photos"] .pf-image-tile.is-failed img { filter: grayscale(0.6) brightness(0.7); }
[data-section="photos"] .pf-image-tile__status {
  position: absolute;
  top: 8px; left: 8px;
  z-index: 3;
  padding: 3px 8px;
  background: var(--danger-500, #DC2626);
  color: #fff;
  font-size: 0.66rem; font-weight: 700;
  border-radius: 999px;
}

/* =====================================================================
   Add-more tile  (.pf-image-add)
   ===================================================================== */
[data-section="photos"] .pf-image-add {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 6px;
  border: 1.5px dashed var(--terra-200, #ECC2A0);
  background: transparent;
  color: var(--ink-muted, #7A6F68);
  font-size: 0.78rem; font-weight: 600;
  cursor: pointer;
  transition: border-color .16s ease, color .16s ease, background .16s ease;
}
[data-section="photos"] .pf-image-add:hover {
  border-color: var(--terra-400, #D17A40);
  color: var(--terra-600, #9E3818);
  background: var(--terra-50, #FBF3EC);
}
[data-section="photos"] .pf-image-add svg { width: 22px; height: 22px; }
[data-section="photos"] .pf-image-add input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* =====================================================================
   Responsive — comfortable touch targets on small screens
   ===================================================================== */
@media (max-width: 640px) {
  [data-section="photos"] { --pe-photo-min: 104px; }
  [data-section="photos"] .pf-images-empty { min-height: 168px; padding: 26px 18px; }
  /* Actions always visible on touch (no hover) + >=44px targets */
  [data-section="photos"] .pf-image-actions { opacity: 1; transform: none; }
  [data-section="photos"] .pf-image-handle,
  [data-section="photos"] .pf-image-tile::after { opacity: 1; width: 30px; height: 30px; }
  [data-section="photos"] .pf-image-btn { min-height: 36px; }
  [data-section="photos"] .pf-image-btn.is-danger { width: 36px; }
}

/* =====================================================================
   Reduced motion
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  [data-section="photos"] .pf-images-empty,
  [data-section="photos"] .pf-images-empty::before,
  [data-section="photos"] .pf-image-tile,
  [data-section="photos"] .pf-image-actions,
  [data-section="photos"] .pf-image-handle,
  [data-section="photos"] .pf-image-progress__bar { transition: none; }
  [data-section="photos"] .pf-image-progress__bar:not([style*="width"]),
  [data-section="photos"] .pf-image-progress:not(:has(.pf-image-progress__bar))::after { animation: none; width: 100%; }
}