/* ===========================================================================
   Pagina Despre noi
   ---------------------------------------------------------------------------
   Numai ce exista DOAR aici. Splitul, grila de cartonase, pastilele de
   statistica si marturiile stau in components.css - sunt piese comune.

   Sectiunile A (antet + cine suntem), B (cum lucram) si G (ce zic clientii)
   nu au nevoie de nicio regula proprie: se construiesc integral din piese
   existente. F (proiectele recente) aproape la fel - cartonasul insusi sta
   in components.css, si aici a ramas doar `.proiecte__jos`, mai jos.
   =========================================================================== */

/* ============ ETICHETE ============
   Doua randuri: platformele si serviciile. Resetul de lista sta pe
   `.chips__rand`, NU pe `.chips`: `.chips` urmeaza direct antetul, iar
   `.section-head + *` din base.css ii da cei 60px de sus. Un `margin: 0`
   acolo ar arata ca un reset obisnuit si ar lipi etichetele de titlu - exact
   cum au stat etapele pe prima pagina, cu 11px in loc de 60. Un test din
   tests.py:113 apara regula. */

.chips { display: grid; gap: var(--s-20); }

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

/* Pastila insasi, `.chip`, a plecat in components.css pe 11 august 2026, cand
   pagina de studiu de caz a cerut aceeasi piesa. Aici raman doar `.chips` si
   `.chips__rand`, care descriu asezarea de pe About us. */

/* ============ BIROUL ============
   Trei fotografii una langa alta, taiate la 3/2. Doar birou-3.webp
   (1200x800, adica exact 1.5) are deja raportul asta din capul locului.
   birou-1.webp (1200x746, 1.609) si birou-2.webp (1200x742, 1.617) pierd
   fiecare vreo 7% din latime la taiere - nu "aproape nimic". PNG-urile
   dinainte de export nu sunt in depozit, deci raportul lor de dinainte nu se
   mai poate verifica aici - masurate sunt doar fisierele .webp livrate.

   `.birou` urmeaza direct antetul, deci NU-si scrie marginea de sus la zero:
   `.section-head + *` din base.css ii da cei 60px (`--s-60`). Resetul de <figure> sta pe
   `.birou__poza`, care nu urmeaza un antet. Vezi tests.py:113. */

.birou {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--grid-gap);
}

.birou__poza {
  margin: 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border: 1px solid var(--line-05);
  border-radius: var(--r-image);
}

.birou__poza img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ============ PARTENERI ============
   Noua marci intr-o grila nemiscata. Pe banda din prima pagina diferentele de
   marime optica nu se vad, fiindca marcile trec in miscare; aici stau pe loc
   una langa alta, deci fiecare logo primeste ACEEASI caseta si se aseaza in
   mijlocul ei.

   `margin-block-end: 0`, nu `margin: 0`: `.parteneri` urmeaza direct antetul,
   iar `.section-head + *` din base.css ii da cei 60px de sus (`--s-60`). Vezi
   tests.py:113. */

.parteneri {
  list-style: none;
  margin-block-end: 0;
  padding: 0;
  display: grid;
  /* Prag 340px, nu 200px: masurat la 1280px (latimea tinta), unde containerul
     are ~1162px. La 340px, patru coloane ar cere 1360px plus goluri si nu
     incap, deci `auto-fit` se opreste la trei - exact potrivit pentru noua
     marci, o grila 3x3 fara rand orfan (la cinci coloane ramanea un rand de
     patru). Trei coloane dau fiecarui cartonas 371px, deci caseta logoului
     ajunge la 331px - suficient de lata cat sa lege inaltimea, nu latimea,
     pentru toate marcile in afara de Red Light Therapy. Vezi comentariul de
     la `.parteneri__logo`. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: var(--grid-gap);
}

/* Pe tableta in picioare, DOUA coloane, cerute anume. Gasit pe 14 august 2026:
   la 768px containerul are ~690px, iar doua coloane de 340 plus golul cer 704 -
   adica lipsesc 14 pixeli, si `auto-fit` cade la o singura coloana. Ieseau noua
   randuri intinse pe toata latimea, fiecare cu un logo mic in mijloc.
   Pragul nu se coboara pentru toate ecranele: 340 e masurat pentru grila de
   3x3 de la 1280px si nu se atinge. */
@media (min-width: 601px) and (max-width: 900px) {
  .parteneri { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.parteneri__card {
  display: grid;
  place-items: center;
  min-height: 120px;
  padding: var(--s-20);
  border: 1px solid var(--line-05);
  border-radius: var(--r-glass);
  background: var(--glass-pill);
}

/* Caseta comuna egalizeaza SAPTE din cele noua marci la aceeasi inaltime
   optica, fiindca la trei coloane e destul de lata (331px) cat sa lege
   INALTIMEA, nu latimea: fiecare dintre ele se opreste la
   `max-height: 40px` inainte sa atinga marginile casetei. Masurat la
   1280px, nu ghicit.

   Doua marci nu ajung la 40px, din motive diferite:

   - redlight.png (522x60, 8.7:1 - raportul cel mai lat din set) e
     LAT-LEGAT: la 40px inaltime ar avea nevoie de 348px latime, mai mult
     decat cei 331px ai casetei, deci `max-width` o opreste mai devreme - la
     38px inaltime, cea mai mica diferenta ramasa fata de restul, nesizabila
     cu ochiul liber.

   - hyperice.svg nu se atinge de NICIO limita din regula de mai jos:
     fisierul e intrinsec 200x28, mai mic decat caseta in ambele directii
     (200 < 331, 28 < 40). `max-width` si `max-height` sunt amandoua limite
     de sus - opresc o imagine sa creasca peste ele, dar n-o maresc
     niciodata sub ele - deci logoul se randeaza pur si simplu la marimea
     lui naturala, 28px inalt. La cinci coloane (pragul vechi de 200px),
     caseta avea doar 173px si ERA ea cea care lega latimea logoului
     (200px > 173px), coborandu-l la 24px; la trei coloane caseta a devenit
     mai lata decat logoul, deci acum marimea lui naturala e cea care
     limiteaza, nu caseta - 28px, nu 40.

   Randarea ramane corecta asa cum e: Hyperice e o marca-cuvant lata, iar
   greutatea ei optica se potriveste oricum cu vecinii - grila se citeste
   echilibrat. Nu se schimba nimic in regula de mai jos, doar comentariul. */
.parteneri__logo {
  max-width: 100%;
  max-height: 40px;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 0.85;
}

.parteneri__card:hover .parteneri__logo { opacity: 1; }

.parteneri__lockup { display: inline-flex; align-items: center; gap: var(--s-10); }

/* Cei 1.25rem sunt masurati, nu ghiciti: la marimea asta inaltimea literelor
   mari se potriveste cu cea a cuvantului "Hyperice" din logo. Aceeasi valoare
   ca `.logos__word` de pe prima pagina. */
.parteneri__cuvant {
  font-size: 1.25rem;
  font-weight: var(--w-medium);
  color: var(--text-1);
  white-space: nowrap;
}

/* ============ PROIECTE ============
   Cartonasul insusi s-a mutat in components.css pe 11 august 2026, cand
   pagina Portofoliu a cerut aceeasi piesa. Aici ramane doar butonul de jos;
   caseta imaginii mosteneste 16/9 din components.css fara nicio surescriere. */

.proiecte__jos { margin-block: var(--s-30) 0; }

/* ============ MARTURII ============ */

/* Patru marturii, nu trei: grila comuna din components.css aseaza trei pe rand
   si lasa a patra singura, cu vreo 790px de gol langa ea. Exista exact patru
   recenzii reale si a cincea nu se inventeaza, deci 2x2 e singura asezare
   echilibrata. Pragul de 900px e cel de sub care doua coloane devin oricum
   prea inguste - aceeasi valoare ca in contact.css. */
@media (min-width: 900px) {
  .quotes { grid-template-columns: repeat(2, 1fr); }
}