/* ═══════════════════════════════════════════════════════════════════
   TERMINA — družabna dinamika, del E in G (dinamika.js, migracija 091)

   Zgradba gradnikov: video v toku, drsnik pred in po, ponovna objava,
   komentarji, vrsta Novo pri tvojih. Ploskve in napisi (tonska ploskev,
   lasnica, mirni drobni napisi) so v eleganca.css, ki pride za to datoteko.
   Barve samo iz žetonov; napis na fotografiji vedno na zastoru
   (--foto-zastor, --foto-napis), nadomestek fotografije je temen oder.
   ═══════════════════════════════════════════════════════════════════ */

/* ── G: kratek video ─────────────────────────────────────────────── */
.din-video{position:relative;margin:12px 0 0;border-radius:var(--r-kartica);overflow:hidden;
  background:var(--oder-2);aspect-ratio:4/5;max-height:70vh}
.din-video video{display:block;width:100%;height:100%;object-fit:cover;cursor:pointer;filter:var(--foto-filter)}
.din-video.brez-slicice video{background:var(--oder-2)}
.din-v-gumb{position:absolute;bottom:10px;width:44px;height:44px;border-radius:50%;border:0;padding:0;
  display:grid;place-items:center;cursor:pointer;background:var(--foto-zastor);color:var(--foto-napis)}
.din-v-predvajaj{left:10px}
.din-v-zvok{right:10px}
.din-v-gumb svg{width:22px;height:22px;fill:currentColor;stroke:none}
.din-v-zvok svg .din-val,.din-v-zvok svg .din-crta{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.din-video.zvok .din-v-zvok .din-crta{display:none}
.din-video:not(.zvok) .din-v-zvok .din-val{display:none}
.din-v-gumb:focus-visible{outline:2px solid var(--foto-napis);outline-offset:2px;box-shadow:0 0 0 4px var(--foto-zastor)}
/* Zmanjšano gibanje: video ne teče sam, zato je predvajanje velika tarča
   na sredini, dokler ga roka ne zažene. */
@media(prefers-reduced-motion:reduce){
  .din-video:not(.tece) .din-v-predvajaj{left:50%;bottom:50%;transform:translate(-50%,50%);width:64px;height:64px}
  .din-video:not(.tece) .din-v-predvajaj svg{width:30px;height:30px}
}
/* znak predvajanja na ploščici (mreža, galerija) */
.din-znak-video{position:absolute;top:8px;left:8px;width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;background:var(--foto-zastor);color:var(--foto-napis);pointer-events:none}
.din-znak-video svg{width:14px;height:14px;fill:currentColor}
.din-brez-slike{display:block;width:100%;height:100%;background:var(--oder-2)}
.din-celica-gumb{display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:pointer;position:relative}
.din-celica-gumb:focus-visible{outline:2px solid var(--medenina);outline-offset:-3px}
/* ogled videa čez zaslon */
.din-ogled{width:min(520px,100vw - 32px);max-height:calc(100vh - 32px);padding:0;border:0;border-radius:var(--r-kartica);
  background:var(--ohisje);color:var(--slonovina);overflow:auto}
.din-ogled::backdrop{background:var(--steklo-oder-temno,rgba(28,23,20,.78))}
.din-ogled-telo{position:relative;padding:12px}
.din-ogled-telo .din-video{margin:0}
.din-ogled-zapri{position:absolute;top:20px;right:20px;z-index:2;width:44px;height:44px;border-radius:50%;border:0;
  display:grid;place-items:center;cursor:pointer;background:var(--foto-zastor);color:var(--foto-napis)}
.din-ogled-zapri svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.din-ogled-zapri:focus-visible{outline:2px solid var(--medenina);outline-offset:2px}
.din-ogled-napis{margin:10px 4px 2px;font-size:var(--t-sm);color:var(--telo-2)}

/* ── E2: pred in po ──────────────────────────────────────────────── */
.din-pp{margin:12px 0 0;--pp:50%}
.din-pp-okvir{position:relative;border-radius:var(--r-kartica);overflow:hidden;aspect-ratio:4/5;max-height:70vh;
  background:var(--oder-2);user-select:none;-webkit-user-select:none}
/* Obe fotografiji oprani enako (CGP: fotografija je vedno oprana) — primerjava
   ostane poštena, ker ima pred isto obdelavo kot po. */
.din-pp-okvir img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;filter:var(--foto-filter)}
.din-pp-pred{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pp)) 0 0)}
.din-pp-crta{position:absolute;top:0;bottom:0;left:var(--pp);width:2px;margin-left:-1px;background:var(--foto-napis);
  box-shadow:0 0 0 1px var(--foto-zastor);pointer-events:none}
.din-pp-rocaj{position:absolute;top:50%;left:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;
  display:grid;place-items:center;background:var(--foto-zastor);color:var(--foto-napis);box-shadow:0 0 0 2px var(--foto-napis)}
.din-pp-rocaj svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* Pravi drsnik leži neviden čez celo fotografijo: dotik kjer koli premakne
   mejo, tipkovnica jo premika s puščicami, bralnik bere vrednost. Navpično
   drsenje strani ostane strani. */
.din-pp-drsnik{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y;z-index:1;
  -webkit-appearance:none;appearance:none;background:transparent}
.din-pp-drsnik::-webkit-slider-thumb{-webkit-appearance:none;width:44px;height:100%}
.din-pp-drsnik::-moz-range-thumb{width:44px;height:100%;border:0}
.din-pp-drsnik:focus-visible ~ .din-pp-crta .din-pp-rocaj{outline:2px solid var(--foto-napis);outline-offset:3px}
.din-pp-oznaka{position:absolute;top:12px;padding:5px 12px;border-radius:var(--r-oval);pointer-events:none;
  background:var(--foto-zastor);color:var(--foto-napis)}
.din-pp-oznaka.levo{left:12px}
.din-pp-oznaka.desno{right:12px}
.din-pp-stranka{margin:8px 2px 0}

/* ── E3: ponovna objava ──────────────────────────────────────────── */
.din-ponovna{margin-top:12px;padding:14px;border-radius:var(--r-kartica)}
.din-ponovna-kdo{margin:0 0 10px}
.din-ponovna-kdo a{display:inline-flex;align-items:center;min-height:44px;margin:-12px 0;text-decoration:underline;text-underline-offset:3px}
.din-ponovna .din-video{margin-top:0}
.din-ponovna-slika img{display:block;width:100%;border-radius:var(--r-drobno);filter:var(--foto-filter)}
.din-ponovna-telo{margin:10px 0 0;white-space:pre-wrap}

/* ── E1: komentarji ──────────────────────────────────────────────── */
.din-kom-st{display:inline-flex;align-items:center;gap:6px;margin-left:auto;margin-right:14px}
.din-kom-st svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
.din-kom{margin-top:14px;padding-top:12px;display:flex;flex-direction:column;gap:8px}
.din-kom[hidden]{display:none}
.din-kom-seznam{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.din-kom-seznam[hidden]{display:none}
.din-k{padding:10px 14px;border-radius:var(--r-drobno)}
.din-k.salon{margin-left:22px;position:relative}
.din-k.salon::before{content:"";position:absolute;left:-12px;top:10px;bottom:10px;width:2px;border-radius:2px;background:var(--karamela)}
.din-k-glava{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.din-k-besedilo{margin:4px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}
.din-k-dej{display:flex;gap:16px;margin-top:2px}
.din-k-dej .btn-link,.din-kom-vse,.din-kom-prijava{min-height:44px;display:inline-flex;align-items:center}
.din-kom-vse{align-self:flex-start}
.din-kom-vse[hidden]{display:none}
.din-kom-obrazec{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end}
.din-kom-obrazec textarea{flex:1 1 200px;min-height:44px;max-height:160px;resize:none;font-family:var(--body);font-size:var(--t-vnos);line-height:1.4;
  padding:11px 14px;border-radius:var(--r-polje)}
/* ograda v teži 500: tanke črke se pri izrisu posvetlijo in meritev je
   padla na 4,27 : 1, čeprav --telo-2 na beli meri 6,14 */
.din-kom-obrazec textarea::placeholder{font-weight:500}
.din-kom-obrazec .btn{min-height:44px}
.din-kom-obrazec .note{flex-basis:100%;margin:0}
.din-kom-obrazec .note:empty{display:none}
.din-k > .din-kom-obrazec{margin-top:8px}

/* ── E4: Novo pri tvojih ─────────────────────────────────────────── */
.din-novo{margin:0 0 26px}
.din-novo[hidden]{display:none}
.din-novo-h{margin:0 0 10px}
.din-novo-trak{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;padding:2px 2px 8px;margin:0 -2px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.din-novo-trak::-webkit-scrollbar{display:none}
.din-novo-k{flex:none;scroll-snap-align:start;width:152px;min-height:132px;padding:12px 14px;
  display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;font:inherit;cursor:pointer;
  border-radius:var(--r-kartica);text-decoration:none;transition:transform .18s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover) and (pointer:fine){.din-novo-k:hover{transform:translateY(-2px)}}
.din-novo-k:active{transform:scale(.98)}
.din-novo-k:focus-visible{outline:2px solid var(--medenina);outline-offset:2px}
.din-novo-av{width:46px;height:46px;border-radius:50%;overflow:hidden;display:grid;place-items:center;margin:4px 0 2px;
  box-shadow:0 0 0 2px var(--ohisje),0 0 0 4px var(--karamela)}
.din-novo-av img{width:100%;height:100%;object-fit:cover}
.din-novo-vel{margin:2px 0}
.din-novo-kdo,.din-novo-opis{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(prefers-reduced-motion:reduce){.din-novo-k{transition:none}.din-novo-k:active{transform:none}@media (hover:hover) and (pointer:fine){.din-novo-k:hover{transform:none}}}

/* ── plošča: deljenje in pred in po ──────────────────────────────── */
.din-oznacene{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.din-oznacene li{display:flex;flex-direction:column;gap:6px;padding:10px;border-radius:var(--r-drobno)}
.din-oznacene .slika{position:relative;aspect-ratio:1;border-radius:var(--r-drobno);overflow:hidden;background:var(--oder-2)}
.din-oznacene .slika img{width:100%;height:100%;object-fit:cover;display:block}
.din-oznacene .btn{min-height:44px;width:100%}
.din-medij-izbira{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0}
.din-medij-izbira .btn{min-height:44px}
.din-video-pred{max-width:280px;margin:6px 0 10px;border-radius:var(--r-drobno);overflow:hidden;background:var(--oder-2)}
.din-video-pred video{display:block;width:100%;max-height:320px}
.kart-pp{display:flex;flex-wrap:wrap;gap:8px;align-items:center;flex-basis:100%}
.kart-pp .btn{min-height:44px}
.slike-ime{display:flex;align-items:center;gap:8px;min-height:44px}

/* ── profil: kartica novice in galerija ──────────────────────────── */
.post > .din-video,.post > .din-pp,.post > .din-ponovna{margin:0}
.post > .din-video,.post > .din-pp .din-pp-okvir{border-radius:0}
.post > .din-ponovna{margin:12px 16px 0}
.post > .din-pp .din-pp-stranka{margin:8px 16px 0}
.post > .din-kom{margin:0 16px;padding-bottom:14px}
.post .pd{display:flex;align-items:center;gap:10px}
.post .pd .din-kom-st{margin:0 0 0 auto}
.gal-cel .din-znak-video{top:6px;left:6px}
.gal-dlg video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:var(--oder-2)}
.gal-dlg video[hidden],.gal-dlg img[hidden]{display:none}

/* ── profil stranke: video v sestavljalcu, deljenje salona ───────── */
.obj-prev video{display:block;width:100%;max-height:320px;background:var(--oder-2)}
.obj-grid .din-brez-slike{position:absolute;inset:0}
.obj-deljeno{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;padding:4px 2px}
.obj-deljeno .btn-link{min-height:44px}
.slike-dovoli[hidden]{display:none}
#posts .din-video,#posts .din-pp{max-width:340px}
#posts .pf .din-kom-st{margin-left:auto}

/* Prijava fotografije v mreži skupnosti: isti temni krožec kot srce, v
   levem kotu (srce stoji desno). List za razlog je zb-* (eleganca.css). */
.shrani.din-prijavi{right:auto;left:10px;background:var(--foto-zastor);border-color:var(--gravura-2);color:var(--foto-napis)}
@media (hover:hover) and (pointer:fine){.shrani.din-prijavi:hover{color:var(--karamela);border-color:var(--karamela-rob)}}
.shrani.din-prijavi:focus-visible{outline:2px solid var(--medenina);outline-offset:2px}

/* Besedilni »Prijavi« ob objavi salona, oceni, sporočilu in profilu salona
   (pregled pred oddajo v App Store, 21. 10. 2026; dinamika.js
   gumbPrijaviBesedilo). Tih: drobno besedilo v telesni barvi, ne gumb, ki
   bi tekmoval z Rezerviraj; tarča je kljub temu 44 px. */
.din-prijavi-t{display:inline-flex;align-items:center;min-height:44px;min-width:44px;padding:0 6px;margin:-12px 0;
  background:none;border:none;font:inherit;font-size:var(--t-sm);color:var(--telo-2);cursor:pointer;
  text-decoration:none}
@media (hover:hover) and (pointer:fine){.din-prijavi-t:hover{color:var(--slonovina);text-decoration:underline;text-underline-offset:3px}}
.din-prijavi-t:focus-visible{outline:2px solid var(--medenina);outline-offset:2px;border-radius:8px}
/* v mehurčku sporočila: ob uri, v isti vrstici; tarča sega čez rob
   mehurčka navzgor in navzdol, vrstica pa ostane nizka */
.msg-noga{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;margin-top:3px}
.msg-noga .kdaj{margin-top:0}
.msg .din-prijavi-t{margin:-14px -6px;font-size:var(--t-xs)}
/* ob datumu ocene in objave salona na profilu: datum levo, Prijavi desno */
.rev .dt,.post .pd{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px}
.rev .dt .din-prijavi-t,.post .pd .din-prijavi-t{margin-left:auto;font-family:var(--body);letter-spacing:0}
/* dno profila salona: prijava in blokada (ponudnik.js varnostProfila) */
.prof-varnost{display:flex;flex-wrap:wrap;gap:8px 16px;margin:28px 0 12px;padding:6px 18px}
.prof-varnost[hidden]{display:none}
.prof-varnost .din-prijavi-t{margin:0}
.prof-varnost [hidden]{display:none}
/* dejanja nad nitjo: blokada (pogovori-bloki.js) */
.nit-dejanja{display:flex;justify-content:flex-end;gap:12px;margin:-6px 0 6px}
.nit-dejanja .btn-link{min-height:44px;font-size:var(--t-sm)}
.nit-dejanja [hidden]{display:none}