/* ===========================================================================
   Pagina Portofoliu
   ---------------------------------------------------------------------------
   Numai ce exista DOAR aici. Cartonasul insusi - rama, numele, etichetele,
   apropierea la mouse - sta in components.css, fiindca il foloseste si
   pagina About us.

   Nu se confunda cu portofoliu.css, care e cu totul altceva: acela tine
   aparatele desenate (MacBook, iPhone, monitor) ale cartonaselor de pe prima
   pagina, si se incarca global.
   =========================================================================== */

/* Doua coloane, nu grila elastica din components.css: pe pagina asta capturile
   sunt informatia, iar la 569px se citesc. `.proiecte-toate` urmeaza direct
   antetul, deci NU-si scrie marginea de sus la zero - `.section-head + *` din
   base.css ii da cei 60px. Vezi tests.py:113. */
/* Nu mai e grila, ci sir pe verticala. Grila avea nevoie de `grid-column` ca
   sa intinda cartonasul lat si titlurile peste ambele coloane; intr-un sir se
   intind singure, iar coloanele au coborat un nivel, in `.rand`. Schimbat pe
   12 august 2026, cand randurile au inceput sa se lipeasca: un element de
   grila nu se poate lipi decat in celula lui. */
.proiecte-toate {
  display: flex;
  flex-direction: column;
  gap: var(--s-40);
}

/* Randul de doua cartonase. Pe telefon e un singur sir; de la 900px in sus se
   lipeste, si atunci perechea urmatoare urca peste el - efectul de pe prima
   pagina, cerut de Vitalie pe 12 august 2026, doar ca acolo se lipeste un
   cartonas si aici o pereche.

   De ce randul si nu cartonasul: un element de grila se poate lipi numai in
   celula lui, deci un cartonas lipit n-ar trece niciodata peste randul de sub
   el. Perechea trebuie sa fie un element de sine statator ca sa aiba pe unde
   calatori. */
.rand { display: grid; grid-template-columns: 1fr; gap: var(--s-40); }

/* Teancul unei categorii. Lipirea se opreste la marginea acestui element, deci
   fiecare familie isi are teancul ei: cand se termina platformele, randurile
   lor pleaca de sub degete si incepe teancul urmator. Fara invelisul asta,
   toate cele cinci randuri s-ar aduna intr-o singura gramada pana la subsol. */
.familie { display: flex; flex-direction: column; gap: var(--s-40); }

/* --- DE LA 768px IN SUS: cartonasul lat urca in capul listei ----------------
   Cerut de Vitalie pe 15 august 2026: „hyperice sa-l dai jos in categoria lui -
   am avut in vedere DOAR versiunea mobila; web si tableta sa ramina cum era".
   Pana pe 14 august Hyperice statea in capul paginii, inaintea oricarui titlu
   de grup; in ziua aceea a coborat in Stores. Pe TELEFON coborarea ramane; pe
   tableta si pe calculator asezarea se intoarce cum era.

   PRAGUL E 768px, cifra ceruta: telefonul tine pana la 767, tableta incepe la
   768 - iPad-ul portret are exact 768 si trebuie sa cada pe partea tabletei.
   Nu e un hotar nou in proiect: `portofoliu.css` taie tot acolo („Sub 768px:
   doar telefonul", `max-width: 767px`) si `studiu.css` porneste tot de la
   `min-width: 768px`. Cei 720px din tokens.css sunt alta granita, a spatiilor,
   si ar lasa tableta mica de 760 pe partea telefonului.

   DE CE `order` SI NU AL DOILEA CARTONAS IN SABLON: cartonasul e scris o
   singura data, in categoria lui. Doua copii, cate una stinsa de fiecare
   parte, ar incarca doua poze si i-ar da cititorului de ecran acelasi proiect
   de doua ori. `order` muta cutia, nu locul din document - deci ordinea de
   citit ramane cea adevarata (Hyperice e un magazin), iar ochiul primeste pe
   ecranul mare asezarea de dinainte.

   MERGE NUMAI INTRE FRATI DE FLEX, si de-aia cartonasul e fiu DIRECT al lui
   `.proiecte-toate`, nu invelit in `.familie` ca celelalte saisprezece. Cine
   il muta inapoi inauntru stinge regula asta in tacere, fara nicio eroare.

   `-1`, nu `1`: fratii lui n-au `order` scris, deci stau toti pe 0, iar ce e
   negativ trece inaintea lor. Cu `1` ar fi ajuns la coada listei. */
@media (min-width: 768px) {
  .proiecte-toate > .proiect--lat { order: -1; }
}

/* SUB 768px, RITMUL RAMANE AL TELEFONULUI. Celelalte saisprezece cartonase isi
   iau `padding-block: var(--s-20)` din blocul de teanc de mai jos - le trebuie
   ca banda opaca sub care trece cartonasul urmator. Cel lat nu se lipeste (are
   pentru asta un motiv scris in sablon), deci nu intra in acel selector si ar
   ramane cu 40px mai scund decat era pana pe 15 august, iar tot ce vine sub el
   ar urca cu 40px.

   Masurat la 375x812: cu randul asta pagina are 10011px, exact cat avea cand
   cartonasul statea inauntrul familiei; fara el, 9971. Deci telefonul ramane
   pixel cu pixel cum era - singura schimbare de acolo e ca acest cartonas nu
   se mai lipeste. */
@media (max-width: 767px) {
  .proiecte-toate > .proiect--lat { padding-block: var(--s-20); }
}

@media (min-width: 900px) {
  .rand {
    grid-template-columns: repeat(2, 1fr);
    position: sticky;
    top: var(--lipire, 110px);
    /* Fundal opac, altfel se vede prin el: cartonasul de portofoliu e doar
       poza, nume si etichete, fara panou in spate, deci randul care urca peste
       ar lasa textul de dedesubt sa razbata printre. Aceeasi regula ca pe
       prima pagina, unde cartonasul isi poarta fundalul lui. */
    background: var(--bg);
    padding-block: var(--s-20);
    /* Umbra deasupra, nu dedesubt: randul care urca trebuie sa para ca trece
       PESTE cel lipit, nu ca sta in aceeasi foaie cu el. Fara ea, pe negru pe
       negru, perechea de dedesubt pur si simplu dispare si miscarea se citeste
       ca o taietura, nu ca o suprapunere. */
    box-shadow: 0 -18px 30px -12px rgba(0, 0, 0, .9);
  }

  /* Randul cu un singur cartonas, intins pe toata latimea. Apare cand o
     familie are numar IMPAR de proiecte: fara el, ultimul ar sta intr-o
     coloana din doua, cu jumatate de rand gol langa. Aceeasi solutie ca
     `.proiect--lat` in capul paginii, doar ca aplicata inauntrul unei
     familii. Cere si o poza mai mare - vezi comentariul din sablon.

     DIN 15 AUGUST 2026 SABLONUL NU O MAI FOLOSESTE: singura familie impara e
     Stores, iar cartonasul ei fara pereche - Hyperice - e `proiect--lat` in
     capul listei. Regula si turtirea de dedesubt raman scrise fiindca urmatoarea
     familie impara le va cere din nou, cu tot cu masuratoarea de mai jos. */
  .rand--singur { grid-template-columns: 1fr; }

  /* POZA RANDULUI INTINS SE TURTESTE, si nu e o alegere de gust.
     Regula de deasupra a fost cod MORT de pe 12 august pana pe 14: exista, dar
     niciun sablon n-o folosea. Prima ei folosire adevarata - Hyperice mutat in
     Stores - a adus imediat defectul pe care regula nu-l stia.

     Masurat la 1280x800, cu poza la 16/9 cum sunt toate celelalte: cartonasul
     lat iese 802px inaltime, lipit la 110, deci piciorul lui cade la 912 -
     SUB fereastra de 800. Eticheta „Case study" e ultimul rand din cartonas,
     deci exact ea nu s-ar vedea niciodata. E cuvant cu cuvant defectul stins
     pe prima pagina in aceeasi zi (portofoliu.css), pe alt element.

     La 21/9 poza scade de la ~654 la ~498, randul iese pe la 646, si piciorul
     cade la 756 - sub 800, cu aer. `object-fit: cover` cu `object-position:
     top` din components.css taie de jos, unde intr-o captura de sait nu e
     continut, ci subsol. */
  .rand--singur .proiect__poza { aspect-ratio: 21 / 9; }
}

/* --- SUB 900px: efectul de teanc, dar CATE UNA ------------------------------
   Cerut de Vitalie pe 14 august 2026: „fiecare cartela sa aiba efectul ca la
   versiunea web, doar ca cate una". Pe calculator se lipeste PERECHEA; aici,
   unde e oricum o singura coloana, se lipeste CARTONASUL.

   `display: contents` sterge cutia randului, deci cartonasele devin frati
   adevarati in `.familie` si au pe unde calatori unul peste altul. Fara asta nu
   se poate, si motivul e scris mai sus la `.rand`: un element de grila se
   lipeste NUMAI in celula lui - un cartonas lipit intr-un rand ramas grila ar
   urca patruzeci de pixeli si s-ar opri, fara nicio eroare.

   `--lipire` se mosteneste prin `display: contents` (elementul ramane in lantul
   de mostenire, doar cutia lui nu se mai deseneaza), deci treptele scrise in
   sablon merg mai departe. Al doilea cartonas al perechii isi ia jumatate de
   treapta, ca sa iasa un teanc regulat si nu doua foi lipite la fel.

   ATENTIE la selector: dupa `display: contents`, `.familie > .proiect` NU se
   potriveste - selectorii lucreaza pe arborele DOM, nu pe cel de cutii. Cine
   „curata" selectorul in `.familie > .proiect` stinge efectul in tacere. */
/* HOTARUL A COBORAT DE LA 899 LA 767 pe 15 august 2026, si asta e chiar
   cererea lui Vitalie: „am avut in vedere doar versiunea mobila, web si tableta
   sa ramina cum era."

   Pana atunci, teancul care se lipeste cate una - adus odata cu coborarea lui
   Hyperice - prindea si tabletele. Masurat de un revizor pe pagina vie, la
   768px: documentul iesea cu 640 de pixeli mai lung decat inainte (12577 fata
   de 11937) si SAISPREZECE cartonase din saptesprezece se lipeau la derulare.
   Adica exact purtarea de telefon, pe iPad - si acolo stau ele: 768, 820, 834.

   767 e acelasi hotar cu care se desparte telefonul de tableta in restul
   depozitului (`portofoliu.css`, `studiu.css`), nu unul nou. */
@media (max-width: 767px) {
  .rand { display: contents; }

  .rand > .proiect {
    position: sticky;
    top: var(--lipire, 110px);
    /* Opac si cu umbra deasupra, din acelasi motiv ca perechea de pe
       calculator: cartonasul e doar poza si text, fara panou in spate. */
    background: var(--bg);
    padding-block: var(--s-20);
    box-shadow: 0 -18px 30px -12px rgba(0, 0, 0, .9);
  }

  .rand > .proiect:nth-child(2) { top: calc(var(--lipire, 110px) + 10px); }
}

/* Spatiul dintre randurile grilei e acelasi peste tot, deci titlul ar sta la
   fel de departe de grupul de deasupra ca de al lui - si atunci nu se vede pe
   care il introduce. Cei 20px in plus deasupra rup egalitatea: 60 sus, 40 jos.
   Masurat in pagina, nu ghicit. */
.grup { margin-block-start: var(--s-20); }

/* Randul de sub titlu spune ce au in comun proiectele din grup. Mai stins
   decat titlul si ingustat la 52 de semne: doua randuri pe latimea intreaga
   a grilei ar fi de citit ca un paragraf, nu ca o eticheta. */
.grup__nota {
  margin-block-start: 6px;
  color: var(--text-2);
  max-width: 52ch;
}

/* Eticheta apare NUMAI pe cartonasele care chiar duc undeva - douasprezece din
   optsprezece de pe 12 august 2026: patru zic "Case study" si duc la paginile
   noastre, opt zic "Visit site" si duc la saiturile clientilor. Pe un
   cartonas static ar fi o promisiune goala - acelasi motiv pentru care
   lucrare.html arata butonul doar cand exista `adresa`. */
.proiect__actiune {
  margin-block-start: 4px;
  font-size: var(--size-small);
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-ui);
  /* `--blue-text`, nu `--blue`: aici albastrul e TEXT MIC pe negru, iar
     `#0061FE` da 4,14 - sub pragul de 4,5. Se repeta de paisprezece ori pe
     pagina asta. Vezi tokens.css. */
  color: var(--blue-text);
}

a.proiect:hover .proiect__actiune,
a.proiect:focus-visible .proiect__actiune { color: var(--text-1); }