/* ═══════════════════════════════════════════════════════════════════════
   SERVICE-MODAL.CSS — fereastra „Citește mai mult" nu mai e o capcană
   Lot A #3 din docs/PLAN_AUDIT_PUBLIC_MOBIL.md

   PROBLEMA (măsurată pe producție, 375x667): fereastra avea 873px pe un
   ecran de 667. Butonul „Selectează ✓" stătea la 226px SUB ecran; ca să
   ajungă la el, clienta derula fundalul — iar ✕-ul de închidere ieșea din
   ecran (-443px). Cu doar 16px de fundal de atins lateral și fără tastă
   Escape pe telefon, rămânea închisă în fereastră.

   SOLUȚIA: fereastra se limitează la ecran și devine coloană. Poza și bara
   de butoane rămân pe loc; DOAR descrierea derulează, pe dinăuntru. ✕-ul e
   poziționat față de fereastră (nu se mișcă), deci rămâne mereu la îndemână.

   ÎNCĂRCAT DUPĂ styles.css (care e ÎNGHEȚAT la 1528 linii — ADR-101).
   Aici NU se suprascrie nimic: sunt proprietăți NEdeclarate pe selectorii
   existenți, deci zero `!important` și zero conflict de specificitate.
   ═══════════════════════════════════════════════════════════════════════ */

.modal-content {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 40px);   /* 40px = padding-ul de sus+jos al fundalului */
}

/* Pe iOS `100vh` = ecranul CU bara Safari ascunsă, deci fereastra ar depăși
   zona vizibilă și bara de butoane ar sta sub bară. `dvh` măsoară cât se vede
   ACUM. Aceeași familie de problemă ca ADR-109 din admin; aici tokenul
   `--app-vh` nu există (styles.css nu încarcă base.css), deci folosim @supports. */
@supports (max-height: 100dvh) {
  .modal-content { max-height: calc(100dvh - 40px); }
}

.modal-image { flex-shrink: 0; }

.modal-body {
  flex: 1 1 auto;
  min-height: 0;            /* fără asta, overflow-ul de mai jos nu se activează */
  overflow-y: auto;
  overscroll-behavior: contain;   /* derularea descrierii nu mai trage pagina din spate */
  -webkit-overflow-scrolling: touch;
}

.modal-actions { flex-shrink: 0; }

/* Pe ecrane JOASE (telefon întors pe orizontală, ferestre mici) poza de 220px
   plus bara de butoane consumau tot spațiul: măsurat la 667x375, butonul
   „Selectează" era tăiat cu 7px, iar descrierea rămânea o fantă de 38px.
   Poza se retrage prima — e decor; butonul e decizia. */
@media (max-height: 620px) {
  .modal-image { height: 120px; }
}
@media (max-height: 460px) {
  .modal-image { height: 80px; }
}