/* ===========================================================================
   Pagina Contact
   ---------------------------------------------------------------------------
   Asezarea e luata de la pagina de contact a hyperice.md, saitul construit de
   VEV: datele de contact intr-o coloana ingusta la stanga, formularul in
   dreapta. Alegerea lui Vitalie, 9 august 2026.

   Coloana stanga e prima si in marcaj, nu doar pe ecran: pe telefon omul vrea
   sa vada unde esti inainte sa scrie.
   =========================================================================== */

/* Contact e ultima sectiune inainte de subsol, dar marcajul foloseste
   `.section` simplu (base.css:55), care are doar padding-top. Pe prima
   pagina, ultima sectiune e `.section--closing` (base.css:62), care adauga
   si padding-bottom: var(--s-60) - fara el, spatiul pana la subsol pe
   Contact iese jumatate din cel de pe prima pagina (60px fata de 120px,
   masurat la 1280px). Regula sta aici, nu in base.css: acolo s-ar aplica
   la `.section` de pe orice pagina, iar contact.css se incarca doar pe
   aceasta. */
.section { padding-bottom: var(--s-60); }

.contact-grila {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-30);
  margin-top: var(--s-60);
}

.contact-carduri { display: grid; gap: var(--s-20); align-content: start; }

.contact-card__eticheta {
  margin: 0 0 6px;
  font-size: var(--size-small);
  letter-spacing: var(--ls-ui);
  text-transform: uppercase;
  color: var(--text-2);
}
.contact-card__valoare {
  margin: 0;
  font-size: 20px;
  font-style: normal;          /* <address> e inclinat implicit */
  color: var(--text-1);
}
.contact-card__valoare a { color: inherit; text-decoration: none; }
.contact-card__valoare a:hover,
.contact-card__valoare a:focus-visible { text-decoration: underline; }
.contact-card__nota {
  margin: 8px 0 0;
  font-size: var(--size-small);
  color: var(--text-2);
}

/* Datele de inregistrare. Stilurile vechi stateau in style.css, pe care
   base_v2.html nu-l incarca deloc - deci se scriu din nou aici, pe tema
   inchisa. Eticheta si valoarea pe acelasi rand cat incape; pe telefon,
   una sub alta, altfel valorile lungi (IBAN) ies din card. */
.date-firma { margin: 0; display: grid; gap: 10px; }
.date-firma > div { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.date-firma dt { flex: 0 0 130px; color: var(--text-2); font-size: var(--size-small); }
/* `flex: 1 1 0%` + `min-width: 0`, nu doar `word-break: break-word` (care
   ramanea inainte pe langa un `flex-basis: auto` implicit). Fara ele, decizia
   de rupere a randului foloseste latimea NATURALA a textului (o singura linie
   intinsa), nu latimea ramasa dupa eticheta - deci Registered office si IBAN
   (cele mai lungi doua valori) cadeau intregi pe randul urmator, sub eticheta,
   in loc sa stea langa ea cu textul rupt pe mai multe linii, ca restul. Masurat
   la 1280px, cu ambele reguli: toate cele 8 randuri stau cu eticheta si
   valoarea alaturi (Registered office si IBAN isi rup DOAR textul, pe 4 si
   respectiv 2 linii - nu mai sar pe randul urmator). */
.date-firma dd { flex: 1 1 0%; min-width: 0; margin: 0; color: var(--text-1); font-size: var(--size-small); word-break: break-word; }

.contact-formular__titlu { margin: 0 0 8px; color: var(--text-1); }
.contact-formular__intro { margin: 0 0 var(--s-20); color: var(--text-2); }

/* Doua coloane abia de la 900px: sub atat, formularul devine prea ingust ca sa
   incapa doua campuri pe rand, si arata ca o lista de casute. */
@media (min-width: 900px) {
  .contact-grila {
    grid-template-columns: 380px minmax(0, 1fr);
    gap: var(--s-40);
    align-items: start;
  }
}