@media(max-width:1000px){
  /* R1 bordul (MOTOR / STARE / ORA BORD) e decor de desktop; pe telefon statea fix peste actiunea din primul ecran */
  html.js .bord{display:none}

  /* R2 antetul: regula benzii (.nv.nv--banda) a plecat de aici in deploy/menu/nav2026.css pe 20 septembrie 2026.
     Motivul, masurat: fisierul asta se incarca doar pe cele 83 de pagini generate, iar antetul cu banda e pe toate
     cele 183, deci `/`, `/blog/`, `/contact` si `/cookies` picau verificarea E din gate_telefon.py la 360, 375, 390
     si 430 px. Scriptul care pune clasa are proprietar: unelte/antet.py. Nu se scrie inapoi aici. */
}

@media(max-width:480px){
  /* R5 magistrala mai subtire si marginile stranse: la 375 luau 88 px din latime (66 stanga, 22 dreapta) */
  :root{--mag-w:22px;--mag-x:8px}
  .pagina{padding-left:calc(var(--mag-x) + var(--mag-w) + 14px);padding-right:18px}

  /* R4 titlul: fara_orfan leaga ultimele doua cuvinte cu spatiu neseparabil („brand cinematic”, „identitate vizuala”);
     perechea masura pana la 273 px, pe o coloana de 210 px (64 px erau scosi din TOATE randurile titlului pentru insigna),
     si overflow-wrap o rupea in mijlocul cuvantului. Locul insignei se rezerva doar pe primul rand, cu un flotant de 16 px:
     insigna sta la top:0 al eroului si se termina la 14 px sub inceputul titlului. Marimea literei ramane a pilonului:
     o marime comuna aici a rupt titlurile pilonilor cu litera mai mica (automatizari, digital marketing). Prima varianta,
     insigna urcata pe randul etichetei, a rupt eticheta lunga pe doua randuri si a coborat pretul sub primul ecran. */
  .erou--n3 h1{padding-right:0}
  .erou--n3 h1::before{content:"";float:right;width:48px;height:16px}
  .insigna-masina{width:40px}
  .insigna-masina svg{width:40px}

  /* R3 cardurile de tabel: pretul trece sub titlu (titlul avea 72-132 px langa pret, pe patru randuri),
     eticheta sta deasupra valorii (pe coloana de 38% „Cat de greu e de produs” iesea pe trei randuri) */
  .tabel[data-mod="carduri"] tbody tr{grid-template-columns:minmax(0,1fr);gap:4px 0}
  .tabel[data-mod="carduri"] tbody th[scope="row"]{grid-column:1;grid-row:1;padding-right:30px}
  .tabel[data-mod="carduri"] tbody td.tabel__pret{grid-column:1;grid-row:2;text-align:left;padding:2px 0 4px}
  .tabel[data-mod="carduri"] tbody td.tabel__pret b i{display:inline;margin:0 0 0 6px}
  .tabel[data-mod="carduri"] tbody td:not(.tabel__pret):not(.tabel__sageata){grid-template-columns:minmax(0,1fr);gap:3px}
}