/* === v1.51 fotke: okretanje za 90°, "na prvo mjesto", povuci-i-pusti sličica (stranica oglasa) ===========
   Logika: src/frontend/oglas/fotke.mjs + app.js (renderOglasPhotoManager, renderOglasStageViewer,
   bindOglasPhotoManagerEvents). Gumbi na fotki (↻, ⇤, ★, ✕, ← →) su svijetle pločice s tamnom ikonom u OBA
   načina (kao strelice velike slike, §39) — podloga je fotografija, ne tema. Boje stranice: samo tokeni. */

/* --- Rešetka koja se slaže ---------------------------------------------------------------------------- */
.oglas-photos--page.is-sortable { position: relative; }
.oglas-photos--page.is-sortable .oglas-photo[data-sort-item] {
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  container-type: inline-size;
}
.oglas-photos--page.is-sorting .oglas-photo[data-sort-item] {
  z-index: 1;
  transition: transform 0.18s var(--ease-out);
}
.oglas-photos--page.is-sorting .oglas-photo .oglas-photo-actions,
.oglas-photos--page.is-sorting .oglas-photo .oglas-rotate-btn { opacity: 0 !important; pointer-events: none; }
.oglas-photos--page .oglas-photo.is-drag-source { opacity: 0; }
html.oglas-sorting,
html.oglas-sorting * { cursor: grabbing !important; -webkit-user-select: none; user-select: none; }

/* Mjesto na koje će sličica pasti (pomiče se s pokazivačem, ostale se razmaknu) */
.oglas-sort-slot {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  box-sizing: border-box;
  border: 2px dashed var(--brand);
  border-radius: var(--radius-sm);
  background: var(--brand-soft);
  pointer-events: none;
  transition: transform 0.18s var(--ease-out);
}

/* "Podignuta" sličica koja prati miš/prst */
.oglas-sort-ghost {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 400;
  box-sizing: border-box;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-md);
  pointer-events: none;
  will-change: transform;
  transition: scale 0.14s var(--ease-out), rotate 0.14s var(--ease-out), box-shadow 0.14s var(--ease-out);
}
.oglas-sort-ghost.is-lifted {
  scale: 1.06;
  rotate: -2deg;
  box-shadow: 0 18px 38px rgba(16, 24, 40, 0.3), 0 0 0 2px var(--brand);
}
.oglas-sort-ghost.is-settling { transition: transform 0.16s var(--ease-out), scale 0.16s var(--ease-out), rotate 0.16s var(--ease-out), box-shadow 0.16s var(--ease-out); }
.oglas-sort-ghost img { width: 100%; height: 100%; object-fit: cover; display: block; filter: var(--icare-img, none); }
.oglas-sort-ghost figcaption {
  position: absolute;
  top: 4px;
  left: 4px;
  font-size: 10px;
  background: rgba(16, 20, 24, 0.72);
  color: #fff;
  border-radius: 4px;
  padding: 1px 6px;
}

/* --- Gumbi na sličici ----------------------------------------------------------------------------------- */
.oglas-photos--page .oglas-photo-actions { align-items: center; }
.oglas-photo-actions-main,
.oglas-photo-move { display: inline-flex; align-items: center; gap: 3px; }
.oglas-photos--page .oglas-photo-actions button {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  min-height: 26px;
  padding: 0 6px;
  background: rgba(255, 255, 255, 0.92);
  color: #101828;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.oglas-photos--page .oglas-photo-actions button:hover:not(:disabled) { background: #ffffff; color: var(--brand); }
.oglas-photos--page .oglas-photo-actions button svg { width: 15px; height: 15px; }
.oglas-photos--page .oglas-photo-actions .oglas-photo-star.is-on { background: #fff4cc; color: #9a6700; }
.oglas-photos--page .oglas-photo-actions .oglas-photo-first:hover:not(:disabled) { background: var(--brand); color: #ffffff; }

/* ↻ okretanje: gornji desni kut sličice i velike slike */
.oglas-rotate-btn,
button.oglas-rotate-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 2;
  width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #101828;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
}
.oglas-rotate-btn svg { width: 16px; height: 16px; transition: rotate 0.2s var(--ease-out); }
button.oglas-rotate-btn:hover:not(:disabled) { background: #ffffff; color: var(--brand); }
button.oglas-rotate-btn:hover:not(:disabled) svg { rotate: 30deg; }
button.oglas-rotate-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.oglas-viewer-rotate,
button.oglas-viewer-rotate { top: 10px; right: 10px; width: 40px; height: 40px; min-height: 40px; }
.oglas-viewer-rotate svg { width: 20px; height: 20px; }

/* Pregled okretanja dok server ne vrati okrenutu sliku (inline --oglas-rot / --oglas-rot-scale) */
img[data-oglas-rot-img] { transition: transform 0.22s var(--ease-out); }
img[data-oglas-rot-img][style*="--oglas-rot"] { transform: rotate(var(--oglas-rot, 0deg)) scale(var(--oglas-rot-scale, 1)); }

/* Miš: gumbi se pokažu pod mišem ili fokusom (sličice su čiste); ★ izvora tada pokazuje gumb ★ */
@media (hover: hover) and (pointer: fine) {
  .oglas-photos--page.is-sortable .oglas-photo .oglas-photo-actions,
  .oglas-photos--page.is-sortable .oglas-photo .oglas-rotate-btn { opacity: 0; transition: opacity 0.12s ease; }
  .oglas-photos--page.is-sortable .oglas-photo:hover .oglas-photo-actions,
  .oglas-photos--page.is-sortable .oglas-photo:focus-within .oglas-photo-actions,
  .oglas-photos--page.is-sortable .oglas-photo:hover .oglas-rotate-btn,
  .oglas-photos--page.is-sortable .oglas-photo:focus-within .oglas-rotate-btn { opacity: 1; }
  .oglas-photos--page.is-sortable .oglas-photo:hover .oglas-photo-source,
  .oglas-photos--page.is-sortable .oglas-photo:focus-within .oglas-photo-source { opacity: 0; }
  .oglas-hint-touch { display: none; }
}
/* Dodir: gumbi uvijek vidljivi, ★ izvora je na gumbu; strelice ← → ne trebaju (drži pa povuci) */
@media (hover: none), (pointer: coarse) {
  .oglas-photos--page.is-sortable .oglas-photo .oglas-photo-source { display: none; }
  .oglas-photos--page .oglas-photo-move { display: none; }
  .oglas-hint-drag { display: none; }
  .oglas-photos--page .oglas-photo-actions button { min-width: 30px; height: 30px; min-height: 30px; }
  .oglas-rotate-btn,
  button.oglas-rotate-btn { width: 32px; height: 32px; min-height: 32px; }
  .oglas-viewer-rotate,
  button.oglas-viewer-rotate { width: 42px; height: 42px; min-height: 42px; }
}
/* Uska sličica: strelice ← → otpadaju (ostaje povlačenje), ⇤ ★ ✕ ostaju */
@container (max-width: 150px) {
  .oglas-photos--page .oglas-photo-move { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .oglas-photos--page.is-sorting .oglas-photo[data-sort-item],
  .oglas-sort-slot,
  .oglas-sort-ghost,
  .oglas-sort-ghost.is-settling,
  img[data-oglas-rot-img] { transition: none; }
  .oglas-sort-ghost.is-lifted { rotate: none; scale: 1.02; }
}