/* =========================================================
   camere.md — assets/css/galerie.css

   Miniaturile de sub poza produsului. Se incarca pe fisele generate din
   `produs/` si pe `produs.html`; pe restul site-ului n-are ce cauta.

   Nu exista regula pentru „o singura poza": galeria nu se deseneaza deloc
   atunci, nici in HTML. Un rand cu o miniatura sub poza pe care o vezi deja
   e o unealta care nu face nimic.
   ========================================================= */

.pd-poze{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-8);
  margin:var(--sp-12) 0 0;
  padding:0;
  list-style:none;
}

.pd-poza{
  display:block;
  width:72px;
  height:72px;
  padding:var(--sp-4);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  /* Alb in ambele teme, ca poza mare: pozele furnizorului au fundalul alb ars
     in ele, iar pe tema inchisa o miniatura transparenta ar fi un patrat alb
     cu chenar intunecat in jur. */
  background:#fff;
  transition:border-color var(--t-ui) var(--e-out),
             transform var(--t-ui) var(--e-out);
}
.pd-poza img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
.pd-poza:hover{border-color:var(--accent-line);transform:translateY(-2px)}
.pd-poza:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Cea aratata acum. Se marcheaza si cu `aria-current`, deci nu ramane doar o
   diferenta de culoare pentru cine n-o vede. */
.pd-poza.is-activ{
  border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent);
}

@media (max-width:640px){
  .pd-poza{width:60px;height:60px}
}

/* ---------- navigarea de pe poza mare ---------- */
/* Miniaturile singure nu sunt navigare. Pe telefon ai trei patrate de 60 px
   sub o poza cat ecranul, iar gestul firesc acolo e sa tragi de poza — deci
   poza mare primeste doua butoane si raspunde la glisare. Butoanele apar doar
   cand exista mai multe poze: le adauga `galerie.js`, care nu porneste sub
   doua poze. */
.pd-media--nav{position:relative}

.pd-nav{
  position:absolute;
  top:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;                      /* tinta de atingere, nu marimea desenului */
  height:44px;
  margin-top:-22px;
  padding:0;
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  background:var(--surface);
  color:var(--text);
  cursor:pointer;
  /* Pe ecran mare stau ascunse pana treci cu mausul peste poza: o fisa de
     produs e despre produs, nu despre comenzile ei. Pe telefon nu exista
     „peste”, deci raman mereu vizibile — vezi mai jos. */
  opacity:0;
  transition:opacity var(--t-ui) var(--e-out),
             border-color var(--t-ui) var(--e-out);
}
.pd-nav svg{width:22px;height:22px}
.pd-nav--inapoi{left:var(--sp-12)}
.pd-nav--inainte{right:var(--sp-12)}
.pd-media--nav:hover .pd-nav,
.pd-nav:focus-visible{opacity:1}
.pd-nav:hover{border-color:var(--accent-line)}
.pd-nav:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* A cata poza din cate. Fara ea, la a patra glisare nu mai stii daca te-ai
   invartit o data sau de doua ori. */
.pd-numar{
  position:absolute;
  right:var(--sp-12);
  bottom:var(--sp-12);
  margin:0;
  padding:var(--sp-4) var(--sp-8);
  border-radius:var(--r-pill);
  background:var(--surface);
  border:1px solid var(--border);
  font-family:var(--f-mono);
  font-size:var(--fs-micro);
  color:var(--text-muted);
}

@media (hover:none),(max-width:860px){
  /* Fara maus nu exista „trecut cu mausul peste”: butoanele raman la vedere. */
  .pd-nav{opacity:1}
}

@media (prefers-reduced-motion:reduce){
  .pd-nav{transition:none}
}