/* =========================================================
   CAMERE.MD — Portofoliu

   Doua lucruri, tinute impreuna pentru ca se schimba impreuna:
     1. grila de proiecte si cardul, care e o usa catre proiect
     2. fereastra de proiect, unde se vad materialele pe tot ecranul

   Pragurile de ecran stau aici, langa regulile pe care le schimba, nu in
   responsive.css: cine muta un card trebuie sa vada in acelasi loc si ce se
   intampla cu el pe telefon.

   Materialul conduce. Restul e o linie subtire, o categorie si un titlu.
   Fara pastile plutitoare pe fotografie, fara umbre colorate, fara sticla.
   ========================================================= */

/* ---------------------------------------------------------
   Capul sectiunii si filtrele
   --------------------------------------------------------- */
.pf-top{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:var(--sp-24);
  margin-bottom:var(--sp-40);
}

.filters{display:flex;flex-wrap:wrap;gap:var(--sp-8)}

/* Pe telefon filtrele nu se rup pe doua randuri: se deruleaza lateral, cu
   bara ascunsa. Un rand suplimentar ar impinge grila sub prima privire. */
@media (max-width:767px){
  .filters{
    width:100%;
    flex-wrap:nowrap;
    overflow-x:auto;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .filters::-webkit-scrollbar{display:none}
  .filter{flex:0 0 auto}
}

.filter{
  padding:10px var(--sp-16);
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  background:transparent;
  color:var(--text-muted);
  font-size:var(--fs-label);
  line-height:1;
  transition:color var(--t-micro) var(--e-out),
             border-color var(--t-micro) var(--e-out),
             background-color var(--t-micro) var(--e-out);
}
.filter:hover{color:var(--text);border-color:var(--border-strong)}
.filter[aria-pressed="true"]{
  background:var(--accent-strong);
  border-color:var(--accent-strong);
  color:var(--on-accent);
}

/* ---------------------------------------------------------
   Grila
   Doisprezece coloane, si fiecare rand se inchide la doisprezece: 3+9, 6+6,
   4+4+4, iar placa de final ia randul intreg. Randurile care nu se inchid
   lasa coloane goale la dreapta, iar grila incepe sa arate ca o greseala de
   asezare: de aceea un proiect nou vine la pachet cu locul lui in randuri.
   --------------------------------------------------------- */
.pf-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-auto-rows:minmax(210px,auto);
  gap:var(--sp-12);
}

.pf-card,
.pf-cta{grid-column:span 1}
.pf-card--film,
.pf-card--lead{grid-row:span 2}

/* ---------------------------------------------------------
   Cardul de proiect
   --------------------------------------------------------- */
.pf-card{
  position:relative;
  overflow:hidden;
  border-radius:var(--r-md);
  background:var(--surface-sunken);
  isolation:isolate;          /* straturile cardului nu ies din el */
  transition:transform var(--t-ui) var(--e-out),
             box-shadow var(--t-ui) var(--e-out);
}

.pf-card__media{position:absolute;inset:0;z-index:0}
.pf-card__media picture{display:block;height:100%}
.pf-card__media img,
.pf-card__preview{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}

/* Filmul de previzualizare sta peste poza si apare doar cand chiar ruleaza.
   Asa nu se vede niciodata un dreptunghi negru intre apasare si primul cadru. */
.pf-card__preview{
  position:absolute;inset:0;
  opacity:0;
  transition:opacity var(--t-ui) var(--e-out);
}
.pf-card.is-playing .pf-card__preview{opacity:1}

/* Valul de jos nu e decor: fara el, titlul alb pe o fotografie deschisa cade
   sub pragul de contrast. Merge de la transparent la aproape opac exact pe
   inaltimea benzii cu text. */
.pf-card__val{
  position:absolute;inset:0;z-index:1;
  /* Treptele sunt calculate, nu alese din ochi. Banda cu text ocupa ultimii
     ~21% din inaltimea cardului, deci pana acolo valul trebuie sa ramana la
     cel putin .88: peste o fotografie complet alba, asta da un fond de #212121,
     pe care eticheta portocalie (#ea6b08) iese la 5,0:1 si titlul la 14:1.
     Cu treapta de dinainte (.72 la 22%) eticheta cadea la 2,7:1, adica sub
     prag pe o poza deschisa. */
  background:linear-gradient(to top,
    rgba(6,9,15,.94) 0%,
    rgba(6,9,15,.88) 26%,
    rgba(6,9,15,.30) 55%,
    rgba(6,9,15,0) 78%);
  transition:opacity var(--t-ui) var(--e-out);
  pointer-events:none;
}

.pf-card__banda{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:var(--sp-20);
  display:grid;
  gap:6px;
  pointer-events:none;        /* apasarea trece la butonul din titlu */
}

.pf-card__cat{
  font-family:var(--f-mono);
  font-size:var(--fs-micro);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--on-dark-accent);
}

.pf-card__titlu{
  margin:0;
  font-family:var(--f-head);
  font-size:var(--fs-h4);
  font-weight:700;
  line-height:1.15;
  color:var(--on-dark);
}

/* Tinta de apasare e cardul intreg, nu o pastila intr-un colt: apasarea pe
   fotografie urca prin bule pana la <article>, iar pf-grid.js asculta pe grila.
   Butonul din titlu ramane pentru tastatura si pentru cititoarele de ecran, si
   el da numele accesibil.

   Aici a fost o greseala pe care am prins-o la masuratori: intinsesem un
   `::after` peste card, dar el se raporta la banda, care e absoluta, deci
   acoperea doar treimea de jos. Nu strica nimic, fiindca delegarea prindea
   oricum apasarea, dar promitea altceva decat facea. Scos. */
.pf-card{cursor:pointer}

.pf-card__link{
  padding:0;
  font:inherit;
  color:inherit;
  text-align:left;
  cursor:pointer;
  pointer-events:auto;
}
.pf-card__link:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--r-xs)}
/* Cand se poate, inelul se muta pe tot cardul: se vede mai bine ce se deschide. */
.pf-card:has(.pf-card__link:focus-visible){
  outline:2px solid var(--accent);
  outline-offset:3px;
}
.pf-card:has(.pf-card__link:focus-visible) .pf-card__link{outline:none}

.pf-card__meta{
  display:flex;align-items:center;gap:8px;
  font-family:var(--f-mono);
  font-size:var(--fs-micro);
  letter-spacing:.06em;
  color:var(--on-dark-muted);
  font-variant-numeric:tabular-nums;
}
.pf-card__meta:empty{display:none}

/* Semnul ca proiectul are film: mic, in randul de date, nu un cerc plutitor
   peste fotografie. */
.pf-card__semn{display:none}
.pf-card.has-film .pf-card__semn{
  display:inline-grid;place-items:center;
  width:18px;height:18px;
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.14);
  color:var(--on-dark);
}
.pf-card__semn svg{width:9px;height:9px}

/* Miscarea are un motiv: spune ca elementul e o usa, si scoate materialul in
   fata. Nimic nu se roteste si nimic nu pulseaza. */
@media (hover:hover) and (pointer:fine){
  .pf-card:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)}
  .pf-card:hover .pf-card__media img{transform:scale(1.04)}
  .pf-card__media img{transition:transform var(--t-comp) var(--e-out)}
  .pf-card:hover .pf-card__val{opacity:.88}
}

/* starea de plecare la filtrare */
.pf-card.is-out,
.pf-cta.is-out{
  opacity:0;
  transform:scale(.97);
  transition:opacity 200ms var(--e-inout),transform 200ms var(--e-inout);
}

/* ---------------------------------------------------------
   Ultima placa: nu un proiect, ci pasul urmator
   --------------------------------------------------------- */
.pf-cta{
  position:relative;
  display:flex;flex-direction:column;justify-content:flex-end;gap:var(--sp-12);
  padding:var(--sp-24);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:var(--surface-raised);
}
.pf-cta h3{
  margin:0;
  font-size:var(--fs-h4);
  text-transform:uppercase;
  letter-spacing:-.005em;
}
.pf-cta p{margin:0;font-size:var(--fs-body);color:var(--text-muted)}
.pf-cta .ring{width:44px}

/* =========================================================
   FEREASTRA DE PROIECT
   Camp negru, materialul intreg (`contain`, nu `cover`: intr-un portofoliu
   nu se taie din fotografie), si atat cat trebuie in jur cat sa se stie unde
   esti si cum mergi mai departe.
   ========================================================= */
.pfv{
  position:fixed;
  inset:0;
  z-index:var(--z-lightbox);
  opacity:0;
  transition:opacity var(--t-ui) var(--e-out);
}
.pfv.is-open{opacity:1}
/* Cat timp nu e deschisa nu are voie sa prinda nicio apasare. Atributul
   `hidden` o scoate oricum din asezare (vezi base.css), asta e a doua plasa:
   in cele 260 ms de stingere fereastra e inca in pagina. */
.pfv:not(.is-open){pointer-events:none}

.pfv__fundal{
  position:absolute;inset:0;
  background:#07090d;
}

.pfv__cadru{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
}

/* --------- capul: bara de parcurs si titlul --------- */
/* Capul si piciorul se string la latimea materialului, nu la a ecranului.
   Un film vertical pe un monitor lat lasa doua campuri negre uriase; daca
   titlul si contorul raman lipite de margini, nu mai par sa aiba legatura cu
   ce se vede. `--pfv-w` o pune pf-viewer.js dupa ce masoara materialul. */
.pfv__sus,
.pfv__jos{
  width:min(100%,var(--pfv-w,100%));
  margin-inline:auto;
}

.pfv__sus{
  position:relative;z-index:3;
  display:grid;gap:var(--sp-12);
  padding:var(--sp-16) var(--sp-16) var(--sp-12);
}

.pfv__bara{display:flex;gap:4px}

/* Segmentele sunt si navigatie: se apasa si sari direct la materialul acela.
   Zona de atingere e de 24px pe verticala, desi linia are 3px. */
.pfv__seg{
  flex:1 1 0;
  height:24px;
  display:flex;align-items:center;
  padding:0;
  background:none;border:0;
  cursor:pointer;
}
.pfv__seg i{
  display:block;
  width:100%;height:3px;
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.24);
  position:relative;
  overflow:hidden;
}
.pfv__seg i::after{
  content:"";
  position:absolute;inset:0;
  background:#fff;
  transform:scaleX(var(--p,0));
  transform-origin:left;
}
.pfv__seg.is-acum i{background:rgba(255,255,255,.34)}
.pfv__seg:hover i{background:rgba(255,255,255,.42)}
.pfv__seg:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:var(--r-xs)}

.pfv__antet{display:grid;gap:2px;min-width:0}
.pfv__cat{
  margin:0;
  font-family:var(--f-mono);font-size:var(--fs-micro);
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-dark-accent);
}
.pfv__cat:empty{display:none}
.pfv__titlu{
  margin:0;
  font-family:var(--f-head);font-size:var(--fs-h4);font-weight:700;
  line-height:1.2;color:var(--on-dark);
}

/* --------- scena --------- */
/* Panza sta pe `inset:0` intr-o scena pozitionata, nu pe `height:100%`.
   Cu inaltime procentuala, `min-height:auto` al elementului de grila lasa
   materialul sa-si impuna inaltimea nativa: un film 720x1280 iesea in afara
   ecranului si `max-height:100%` nu-l mai putea opri. Cu `inset`, cutia e
   data si procentele dinauntru au de ce sa se agate. */
.pfv__scena{
  position:relative;
  min-height:0;
}
.pfv__panza{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  padding:0 var(--sp-16);
}
.pfv__panza picture{display:contents}

/* Cat timp clona zboara de la card spre scena, materialul de dedesubt nu se
   vede. Fara asta, poza apare de doua ori — o data in zbor, o data asezata —
   si tocmai suprapunerea lor se citeste ca o smucitura.
   Se descopera in clipa in care clona a aterizat peste el, la aceeasi masura
   si in acelasi loc, deci schimbul e nevazut. Vezi morf() din pf-viewer.js. */
.pfv__panza{transition:opacity 120ms linear}
.pfv.is-morf .pfv__panza{opacity:0;transition:none}
.pfv__media{
  max-width:100%;
  max-height:100%;
  width:auto;height:auto;
  min-width:0;min-height:0;
  object-fit:contain;
  display:block;
}
.pfv__lipsa{
  margin:0;text-align:center;color:var(--on-dark-muted);font-size:var(--fs-body);
}
.pfv__lipsa span{font-family:var(--f-mono);font-size:var(--fs-micro);opacity:.7}

/* --------- piciorul --------- */
.pfv__jos{
  position:relative;z-index:3;
  display:flex;align-items:center;gap:var(--sp-16);
  padding:var(--sp-12) var(--sp-16) max(var(--sp-16),env(safe-area-inset-bottom));
}

.pfv__legenda{
  margin:0;min-width:0;
  font-size:var(--fs-label);color:var(--on-dark-muted);
}
.pfv__legenda[hidden]{display:none !important}
.pfv__numar{
  /* impins la dreapta de aici, nu de legenda: legenda lipseste des, si atunci
     contorul ar fi ramas lipit de butonul de redare */
  margin:0 0 0 auto;flex:0 0 auto;
  font-family:var(--f-mono);font-size:var(--fs-micro);
  letter-spacing:.08em;color:var(--on-dark-muted);
  font-variant-numeric:tabular-nums;
}

/* --------- comenzile --------- */
.pfv__nav,
.pfv__inchide,
.pfv__redare{
  position:absolute;z-index:4;
  display:grid;place-items:center;
  width:52px;height:52px;
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.10);
  color:var(--on-dark);
  transition:background-color var(--t-micro) var(--e-out),
             opacity var(--t-micro) var(--e-out),
             transform var(--t-micro) var(--e-out);
}
.pfv__nav:hover,
.pfv__inchide:hover,
.pfv__redare:hover{background:rgba(255,255,255,.20)}
.pfv__nav:active,
.pfv__inchide:active,
.pfv__redare:active{transform:scale(.94)}
.pfv__nav:focus-visible,
.pfv__inchide:focus-visible,
.pfv__redare:focus-visible{outline:2px solid #fff;outline-offset:3px}
.pfv__nav svg,
.pfv__inchide svg,
.pfv__redare svg{width:22px;height:22px}

.pfv__nav{top:50%;transform:translateY(-50%)}
.pfv__nav:active{transform:translateY(-50%) scale(.94)}
.pfv__nav--inapoi{left:var(--sp-16)}
.pfv__nav--inainte{right:var(--sp-16)}
.pfv__nav[disabled]{opacity:.28;cursor:default}
.pfv__nav[disabled]:hover{background:rgba(255,255,255,.10)}

.pfv__inchide{top:var(--sp-16);right:var(--sp-16)}
/* Butonul de redare sta in picior, nu plutind peste cadru: acolo se vede
   mereu, nu acopera nimic si nu trebuie ascuns cand filmul merge. */
.pfv__redare{
  position:static;
  flex:0 0 auto;
  width:40px;height:40px;
  order:-1;
}
.pfv__redare svg{width:16px;height:16px}

/* Blocarea derularii e comuna tuturor ferestrelor; sta in base.css. */

@media (prefers-reduced-motion:reduce){
  .pfv,.pf-card,.pf-card__media img,.pf-card__val,.pf-card__preview{transition:none}
  .pfv__nav,.pfv__inchide,.pfv__redare{transition:none}
}

/* =========================================================
   PRAGURI DE ECRAN
   ========================================================= */

/* --------- tableta: sase coloane --------- */
@media (min-width:768px){
  .pf-grid{
    grid-template-columns:repeat(6,1fr);
    grid-auto-rows:minmax(224px,auto);
    gap:var(--sp-16);
    /* `dense` umple golurile cu cardurile mai mici de mai jos. Fara el,
       filmul lasa trei coloane goale la dreapta: cardul mare cere sase si nu
       incape langa el, deci sare pe randul urmator si gaura ramane. */
    grid-auto-flow:dense;
  }
  .pf-card--lead{grid-column:span 6;grid-row:span 2}
  /* Filmul ia jumatate pe doua randuri; cardurile late se aseaza langa el. */
  .pf-card--film{grid-column:span 3;grid-row:span 2}
  .pf-card--wide{grid-column:span 3}
  .pf-card--half{grid-column:span 3}
  .pf-cta{grid-column:span 3}

  .pfv__sus{padding:var(--sp-20) var(--sp-24) var(--sp-16)}
  .pfv__jos{padding:var(--sp-16) var(--sp-24)}
  .pfv__panza{padding:0 var(--sp-24)}
}

/* --------- desktop: doisprezece coloane, grila editoriala --------- */
@media (min-width:1024px){
  .pf-grid{
    grid-template-columns:repeat(12,1fr);
    grid-auto-rows:minmax(236px,auto);
    grid-auto-flow:dense;
  }
  /* 3 + 9 = 12 */
  .pf-card--film{grid-column:span 3;grid-row:span 2}
  .pf-card--lead{grid-column:span 9;grid-row:span 2}
  /* 6 + 6 = 12 */
  .pf-card--wide{grid-column:span 6}
  /* 4 + 4 + 4 = 12 */
  .pf-card--half{grid-column:span 4}
  /* Randul ei e liber: il ia intreg, iar textul nu se intinde dupa el. */
  .pf-cta{grid-column:span 12}
  .pf-cta p{max-width:64ch}

  .pf-card--lead .pf-card__titlu{font-size:var(--fs-h3)}
  .pf-card--lead .pf-card__banda{padding:var(--sp-24)}

  .pfv__nav--inapoi{left:var(--sp-24)}
  .pfv__nav--inainte{right:var(--sp-24)}
  .pfv__inchide{top:var(--sp-24);right:var(--sp-24)}
  .pfv__panza{padding:0 96px}
}

@media (min-width:1440px){
  .pf-grid{grid-auto-rows:minmax(262px,auto)}
}

/* --------- telefon culcat: putina inaltime, tot ecranul pe material --------- */
@media (max-height:520px) and (orientation:landscape){
  .pfv__sus{padding:8px var(--sp-16) 6px;gap:6px}
  .pfv__antet{display:none}           /* titlul revine la rotire; aici conteaza cadrul */
  .pfv__jos{padding:6px var(--sp-16)}
  .pfv__nav,.pfv__inchide,.pfv__redare{width:44px;height:44px}
}

/* --------- atingere: tinte destul de mari peste tot --------- */
@media (hover:none){
  .pfv__nav,.pfv__inchide{width:48px;height:48px}
  /* Fara cursor, cardul nu are hover: previzualizarea o porneste
     IntersectionObserver, din pf-grid.js. */
}

/* Butonul de sunet, langa cel de redare in vizualizator.
   Filmul porneste mut fiindca altfel nu porneste deloc — niciun browser nu lasa
   un film cu sunet sa inceapa fara un gest al omului. Butonul asta E gestul.
   Pe previzualizarile din grila nu exista: alea pornesc singure si raman mute. */
.pfv__sunet{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  padding:0;
  border:0;
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.12);
  color:var(--on-dark, #fff);
  cursor:pointer;
  transition:background var(--t-ui) var(--e-out),transform var(--t-ui) var(--e-out);
}
.pfv__sunet .icon{width:22px;height:22px}
.pfv__sunet:hover{background:rgba(255,255,255,.20)}
.pfv__sunet:active{transform:scale(.94)}
.pfv__sunet:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Cand e mut, butonul e mai stins: starea se vede si fara sa citesti pictograma. */
.pfv__sunet.is-mut{color:rgba(255,255,255,.62)}

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