/*!
 * itm-mobil.css — integritatea conţinutului pe telefon, comună tuturor paginilor.
 *
 * Măsurat pe 18 octombrie 2026, la 375 px, în browser real (fiecare element,
 * nu captură): 13 pagini-tip ieşeau din ecran sau aveau elemente suprapuse.
 * Regulile de aici repară exact acele clase — nu rescriu designul. Se încarcă
 * DUPĂ stilurile paginii, ca să câştige fără `!important` acolo unde se poate.
 *
 * NU atinge `<nav>`, meniul de telefon (`itm-nav.css`, `itm-nav-mobil.js`)
 * şi secţiunile de studii de caz — sunt zona conversaţiei portofoliu-seo
 * (vezi `_itm-core/orchestrare/ZONE.md`).
 */

/* ── Plasa de siguranţă: niciun cuvânt lung nu mai împinge pagina ───────── */
img, video, iframe, canvas { max-width: 100%; }
h1, h2, h3, h4, p, li, dd, dt, blockquote, figcaption, td, th, summary, label {
  overflow-wrap: break-word;
}
pre, code { white-space: pre-wrap; overflow-wrap: anywhere; }

@media (max-width: 900px) {
  /* Acasă — hero-ul are `height:100vh` şi conţinutul centrat vertical. Pe
     telefon conţinutul e mai înalt decât ecranul, iar centrarea îl împingea
     în sus, sub meniul fix (titlul „Marketing care produce rezultate" ieşea
     tăiat de meniu). Pornim conţinutul de sub meniu. */
  #hero { height: auto; min-height: 100svh; justify-content: flex-start;
          padding-top: 120px; padding-bottom: 64px; }

  /* Acasă — banda de cifre: 5 coloane → 2 (vezi şi itarget-home-v10.html). */
  #stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #stats .stat-cell:last-child { grid-column: 1 / -1; }
  #stats .stat-cell { padding: 24px 16px; }

  /* Proces — privirea de ansamblu: 3 coloane de 120 px nu încap. */
  .overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 16px; }
  .overview-grid .ov-cell::after { display: none; }

  /* Subsolurile cu 4 coloane / rânduri de legături fără înfăşurare. */
  .footer-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 24px; }
  .footer-inner > :first-child { grid-column: 1 / -1; }
  .footer-links-row, .foot-links, .footer-bottom, .footer-bot { flex-wrap: wrap; row-gap: 12px; }
  footer { padding-left: 24px; padding-right: 24px; }

  /* Tabelul de comparaţie din Pachete: se derulează în el, nu pagina. */
  .compare-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
                   max-width: 100%; }
  .compare-table th, .compare-table td { padding: 12px 10px; white-space: normal; min-width: 96px; }
  .compare-table th:first-child, .compare-table td:first-child { min-width: 140px; }
}

@media (max-width: 768px) {
  /* Articolele de blog (toate 368): grila trece pe o coloană, dar copiii
     rămâneau fixaţi pe `grid-column: 2` — browserul crea o a doua coloană,
     în afara ecranului. Tot articolul ieşea 150 px în dreapta. */
  .art-layout > *, .art-layout .wide { grid-column: 1 / -1; min-width: 0; }
}

@media (max-width: 600px) {
  #stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-inner { grid-template-columns: minmax(0, 1fr); }

  /* Resurse — „Citeşte →" era poziţionat absolut peste etichetele cardului. */
  .res-card { padding-bottom: 64px; }

  /* Studii de piaţă — al doilea buton era `inline` (scris greşit
     `inline-inline-block`): padding-ul lui vertical urca peste primul. */
  .btn-p, .btn-s { display: inline-block; }
  .btn-s { margin: 12px 0 0 0; }

  /* Funnel construcţii — termenii din vocabular au textul lung. */
  .vocab-term { white-space: normal; max-width: 100%; }

  /* Articole — rândul de distribuire nu se înfăşura. */
  .share-bar { flex-wrap: wrap; row-gap: 8px; }

  /* Acasă — subsolul cu 3 coloane de legături. */
  .footer-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }

  /* Acasă — grila de industrii: 3 coloane încap în română, dar nu în
     engleză sau greacă („Construction & Real Estate"). */
  .ind-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ind-grid > * { min-width: 0; }

  /* Funnel-urile scurte: coloana din grilă nu se strângea sub conţinut
     (`min-width:auto` implicit) şi împingea pagina 37 px în dreapta. */
  .funnel-body > * { min-width: 0; }

  /* Resurse — calculatoarele, două coloane → una. */
  .calc-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .calc-section { padding-left: 16px; padding-right: 16px; }

  /* Firul de navigare (Acasă / Industrii / …) — se înfăşoară. */
  .breadcrumb { flex-wrap: wrap; row-gap: 4px; }
}

/* Funnel construcţii: un `</span>` scris `</div>` în sursă scoate ultimii
   trei termeni din containerul flex; rămân `inline` cu padding şi se calcă
   pe rânduri. Reparat aici, nu în HTML: corectura marcajului renumerota 52
   de chei de traducere pe pagină, în 11 limbi. */
.vocab-box > .vocab-term { display: inline-block; margin: 8px 8px 0 0; }

/* Telefoane mici (320–380 px: iPhone SE, Android compacte). Grilele cu
   coloane minime de 300–320 px sau cu 2 coloane fixe nu mai încap. */
@media (max-width: 380px) {
  #stats, .overview-grid, .stats-grid, .values-grid { grid-template-columns: minmax(0, 1fr); }
  .reviews-grid { grid-template-columns: minmax(0, 1fr); }
  .grid { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
  .ind-grid { grid-template-columns: minmax(0, 1fr); }
  #alt-contact { padding-left: 16px; padding-right: 16px; }
  .alt-card, .stat-c, .val-card, .stat-cell { padding-left: 16px; padding-right: 16px; }
  .stats-grid, .overview-grid { padding-left: 16px; padding-right: 16px; }
  /* Legăturile interne lungi din articole se rup pe cuvinte. */
  a.itm-leg, .art-body a, article a { overflow-wrap: anywhere; }
}