/* ===========================================================================
   Paginile de studiu de caz
   ---------------------------------------------------------------------------
   Numele nu e "hyperice", dinadins: Hyperice e prima dintr-o serie, si nimic
   din foaia asta nu e despre ea anume. Cand vine al doilea studiu de caz,
   incarca acelasi fisier.

   Cartonasele, pastilele de statistica, pasii numerotati si butoanele exista
   in components.css. Aici sta doar ce e propriu formei de studiu de caz.
   =========================================================================== */

/* Vizualul si cifrele urmeaza antetul, respectiv vizualul - deci NU-si scriu
   marginea de sus la zero: `.section-head + *` din base.css da 60px primului,
   iar al doilea si-o cere singur. Vezi tests.py:113. */
.studiu__cifre { margin-block-start: var(--s-60); }

/* Rama pentru o captura care nu intra in aparatul desenat.

   Hyperice are doua capturi curate si le pune in MacBook-ul din
   `components/lucrare.html`. M2M nu poate: singura imagine ramasa de la el
   (`IMG/m2m-6.webp`) are DEJA desenate in ea un laptop si trei telefoane, iar
   ecranul decupat din ea iese la 528px latime - sub 1x in rama, adica moale.
   Intreaga, la 1162px, e la 1,65x si se vede clar.

   Rama e ce face o poza luminoasa sa stea bine pe o pagina neagra. S-a
   dovedit pe About us: cartonasul AgroData are luminanta 246, mai luminos
   decat oricare captura din portofoliu, si arata bine tocmai fiindca sta
   intr-o rama rotunjita. Fara ea, albul curge in negru si pagina pare rupta. */
.studiu__captura {
  margin-block-start: var(--s-60);
  border-radius: var(--r-card);
  border: 1px solid var(--line-07);
  overflow: hidden;
  line-height: 0;
}

.studiu__captura img {
  width: 100%;
  height: auto;
  display: block;
}

/* Fraza care duce ideea paginii. Sta singura sub pasii numerotati, la masura
   de lectura a antetelor (630px), centrata ca ei - altfel s-ar pierde printre
   cele trei cartonase de deasupra. */
.studiu__miez {
  margin: var(--s-40) auto 0;
  max-width: var(--measure-header);
  text-align: center;
  font-size: var(--size-h4);
  line-height: var(--lh-h4);
  letter-spacing: var(--ls-h4);
  color: var(--text-1);
}

/* Tehnologiile, pe grupe. Patru grupe cu titlu, o fraza si un rand de
   pastile; de la 768px in sus stau doua pe rand, ca sa nu se citeasca drept
   coloana lunga pe un ecran lat. Pastila insasi (`.chip`) sta in
   components.css - aici e doar asezarea proprie studiilor de caz.

   Numele e `.stiva`, nu `.stack`: `.stack` e deja o clasa din base.css
   (flex-column, folosita in hero-ul primei pagini) si s-ar bate cu ea daca
   am folosi-o si aici cu alt sens.

   `.stiva` urmeaza direct antetul, deci NU-si scrie marginea de sus:
   `.section-head + *` din base.css ii da cei 60px. Un `margin-block-start`
   aici ar fi duplicare - a fost semnalata o data ca defect pe foaia asta.
   Vezi tests.py:113. */
.stiva { display: grid; gap: var(--s-40); }

.stiva__grupa > .body { margin-block: var(--s-10) var(--s-20); }

.stiva__lista {
  list-style: none;
  margin-block: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-10);
}

@media (min-width: 768px) {
  .stiva { grid-template-columns: repeat(2, 1fr); column-gap: var(--s-60); }
}

/* Blocul de efort: antetul si cifra pe acelasi rand. Ceruta de Vitalie pe
   12 august 2026. Titlul spune orele lucrate, pastila spune durata - sunt
   acelasi gand, deci stau alaturi, nu unul sub altul. Fara nicio suma in
   euro, tot hotarare a lui Vitalie, din aceeasi zi - vezi comentariul din
   m2m.html si hyperice.html, deasupra blocului "The Build".

   Sub 1024px se desfac inapoi, una sub alta: intr-o coloana de sub 500px
   titlul de 44px si-ar pierde masura de lectura si s-ar rupe in patru randuri.
   Mai jos de prag nu se scrie nimic, deci ramane asezarea obisnuita. */
@media (min-width: 1024px) {
  .studiu__efort {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    column-gap: var(--s-60);
  }

  /* Anularea de aici e VOITA, si e singurul loc din foaie unde se face.
     `.section-head + *` din base.css da 60px blocului care urmeaza unui antet,
     ceea ce e corect cat timp blocul sta DEDESUBT. Pe acelasi rand, aceiasi
     60px l-ar impinge in jos fata de antet si cele doua n-ar mai fi aliniate.
     E scrisa scurt si legata de `.studiu__efort` dinadins: o anulare globala
     ar fi exact defectul pe care il pazeste
     tests.py test_nimic_nu_anuleaza_spatiul_de_sub_antet. */
  .studiu__efort .section-head + * { margin-top: 0; }

  /* Pastila la marginea din dreapta, nu lipita de titlu. Cu o singura cifra,
     lasata la inceputul coloanei ei, ramaneau vreo 330px de gol in dreapta si
     blocul se citea nefinisat. Impinsa la capat, tine randul de la o margine
     la alta, ca toate celelalte randuri de pastile de pe pagina, si se
     opreste exact unde se opresc si ele. */
  .studiu__efort .stat-row {
    justify-self: end;
    /* O singura coloana, nu cele doua ale blocului de baza: cu doua, coloana
       goala nu ocupa nimic dar spatiul dintre ele tot se socoteste, si
       pastila se oprea cu 12px mai la stanga decat randurile de deasupra. */
    grid-template-columns: max-content;
  }
}

/* Butonul catre saitul clientului, la finalul paginii, sub blocul de efort.
   S-a numit `.studiu__jos` pana pe 12 august 2026, cand a fost mutat pentru
   scurt timp sub cartonas si numele a incetat sa mai fie adevarat. A revenit
   jos in aceeasi zi, dar numele nou a ramas: spune ce e butonul, nu unde sta,
   deci nu mai are cum sa minta data viitoare. */
.studiu__actiune { margin-block: var(--s-30) 0; }

/* Umbra cartonasului nu mai impinge pagina pe telefon.
   Gasit pe 14 august 2026 la matura finala: cele trei studii de caz cu cartonas
   in cap (Hyperice, AgroData, Norca) se trageau in lateral cu 8 pixeli, in
   toate trei limbile. Nu se taia niciun cuvant - vinovata era stralucirea
   desenata din jurul cartonasului, care are voie sa iasa din caseta lui si pe
   calculator chiar trebuie. Pe un ecran de telefon nu mai are unde.
   `clip`, nu `hidden`: `hidden` ar fi facut din invelis un loc de derulare si
   ar fi rupt lipirea elementelor dinauntru. */
@media (max-width: 720px) {
  .studiu__vizual { overflow-x: clip; }
}