/* Fisa piesei.
   Doua zone: sus, galerie + esential, cu galeria lipita de ecran cat tine coloana
   din dreapta; jos, povestea pe o latime confortabila de citit. */

.fisa{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:64px;align-items:start}
@media(max-width:920px){.fisa{grid-template-columns:1fr;gap:36px}}

/* galeria ramane in dreptul textului cat timp e loc */
.galerie{position:sticky;top:104px}
@media(max-width:920px){.galerie{position:relative;top:auto}} /* relative, nu static: ține lupa (F3); top:auto, altfel cei 104 px de sus o coboară */
.galerie .principala{background:var(--brun);border:1px solid var(--linie);aspect-ratio:1;overflow:hidden}
.galerie .principala{view-transition-name:piesa-foto} /* fotografia care vine din card (app.css, F3) */
.galerie .principala img{width:100%;height:100%;object-fit:cover}
.miniaturi{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}
.miniaturi button{width:76px;height:76px;padding:0;border:1px solid var(--linie);background:var(--brun);
  cursor:pointer;overflow:hidden;transition:border-color var(--t)}
.miniaturi button[aria-current=true]{border-color:var(--aur)}
.miniaturi img{width:100%;height:100%;object-fit:cover}

.esential .nivel{font:500 11px var(--f);letter-spacing:.18em;text-transform:uppercase;color:var(--aur);display:block;margin-bottom:16px}
.esential h1{font-weight:200;font-size:clamp(32px,4.2vw,54px);letter-spacing:.04em;line-height:1.1;margin:0 0 20px}
.esential .rezumat{font-size:20px;color:var(--alb);margin:0 0 36px;max-width:40ch}

/* specificatia pe doua coloane, nu pe o lista inalta */
.specificatie-grila{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px;margin:0;
  border-top:1px solid var(--linie)}
.specificatie-grila div{padding:18px 0;border-bottom:1px solid var(--linie)}
.specificatie-grila dt{font:500 10px var(--f);letter-spacing:.2em;text-transform:uppercase;color:var(--aur);margin:0 0 7px}
.specificatie-grila dd{margin:0;font-size:16px;line-height:1.5}
.specificatie-grila .lat{grid-column:1/-1}
/* numar impar de celule normale: ultima nu ramane singura pe jumatate de rand (QA 24.10) */
.specificatie-grila > div:not(.lat):nth-child(odd of :not(.lat)):nth-last-child(1 of :not(.lat)){grid-column:1/-1}
.specificatie-grila .lat dd{color:var(--fum);font-size:15px}
@media(max-width:480px){.specificatie-grila{grid-template-columns:1fr}}

.actiune{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:36px}
.actiune .nota{font-family:var(--ft);font-size:13px;color:var(--fum);margin:0}

/* povestea, pe toata latimea, cu masura de citit */
.poveste-larga{margin:104px 0 0;padding:56px 0 0;border-top:1px solid var(--linie)}
.poveste-larga .cap{font:500 11px var(--f);letter-spacing:.18em;text-transform:uppercase;color:var(--aur);margin:0 0 28px}
.poveste-larga .corp.doua{columns:2;column-gap:64px;column-fill:balance}
.poveste-larga .corp.una{max-width:72ch}
.poveste-larga p{margin:0 0 20px;font-size:17.5px;line-height:1.85;max-width:none}
.poveste-larga p:last-child{margin-bottom:0}
@media(max-width:860px){.poveste-larga{margin-top:64px}
  .poveste-larga .corp.doua{columns:1}}
.poveste-larga .surse{columns:1;margin-top:32px;padding-top:22px;border-top:1px solid var(--linie);
  font-family:var(--ft);font-size:13px;color:var(--fum);line-height:1.9}
.poveste-larga .surse a{color:var(--fum);text-decoration:none;border-bottom:1px solid var(--linie);
  transition:border-color var(--t),color var(--t)}
.poveste-larga .surse a:hover{color:var(--aur);border-bottom-color:var(--aur)}

.lipsa{padding:96px 0;text-align:center}

/* Sub referinta calibrului, categoria lui. Referinta e ce cauta un colectionar,
   categoria e ce intelege oricine altcineva; una fara cealalta arata ori ca un
   cod de piesa, ori ca o vorba goala. */
.specificatie-grila .fel{
  display:block;margin-top:8px;
  font:400 12px var(--f);letter-spacing:.12em;text-transform:uppercase;
  /* era --umbra (2,6:1), pe care app.css o rezervă decorului, «niciodată text»; --fum are 7,3:1 */
  color:var(--fum);
}

/* Lupa pe cadran (F3, 18.10): detaliul lucrului manual, marit sub cursor sau, pe telefon,
   la atingere (deasupra degetului, ca sa nu-l acopere; se trage cu degetul, se inchide la o
   noua atingere). Nimic nu se misca singur: lupa apare doar unde e cursorul sau degetul.
   O face fisa.js; fara JavaScript fotografia ramane cum era. Fotografiile au cel mult 900 px,
   deci marirea e de cel mult ~2,5 ori, cat tine imaginea fara sa se vada pixelii. */
.lupa{position:absolute;left:0;top:0;z-index:3;pointer-events:none;border-radius:50%;
  width:var(--d,200px);height:var(--d,200px);background-color:var(--brun);background-repeat:no-repeat;
  border:1px solid var(--aur);
  box-shadow:0 0 0 1px rgba(11,11,11,.6),inset 0 0 14px rgba(0,0,0,.25),0 18px 48px rgba(0,0,0,.55);
  opacity:0;scale:.92;transition:opacity var(--t),scale var(--t)}
.lupa.vazuta{opacity:1;scale:1}
.principala.cu-lupa{touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
@media(hover:hover){.principala.cu-lupa{cursor:none}}
.semn-lupa{position:absolute;right:12px;bottom:12px;z-index:2;width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;background:rgba(11,11,11,.55);border:1px solid var(--linie);
  pointer-events:none;transition:opacity var(--t)}
.semn-lupa svg{width:16px;height:16px;stroke:var(--aur);fill:none;stroke-width:1.4}
.principala.cu-lupa .semn-lupa{opacity:0}
@media(prefers-reduced-motion:reduce){.lupa{transition:none;scale:1}}