/* Pagina de contact: rezumatul „ce facem / ce nu facem" și întrebările
 * frecvente. Întrebările sunt <details>, deci se deschid fără JavaScript. */

.pe-scurt { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem 1.4rem; margin-bottom: 2rem; }
.pe-scurt-titlu { font-size: 1rem; font-weight: 800; margin-bottom: 0.85rem; }
.pe-scurt-lista { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.pe-scurt-lista li { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.9rem; line-height: 1.55; color: var(--text); }
.ico-da { color: #16a34a; margin-top: 0.22rem; flex-shrink: 0; }
.ico-nu { color: #dc2626; margin-top: 0.22rem; flex-shrink: 0; }
.pe-scurt-nota { margin-top: 0.9rem; padding-top: 0.8rem; border-top: 1px solid var(--border); font-size: 0.85rem; color: var(--muted); font-style: italic; }

.faq-grup { margin-bottom: 2rem; }
.faq-grup-titlu { font-size: 1.05rem; font-weight: 800; margin-bottom: 0.85rem; display: flex; align-items: center; gap: 0.5rem; }
.faq-grup-titlu i { color: var(--accent); font-size: 0.95rem; }

/* `padding: 0` nu e de prisos: site.css are şi el o regulă `.faq-item`, cea
   pentru întrebările de pe paginile de servicii, cu `padding: 1rem 0`. Cele
   două componente împart din greşeală numele clasei, iar fără linia asta
   fiecare card creştea cu 32px de aer gol — 77px pentru un rând de text. */
.faq-item { border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); margin-bottom: 0.35rem; padding: 0; }
.faq-item[open] { border-color: var(--accent); }
.faq-q { cursor: pointer; padding: 0.62rem 0.9rem; font-size: 0.92rem; font-weight: 700; color: var(--text); list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.faq-q::-webkit-details-marker { display: none; }
.faq-q::after { content: '\f078'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 0.7rem; color: var(--muted); transition: transform 0.18s; flex-shrink: 0; }
.faq-item[open] .faq-q::after { transform: rotate(180deg); }
.faq-q:hover { color: var(--accent); }
.faq-a { padding: 0 0.9rem 0.8rem; font-size: 0.89rem; line-height: 1.65; color: var(--muted); }
.faq-a p { margin-bottom: 0.6rem; }
.faq-a p:last-child { margin-bottom: 0; }

/* ── Paginile întregi de întrebări ─────────────────────────────────────────
   Antetul e aliniat la stânga, ca firimiturile şi ca lista de sub el: un titlu
   centrat între un breadcrumb stânga şi o listă stânga arăta strâmb. */
.faq-antet { margin-bottom: 1.5rem; }
.faq-antet h1 { font-size: 1.6rem; font-weight: 800; margin-bottom: 0.45rem; line-height: 1.25; }
.faq-antet p { color: var(--muted); font-size: 0.93rem; line-height: 1.6; }
.faq-final { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.faq-final p { color: var(--muted); font-size: 0.9rem; line-height: 1.6; flex: 1; min-width: 240px; margin: 0; }

/* Legătura către varianta lungă, în interiorul grupului: pusă după el, cădea
   lipită de titlul următor. */
.faq-mai-multe { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.9rem; font-size: 0.88rem; font-weight: 700; }
.faq-mai-multe i { font-size: 0.72rem; }

/* Nota de deasupra câmpului de mesaj. */
.nota-contact { background: var(--accent-light); border: 1px solid var(--accent-mid); border-radius: var(--radius); padding: 0.9rem 1rem; margin-bottom: 1.25rem; }
.nota-contact p { font-size: 0.88rem; line-height: 1.55; margin-bottom: 0.5rem; }
.nota-contact p:last-child { margin-bottom: 0; }

/* ── Aşezarea pe desktop ────────────────────────────────────────────────────
   Pagina avea douăsprezece întrebări una sub alta, pe o coloană de 520px, iar
   formularul ajungea la trei ecrane de derulare. Pe ecran larg cele două
   grupuri stau alături; pe telefon rămân unul sub altul, ca până acum. */
.pagina-contact.pagina-contact { max-width: 520px; padding: 2.5rem 1rem 3rem; }

@media (min-width: 900px) {
  .pagina-contact.pagina-contact { max-width: 960px; }
  .faq-coloane { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2.5rem; align-items: start; }
  /* Formularul ia toată lăţimea, dar nu ca o coloană uriaşă de câmpuri: nota
     sus, pe tot rândul; numele şi emailul în stânga; mesajul în dreapta, întins
     pe înălţimea lor. Aşa niciun câmp nu ajunge lat de 900px, iar formularul
     scade de la patru rânduri la două. */
  .formular-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.75rem; }
  .formular-contact > .nota-contact,
  .formular-contact > .cf-subsol,
  .formular-contact > .mesaj-formular { grid-column: 1 / -1; }
  /* Mesajul creşte cât cele două câmpuri de alături, nu cât textul din el. */
  .cf-mesaj, .cf-mesaj > div { display: flex; flex-direction: column; }
  .cf-mesaj > div { flex: 1; }
  .cf-mesaj .camp-text { flex: 1; min-height: 0; }
}

/* Pe ecran lat, cât prima pagină. Restul aşezării rămâne cea de la 900px. */
@media (min-width: 1000px) {
  .pagina-contact.pagina-contact { max-width: 1120px; }
}