/*
 * Bursa pe Scurt — STRAT MOBIL (v4.15.0)
 *
 * Se încarcă DUPĂ style.css. Este ADITIV: nu rescrie designul, doar
 * corectează comportamentul pe ecrane mici. Dacă ștergi acest fișier,
 * tema revine exact la starea 4.14.3.
 *
 * Praguri:
 *   - max-width: 899px  → „mobil + tabletă în picioare" (aliniat cu bara de
 *                          navigație a temei, care comută la 900px)
 *   - max-width: 640px  → „telefon"
 */

/* ==========================================================================
   0. SIGURANȚĂ — nimic nu are voie să lățească pagina
   ==========================================================================
   Un singur element care depășește viewport-ul face TOATĂ pagina să
   alunece lateral. `clip` (nu `hidden`) pentru că `hidden` ar rupe
   position:sticky de pe header.
   ========================================================================== */
body { overflow-x: clip; }

/* ==========================================================================
   1. FORMULARE — Safari iOS nu mai are voie să dea zoom la focus
   ==========================================================================
   Regula iOS: dacă font-size-ul calculat al unui câmp e sub 16px, Safari
   dă zoom la atingere ȘI NU se mai dezumflă. Utilizatorul rămâne cu pagina
   mărită și derulează lateral. Era cazul pentru: .scr-select (13.6px),
   .filtre-editii select/input[month] (14.4px), .grafic-cauta (12.8px).
   ========================================================================== */
@media (max-width: 899px) {
  input,
  select,
  textarea,
  .scr-select,
  .scr-cauta,
  .scr-filtru input,
  .filtre-editii select,
  .filtre-editii input,
  .grafic-unelte input.grafic-cauta,
  .companii-cauta-input {
    font-size: 16px !important;   /* !important: bate regulile punctuale din style.css */
  }

  /* Câmpurile numerice din screener rămâneau înghesuite la 16px. */
  .scr-filtru input { width: 100%; min-width: 5.5rem; }
  .scr-filtru { flex: 1 1 8rem; }

  /* Căsuța de căutare din bara graficului nu mai încape la 16px pe 390px. */
  .grafic-unelte input.grafic-cauta { width: 9.5rem; max-width: 9.5rem; }
}

/* ==========================================================================
   2. ȚINTE DE ATINGERE — minim 44px (recomandarea Apple / WCAG 2.5.5)
   ==========================================================================
   Butoanele-pilulă ale temei au între 26px și 34px înălțime. Cu degetul,
   asta înseamnă rateuri repetate — cea mai frecventă cauză de abandon pe
   paginile de unelte.
   ========================================================================== */
@media (pointer: coarse) {
  .grafic-btn,
  .grafic-btn.gd-icon,
  .monitor-tab,
  .tab-piata,
  .scr-preset,
  .scr-select,
  .scr-toggle,
  .filtre-editii select,
  .filtre-editii input,
  .filtre-reset,
  .paginare a,
  .paginare span {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* v4.15.3 — .site-nav a și .bvb-bara-jos a NU intră în lista de mai sus.
     `display: inline-flex` le strângea la lățimea textului: în meniul
     mobil rândurile deveneau butoane înguste cu linii despărțitoare
     ciuntite, iar în bara de jos celula activă nu mai umplea coloana.
     Înălțimea lor e deja garantată de regulile proprii. */
  .site-nav a { min-height: 44px; }

  /* Padding orizontal pe măsură, ca pilulele să nu arate turtite. */
  .grafic-btn { padding: .5rem .95rem; }
  .grafic-btn.gd-icon { padding: .5rem .7rem; }
  .monitor-tab, .scr-preset, .tab-piata { padding: .55rem 1rem; }

  /* Checkbox/radio: 20px minim, altfel nu se pot bifa cu degetul. */
  input[type="checkbox"],
  input[type="radio"] { width: 20px; height: 20px; }

  /* Rândurile de tabel clicabile primesc spațiu vertical. */
  .scr-tabel td, .portof-tabel td, .monitor-tabel td { padding-top: .7rem; padding-bottom: .7rem; }
}

/* ==========================================================================
   3. HEADER — mai puțin cromaj, mai mult conținut
   ==========================================================================
   46px logo + padding = ~64px de bară lipicioasă permanentă. Pe un ecran
   de 667px asta e 10% din ecran ocupat la fiecare scroll.
   ========================================================================== */
@media (max-width: 640px) {
  .header-inner { padding: .5rem var(--bvb-gutter); gap: .6rem; }
  .custom-logo { width: 36px; height: 36px; }
  .site-title { font-size: 1.05rem; }
  .site-content { padding: 1.25rem 0 2rem; }
}

/* ==========================================================================
   4. MENIUL — foaie derulabilă, nu listă care taie ecranul
   ==========================================================================
   Meniul avea `position:absolute` fără înălțime maximă: cu 10+ intrări,
   ultimele cădeau sub marginea ecranului și nu se putea derula la ele.
   `dvh` (dynamic viewport height) ține cont de bara de adrese care apare
   și dispare pe mobil.
   ========================================================================== */
@media (max-width: 899px) {
  .site-nav {
    max-height: calc(100dvh - 3.75rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 1.5rem;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .55);
  }

  .site-nav ul { gap: .1rem; }

  .site-nav a {
    padding: .8rem .75rem;
    font-size: 1.02rem;
    border-bottom: 1px solid color-mix(in srgb, var(--bvb-bordura) 55%, transparent);
    border-radius: 0;
  }
  .site-nav li:last-child a { border-bottom: 0; }

  /* Elementul activ se vede din prima, nu doar prin culoarea textului. */
  .site-nav .current-menu-item > a {
    background: color-mix(in srgb, var(--bvb-turcoaz) 10%, transparent);
    border-left: 3px solid var(--bvb-turcoaz);
    padding-left: .55rem;
  }

  /* Pilula PRO rămâne pilulă, dar cu țintă cumsecade. */
  .site-nav .menu-item-pro > a {
    margin: .5rem 0;
    text-align: center;
    border-bottom: 0;
  }

  /* Butonul de meniu: țintă completă + stare deschisă vizibilă. */
  .nav-toggle { min-height: 44px; padding: .5rem .9rem; }
  .nav-toggle[aria-expanded="true"] {
    border-color: var(--bvb-turcoaz);
    color: var(--bvb-turcoaz);
  }
  .nav-toggle[aria-expanded="true"] .bara,
  .nav-toggle[aria-expanded="true"] .bara::before,
  .nav-toggle[aria-expanded="true"] .bara::after { background: var(--bvb-turcoaz); }
}

/* ==========================================================================
   5. BARA DE JOS — cele 5 destinații reale, mereu la o atingere
   ==========================================================================
   Ca să ajungi la Screener trebuia: atinge „Meniu" → derulează → atinge.
   Trei gesturi pentru pagina care ține oamenii pe site. Bara de jos e în
   zona în care ajunge degetul mare fără să repoziționezi telefonul.
   Se randează din inc/mobil.php, doar sub 900px.
   ========================================================================== */
.bvb-bara-jos {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 120;
  display: none;                        /* activată doar pe mobil, mai jos */
  background: color-mix(in srgb, var(--bvb-fundal) 94%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--bvb-bordura);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.bvb-bara-jos ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}

.bvb-bara-jos a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .18rem;
  min-height: 54px;
  padding: .4rem .2rem .45rem;
  color: var(--bvb-text-secundar);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.15;
  text-decoration: none;
  text-align: center;
  border-top: 2px solid transparent;
  -webkit-tap-highlight-color: transparent;
}

.bvb-bara-jos a:hover,
.bvb-bara-jos a:focus { color: var(--bvb-text); text-decoration: none; }

.bvb-bara-jos svg {
  width: 21px; height: 21px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}

.bvb-bara-jos .este-activ {
  color: var(--bvb-turcoaz);
  border-top-color: var(--bvb-turcoaz);
  background: color-mix(in srgb, var(--bvb-turcoaz) 7%, transparent);
}

/* Intrarea PRO iese în evidență fără să strice grila. */
.bvb-bara-jos .bara-jos-pro a { color: var(--bvb-turcoaz); }
.bvb-bara-jos .bara-jos-pro .este-activ { color: #04211d; background: var(--bvb-turcoaz); }

@media (max-width: 899px) {
  .bvb-bara-jos { display: block; }

  /* Conținutul nu are voie să rămână ascuns sub bară. */
  body.are-bara-jos .site-footer,
  body.are-bara-jos .site-content { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }

  /* Bara de cookies stă deasupra barei de navigație, nu peste ea. */
  body.are-bara-jos #bvb-bara-cookies { bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
}

/* Sub 360px (iPhone SE, Android ieftine) eticheta „Portofolii" rupe grila. */
@media (max-width: 359px) {
  .bvb-bara-jos a { font-size: .6rem; }
  .bvb-bara-jos svg { width: 19px; height: 19px; }
}

/* ==========================================================================
   6. TABELE — derulare lateral, cu semn că se poate derula
   ==========================================================================
   .portof-tabel avea deja `overflow-x:auto`, dar fără niciun indiciu
   vizual: utilizatorul vede o coloană tăiată și crede că e o eroare.
   .monitor-tabel nu avea nimic — se comprima până devenea ilizibil.
   JS-ul (mobil.js) învelește automat orice tabel neîmbrăcat.
   ========================================================================== */
.bvb-tabel-scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;

  /* --- Umbre de derulare, 100% CSS ---------------------------------------
   * Tehnica: două „capace" opace (attachment `local`, deci se mișcă odată
   * cu conținutul) așezate peste două umbre radiale fixate de marginile
   * elementului (attachment `scroll`). Când ești la început, capacul din
   * stânga acoperă umbra din stânga; derulezi, capacul pleacă, umbra apare.
   * Se stinge singură la capăt, fără JS și fără listener de scroll.
   * Ordinea contează: capacele se declară primele (se desenează deasupra).
   * ---------------------------------------------------------------------- */
  --bvb-umbra-fundal: var(--bvb-fundal);
  background:
    linear-gradient(to right, var(--bvb-umbra-fundal) 30%, transparent) left center / 28px 100% no-repeat local,
    linear-gradient(to left,  var(--bvb-umbra-fundal) 30%, transparent) right center / 28px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%,   rgba(0, 0, 0, .45), transparent) left center / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .45), transparent) right center / 14px 100% no-repeat scroll;
}

@media (max-width: 899px) {
  /* Prima coloană (simbolul / eticheta) rămâne fixă la derulare — altfel
     nu mai știi al cui e rândul pe care te uiți. */
  .bvb-tabel-scroll .portof-tabel th:first-child,
  .bvb-tabel-scroll .portof-tabel td:first-child,
  .bvb-tabel-scroll .monitor-tabel th:first-child,
  .bvb-tabel-scroll .monitor-tabel td:first-child,
  .bvb-tabel-scroll .reg-tabel th:first-child,
  .bvb-tabel-scroll .reg-tabel td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--bvb-fundal);
    box-shadow: 1px 0 0 var(--bvb-bordura);
  }

  .portof-tabel, .monitor-tabel, .reg-tabel, .calc-tabel { font-size: .88rem; }
  .portof-tabel th, .portof-tabel td,
  .monitor-tabel th, .monitor-tabel td { white-space: nowrap; }

  /* Tabelul de criterii al Monitorului e text lung, nu cifre: acolo
     nowrap ar face rânduri de un metru. */
  .monitor-tabel--criterii td,
  .monitor-tabel--criterii th { white-space: normal; min-width: 8rem; }
}

/* ==========================================================================
   7. BARA GRAFICULUI — un rând derulabil, nu patru rânduri stivuite
   ==========================================================================
   Pe 390px, `flex-wrap: wrap` transforma bara de unelte în 4-5 rânduri
   (~140px) plus bara de desen. Graficul ajungea sub linia de plutire pe
   propria lui pagină. Acum: un singur rând care se derulează orizontal.
   ========================================================================== */
@media (max-width: 899px) {
  .grafic-unelte,
  .grafic-desen-bara {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: .35rem;
    scroll-snap-type: x proximity;

    /* Aceleași umbre de capăt ca la tabele — aici fundalul e cardul. */
    background:
      linear-gradient(to right, var(--bvb-card) 30%, transparent) left center / 24px 100% no-repeat local,
      linear-gradient(to left,  var(--bvb-card) 30%, transparent) right center / 24px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%,    rgba(0, 0, 0, .4), transparent) left center / 12px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .4), transparent) right center / 12px 100% no-repeat scroll;
  }
  .grafic-unelte::-webkit-scrollbar,
  .grafic-desen-bara::-webkit-scrollbar { display: none; }

  .grafic-unelte > *,
  .grafic-desen-bara > * { flex: 0 0 auto; scroll-snap-align: start; }

  /* `margin-left:auto` nu funcționează într-un rând derulabil. */
  .grafic-unelte input.grafic-cauta,
  .grafic-simbol-curent { margin-left: .35rem; }

  .grafic-card { padding: .85rem .85rem .6rem; }
  #grafic-companie { min-height: 260px; }
  .grafic-antet { flex-wrap: wrap; gap: .3rem .75rem; }
}

/* ==========================================================================
   8. DENSITATE — mai puțin aer irosit pe ecran mic
   ========================================================================== */
@media (max-width: 640px) {
  /* Hero-ul ocupa ~55% din primul ecran; nimic din conținut nu se vedea. */
  .hero { padding: 2.25rem 0 2rem; }
  .hero-titlu { font-size: 2rem; }
  .hero-tagline { font-size: 1rem; margin-bottom: 1.25rem; }
  .hero-actiuni .btn { flex: 1 1 100%; }   /* butoane pe toată lățimea = ținte mari */
  .hero-badges { gap: .35rem .4rem; }
  .hero-badges li { font-size: .75rem; padding: .28rem .65rem; }

  .sectiune { padding: 2rem 0; }
  .sectiune-header { flex-direction: column; align-items: flex-start; gap: .35rem; margin-bottom: 1rem; }

  /* Lista de companii: 2 coloane în loc de 1 — de două ori mai puțin scroll. */
  .grila-companii { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: .6rem; }
  .companie-celula { padding: .7rem .8rem; }

  /* Cardurile PRO/preț: cifra nu mai trebuie să depășească ecranul. */
  .pro-pret-cifra { font-size: 2.1rem; }

  /* Butoanele de acțiune din pagini de unealtă: pe toată lățimea. */
  .portof-actiuni .btn,
  .cont-actiuni .btn { flex: 1 1 100%; }
}

/* ==========================================================================
   9. TIPOGRAFIE DE CITIT — articolele sunt produsul, nu decorul
   ========================================================================== */
@media (max-width: 640px) {
  .continut-articol { font-size: 1.02rem; line-height: 1.75; }
  .continut-articol h2 { font-size: 1.3rem; margin-top: 1.8rem; }
  .continut-articol h3 { font-size: 1.1rem; }

  /* Tabelele din corpul articolului (analizele lui Bogdan) se derulează. */
  .continut-articol table { display: block; overflow-x: auto; white-space: nowrap; }

  /* Blocurile de cod/citate nu mai împing pagina lateral. */
  .continut-articol pre { overflow-x: auto; }
  .continut-articol img { border-radius: 8px; }
}

/* ==========================================================================
   10. STĂRI DE ATINGERE — feedback fără hover
   ==========================================================================
   Pe touch nu există hover: fără o stare :active, fiecare atingere pare
   că „n-a mers" în cele ~300ms până se încarcă pagina.
   ========================================================================== */
@media (hover: none) {
  .card:active,
  .companie-celula:active,
  .portof-rand:active { border-color: var(--bvb-turcoaz); }

  .btn:active,
  .grafic-btn:active,
  .monitor-tab:active { transform: scale(.97); }

  a, button { -webkit-tap-highlight-color: rgba(45, 212, 191, .12); }
}

/* ==========================================================================
   ==========================================================================
   v4.15.1 — CORECȚII DUPĂ TESTUL PE TELEFON
   ==========================================================================
   Patru probleme raportate, toate rezolvate din CSS (zero modificări de
   template, deci zero risc de regresie pe desktop):
     11. Antetul „Contul meu" — două coloane strivite pe 390px
     12. Cardurile de analiză — miniatura de grafic ilizibilă și dominantă
     13. Imaginile din articole — prea înalte pe mobil
     14. „Piața azi" — pastilele se rupeau neuniform
   ========================================================================== */

/* ==========================================================================
   11. ANTETUL PANOULUI „CONTUL MEU"
   ==========================================================================
   .cont-antet e `display:flex; justify-content:space-between` fără niciun
   prag mobil: pe 390px, titlul + salutul primeau ~140px lățime (de aici
   „Contul / meu" pe două rânduri și salutul pe cinci), iar cele patru
   butoane cu emoji stăteau înghesuite în cealaltă coloană. Le separăm pe
   verticală și transformăm butoanele într-o grilă de 2 dale.
   ========================================================================== */
@media (max-width: 899px) {
  .cont-antet {
    flex-direction: column;
    align-items: stretch;
    gap: 1.1rem;
  }
  .cont-antet > div { width: 100%; min-width: 0; }

  /* Titlul are din nou toată lățimea — nu se mai rupe în două rânduri. */
  .cont-antet h1 { font-size: 1.7rem; margin-bottom: .35rem; }
  .badge-pro-cont { margin-left: .4rem; }

  .cont-antet .descriere-arhiva { margin: 0 0 .5rem; }
  .cont-acces-rapid { margin: 0 0 .25rem; }

  /* Uneltele PRO: grilă de 2, nu un zid de butoane turcoaz. */
  .cont-actiuni {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .5rem;
    width: 100%;
  }
  .cont-actiuni .btn {
    width: 100%;
    min-height: 62px;
    padding: .7rem .55rem;
    font-size: .86rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
  }

  /* Toate patru erau pline turcoaz — de aici senzația de aglomerat.
     Devin dale calme, cu accent doar pe contur și text.
     Vrei înapoi butoanele pline? Șterge blocul ăsta. */
  .cont-actiuni .btn-primar {
    background: color-mix(in srgb, var(--bvb-turcoaz) 11%, var(--bvb-card));
    color: var(--bvb-turcoaz);
    border: 1px solid var(--bvb-turcoaz-inchis);
  }
  .cont-actiuni .btn-secundar { background: var(--bvb-card); }

  /* Deconectarea nu e o unealtă: pe toată lățimea, jos, discretă. */
  .cont-actiuni .cont-logout {
    grid-column: 1 / -1;
    min-height: 44px;
    padding: .55rem;
    font-size: .85rem;
    font-weight: 500;
    color: var(--bvb-text-secundar);
    border: 1px solid var(--bvb-bordura);
    background: transparent;
  }

  /* Banda de prelungire a abonamentului stătea lipită de text. */
  .cont-abonament { margin-top: .6rem; line-height: 1.6; }
  .cont-prelungeste { margin-top: .8rem; }
}

/* ==========================================================================
   12. CARDURILE DE ANALIZĂ — orizontale pe mobil
   ==========================================================================
   Miniatura e un grafic Elliott/Fibonacci: la 360px lățime, etichetele de
   preț sunt ilizibile, dar ocupă ~200px pe verticală. Rezultatul: derulezi
   mult și nu citești niciun titlu. Pe mobil cardul devine orizontal —
   miniatura rămâne marcaj vizual („e o analiză tehnică"), iar titlul și
   rezumatul primesc spațiul. Graficul lizibil e în articol, cu lightbox.
   ========================================================================== */
@media (max-width: 640px) {
  .grila-carduri { gap: .7rem; }

  .card {
    flex-direction: row;
    align-items: stretch;
  }

  /* v4.15.2 — CORECȚIE. Versiunea 4.15.1 punea `height: 100%` pe imagine
     într-un container a cărui înălțime venea din `stretch`, adică
     nedefinită: browserul cădea pe înălțimea intrinsecă a fișierului. La
     pozele portret (unde `bvb-card` 640×360 nu fusese generat și WordPress
     servea originalul) ieșeau carduri de 500px cu o fâșie verticală
     mărită și neclară. Acum imaginea e absolută în interiorul cadrului:
     înălțimea se rezolvă din cutia deja întinsă, indiferent de fișier. */
  .card-imagine {
    flex: 0 0 108px;
    align-self: stretch;
    position: relative;
    display: block;
    min-height: 108px;
    max-height: 168px;              /* plafon: cardul nu depinde de poză */
    overflow: hidden;
    border-right: 1px solid var(--bvb-bordura);
    background: var(--bvb-fundal);
  }
  .card-imagine img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: center;
  }

  /* Cardul nu are voie să crească după poză, doar după text. */
  .card { max-height: 168px; }
  .card-corp { overflow: hidden; }

  .card-corp {
    padding: .8rem .9rem .85rem;
    gap: .4rem;
    min-width: 0;              /* fără asta, textul lung sparge grila */
  }

  .card-meta { font-size: .72rem; gap: .35rem; }
  .card-meta time { order: -1; }
  .card-titlu { font-size: .98rem; line-height: 1.3; }

  /* Rezumatul la două rânduri: destul cât să decizi dacă intri. */
  .card-extras {
    font-size: .84rem;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* ==========================================================================
   13. IMAGINILE DIN ARTICOLE
   ==========================================================================
   Imaginea reprezentativă avea plafon 340px — jumătate dintr-un ecran de
   667px, înainte să înceapă textul. Graficele din corp erau nelimitate.
   Le plafonăm și punem un indiciu că se pot mări (lightbox-ul din main.js
   există deja, dar pe mobil nimeni nu ghicește că poate atinge imaginea).
   ========================================================================== */
@media (max-width: 640px) {
  .articol-imagine { margin-bottom: 1.25rem; }
  .articol-imagine img { max-height: 190px; }

  .continut-articol img {
    max-height: 46vh;
    width: auto;
    max-width: 100%;
    margin-inline: auto;
    object-fit: contain;
  }

  .bvb-zoom-hint {
    display: block;
    margin: .35rem 0 1.25rem;
    font-size: .76rem;
    color: var(--bvb-text-secundar);
    text-align: center;
  }
  .bvb-zoom-hint::before { content: "⤢ "; color: var(--bvb-turcoaz); }
}
/* Pe desktop indiciul e inutil — acolo se vede oricum tot graficul. */
@media (min-width: 641px) { .bvb-zoom-hint { display: none; } }

/* ==========================================================================
   14. „PIAȚA AZI" — trei pastile aliniate, nu trei rânduri rupte
   ==========================================================================
   .cont-puls era `flex-wrap: wrap`: pe 390px ieșeau „26 în creștere" și
   „36 în scădere" pe primul rând, apoi „35 neschimbate" lângă „din 97
   simboluri" — care părea orfană, lipită de pastila neutră. Grilă de 3
   coloane egale + totalul ca subtitlu centrat, pe rândul lui.
   ========================================================================== */
@media (max-width: 640px) {
  .cont-piata { padding: .85rem .9rem; gap: .8rem; }

  .cont-puls {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .4rem;
    width: 100%;
  }

  .puls-pilula {
    justify-content: center;
    text-align: center;
    padding: .5rem .3rem;
    min-height: 50px;
    font-size: .73rem;
    line-height: 1.25;
    border-radius: 10px;      /* pilula rotundă arată strâmb la text pe 2 rânduri */
  }

  .puls-total {
    grid-column: 1 / -1;
    margin: .1rem 0 0;
    text-align: center;
    font-size: .78rem;
  }

  /* Cele două extreme ale zilei: rânduri pline, eticheta la stânga,
     simbolul și procentul la dreapta. Se citesc dintr-o privire. */
  .cont-cipuri { width: 100%; flex-direction: column; gap: .4rem; }
  .cont-cip {
    width: 100%;
    justify-content: space-between;
    min-height: 44px;
    border-radius: 10px;
    font-size: .85rem;
  }
  .cont-cip .cip-eticheta { flex: 1 1 auto; text-align: left; }

  /* Panoul-spoiler cu simbolurile: se derulează, nu crește la nesfârșit. */
  .cont-puls-lista { max-height: 40vh; overflow-y: auto; overscroll-behavior: contain; }
  .puls-simbol { min-height: 34px; }
}

/* ==========================================================================
   ==========================================================================
   v4.15.2 — DENSITATE PE MOBIL
   ==========================================================================
   Pe telefon, homepage-ul cere ~9 ecrane de derulare până la subsol.
   Vinovate sunt trei blocuri care respiră ca pe desktop: „De ce Bursa pe
   Scurt", subsolul și secțiunea de abonare. Aici doar le strângem —
   restructurarea de conținut e discuție separată.
   ========================================================================== */

/* --- „De ce Bursa pe Scurt": pictograma intră pe rând cu titlul --------- */
@media (max-width: 640px) {
  .grila-valori { gap: .6rem; }

  .punct-valoare {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "icon titlu"
      ".    text";
    align-items: center;
    column-gap: .7rem;
    row-gap: .2rem;
    padding: .9rem 1rem;
  }
  .punct-valoare .punct-icon { grid-area: icon; margin: 0; }
  .punct-valoare h3 { grid-area: titlu; margin: 0; font-size: 1rem; }
  .punct-valoare p  { grid-area: text; margin: 0; font-size: .88rem; line-height: 1.5; }
}

/* --- Subsolul: rândurile de linkuri erau de ~74px fiecare -------------- */
@media (max-width: 640px) {
  .site-footer { padding-top: 2rem; }
  .footer-grid { gap: 1.5rem; }

  .footer-nav li,
  .footer-unelte li { padding: 0; }
  .footer-nav a,
  .footer-unelte a {
    display: block;
    padding: .5rem 0;
    line-height: 1.3;
    min-height: 44px;                /* rămâne țintă bună de atins */
    display: flex;
    align-items: center;
  }

  /* Listele legale/unelte pe două coloane: jumătate de derulare. */
  .footer-nav ul,
  .footer-unelte ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 1rem;
  }
  .footer-titlu { margin-bottom: .2rem; }
  .footer-brand .site-title { margin-bottom: .3rem; }
  .footer-legal { font-size: .8rem; line-height: 1.5; }
}

/* --- Blocul de abonare: mai puțin aer, aceeași greutate ---------------- */
@media (max-width: 640px) {
  .grila-abonare { gap: .7rem; }
  .card-abonare { padding: 1.1rem 1.15rem; }
  .card-abonare h2,
  .card-abonare h3 { font-size: 1.1rem; margin-bottom: .4rem; }
  .card-abonare p { font-size: .9rem; margin-bottom: .9rem; }
  .card-abonare .btn { width: 100%; }

  /* v4.16.0 — blocul unic de abonare */
  .sectiune-abonare { padding: 2.25rem 0; }
  .abonare-cap { margin-bottom: 1.1rem; }
  .abonare-cap p { font-size: .92rem; }
  .abonare-motive { margin-bottom: 1.25rem; gap: .5rem; }
  .abonare-motive li { font-size: .85rem; }

  .sectiune-abonare + .sectiune { padding-top: 1.5rem; }
  .disclaimer-box, .nota-legala { font-size: .88rem; line-height: 1.6; }
}

/* ==========================================================================
   ==========================================================================
   v4.15.3 — MENIUL MOBIL: RÂNDURI ÎNTREGI, NU CIOTURI
   ==========================================================================
   Două elemente din meniu au `display: inline-*` moștenit din style.css și
   scăpau din regula de rând întreg:
     .meniu-cont a       (Autentificare / Contul meu) — inline-flex
     .menu-item-pro > a  (pilula PRO)                 — inline-block
   Pe desktop e corect: pilula trebuie să fie pilulă. În foaia mobilă însă
   ieșeau un rând cu linie ciuntită și o pastilă mică lipită de marginea
   stângă. Aici le readucem la lățime plină.
   ========================================================================== */
@media (max-width: 899px) {

  /* Rândul „Autentificare" / „Contul meu": la fel ca celelalte. */
  .site-nav .meniu-cont a {
    display: flex;
    width: 100%;
    justify-content: flex-start;
  }
  .site-nav .meniu-cont .meniu-cont-icon { flex: 0 0 auto; }

  /* Pilula PRO devine buton pe toată lățimea — e CTA-ul, merită să arate
     ca un buton, nu ca o etichetă rătăcită. */
  .site-nav .menu-item-pro > a {
    display: flex;
    width: 100%;
    justify-content: center;
    padding: .8rem 1rem;
    margin: .65rem 0 .25rem;
    border-radius: var(--bvb-radius);
    font-size: 1rem;
    letter-spacing: .06em;
  }
  .site-nav .menu-item-pro { border-top: 1px solid var(--bvb-bordura); }
  .site-nav .menu-item-pro > a::after {
    content: " →";
    font-weight: 700;
  }
}

/* ==========================================================================
   BARA DE SUS PE DESKTOP — respiră la 9 intrări
   ==========================================================================
   Nu putem șterge intrări din CSS (meniul se administrează din Aspect →
   Meniuri), dar putem opri înghesuiala între 900px și 1200px, unde cele
   nouă intrări se lipeau una de alta.
   ========================================================================== */
@media (min-width: 900px) and (max-width: 1199px) {
  .site-nav ul { gap: 0; }
  .site-nav a { padding: .5rem .55rem; font-size: .95rem; }
  .site-nav .menu-item-pro > a { padding: .35rem .8rem; }
}

/* ==========================================================================
   ==========================================================================
   v4.15.4 — ORDINEA ÎN BARA DE SUS: CONȚINUT | CONT · PRO
   ==========================================================================
   „Contul meu" și „Monitorul" nu sunt intrări de meniu administrabile: se
   injectează cu filtrul `wp_nav_menu_items` (inc/cont.php la prioritate 10,
   inc/monitor.php și inc/onboarding.php după). De aceea contul aterizează
   între Barometru și Monitorul — adică taie grupul de conținut în două, cu
   un element de sesiune.

   Nu mutăm priorități în PHP (ar strica ordinea și în alte contexte).
   Le rearanjăm vizual cu `order`, pentru că `.site-nav ul` e flex și pe
   mobil, și pe desktop. Rezultatul e gruparea așteptată de oricine:
   conținut la stânga, sesiune și CTA lipite la dreapta.
   ========================================================================== */

/* Ordinea logică, valabilă la orice lățime. Intrările normale rămân la 0. */
.site-nav .menu-item-monitor { order: 1; }
.site-nav .meniu-cont        { order: 8; }
.site-nav .menu-item-pro     { order: 9; }

@media (min-width: 900px) {
  /* Golul care separă navigația de zona de cont. Dacă lipsește contul
     (modul dezactivat), spațiul îl preia PRO. */
  .site-nav .meniu-cont { margin-left: auto; }
  .site-nav ul:not(:has(.meniu-cont)) .menu-item-pro { margin-left: auto; }

  /* Linie subțire de despărțire — se vede că începe altă zonă. */
  .site-nav .meniu-cont > a {
    border-left: 1px solid var(--bvb-bordura);
    margin-left: .35rem;
    padding-left: .9rem;
  }

  /* „Contul meu" era turcoaz plin, exact ca pilula PRO de lângă el: două
     accente identice, lipite. Îl coborâm la text secundar cu pictogramă
     turcoaz, ca singurul accent tare din bară să rămână PRO — el e cel
     care trebuie observat. */
  .site-nav .meniu-cont > a { color: var(--bvb-text-secundar); font-weight: 500; }
  .site-nav .meniu-cont > a:hover,
  .site-nav .meniu-cont > a:focus { color: var(--bvb-text); }
  .site-nav .meniu-cont .meniu-cont-icon { color: var(--bvb-turcoaz); }
  .site-nav .meniu-cont.current-menu-item > a { color: var(--bvb-turcoaz); }

  .site-nav .menu-item-pro { margin-left: .55rem; }
}

/* Pe mobil, gruparea se traduce în „ultimele două rânduri": contul, apoi
   butonul PRO, despărțite de restul printr-o linie. */
@media (max-width: 899px) {
  .site-nav .meniu-cont { border-top: 1px solid var(--bvb-bordura); margin-top: .35rem; }
  .site-nav .meniu-cont > a { border-bottom: 0; }
}

/* ==========================================================================
   ==========================================================================
   v4.16.1 — LISTA DE EDIȚII PE MOBIL: CHIP DE DATĂ, NU TREI RÂNDURI
   ==========================================================================
   Problema nu era spațierea, ci redundanța: fiecare rând scria data de
   două ori — o dată ca „14 aug." și încă o dată în titlul „Ediția din 14
   august 2026". Cinci rânduri identice, ~92px fiecare, din care jumătate
   text repetat. Nimic nu te ajută să alegi una.

   Soluția: data devine ancoră vizuală într-o coloană proprie, iar dreapta
   ține ce diferă efectiv — tipul și companiile. Titlul rămâne în DOM și în
   arborele de accesibilitate (nu display:none), iar linkul lui se întinde
   peste tot rândul, deci ținta de atingere e întregul dreptunghi.

   Se aplică DOAR la `.type-editie`. În „Feed-ul meu" din Contul meu,
   același template primește și postări normale (analize), unde titlul e
   singurul conținut util — acolo rămâne vizibil.
   ========================================================================== */

/* Zona de click pe tot rândul — valabilă la orice lățime. */
.rand-editie { position: relative; }
.rand-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
}
/* Badge-urile de companie sunt linkuri proprii: stau deasupra suprapunerii. */
.rand-companii,
.rand-badges { position: relative; z-index: 1; }

@media (max-width: 640px) {

  .rand-editie.type-editie {
    grid-template-columns: 3.6rem minmax(0, 1fr);
    grid-template-areas:
      "data badges"
      "data companii";
    align-items: center;
    gap: .4rem .8rem;
    padding: .7rem .85rem;
    min-height: 64px;
  }

  /* Chip de calendar. `white-space: normal` ca „14 aug." să curgă pe două
     rânduri în coloana îngustă; dacă încape pe unul, rămâne pe unul. */
  .rand-editie.type-editie .rand-data {
    grid-area: data;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 46px;
    padding: .3rem .25rem;
    background: var(--bvb-fundal);
    border: 1px solid var(--bvb-bordura);
    border-radius: 8px;
    font-size: .82rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--bvb-text);
    text-align: center;
    white-space: normal;
  }

  .rand-editie.type-editie .rand-badges { grid-area: badges; justify-self: start; }

  /* Titlul: ascuns vizual, păstrat pentru cititoarele de ecran.
     ATENȚIE — fără `position: absolute` și fără `clip-path`: ambele ar face
     ca `.rand-link::after` să se raporteze la titlu (sau să fie decupat),
     iar zona de click de pe tot rândul s-ar prăbuși la 1px. */
  .rand-editie.type-editie .rand-titlu {
    grid-area: badges;
    width: 1px;
    height: 1px;
    margin: 0;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
  }

  .rand-editie.type-editie .rand-companii {
    grid-area: companii;
    gap: .3rem;
    flex-wrap: wrap;
  }
  .rand-editie.type-editie .rand-companii .badge {
    font-size: .72rem;
    padding: .2rem .5rem;
  }

  /* Feedback la atingere pe tot rândul. */
  .rand-editie.type-editie:active { background: var(--bvb-card-hover); }

  /* Rândurile care NU sunt ediții (analize în „Feed-ul meu"): titlul
     rămâne, doar strângem spațiile. */
  .rand-editie:not(.type-editie) { padding: .75rem .9rem; gap: .3rem .7rem; }
  .rand-editie:not(.type-editie) .rand-titlu { font-size: .94rem; }
}

/* ==========================================================================
   v4.16.2 — MOBIL: ce se schimbă odată cu hero-ul animat și disclaimerul
   ==========================================================================
   Pe telefon oprim deriva grilei: hero-ul e mic, mișcarea aproape nu se
   vede, dar animația rulează continuu și consumă baterie degeaba. Lumina
   care respiră rămâne — costă aproape nimic și dă senzația de „viu".
   ========================================================================== */
@media (max-width: 640px) {
  .hero::before { animation: none; inset: 0; }
  .hero::after  { animation-duration: 14s; }

  /* Blocul de abonare era ultimul înainte de subsol; fără secțiunea de
     disclaimer între ele, marginea de jos trebuie refăcută aici. */
  .sectiune-abonare { padding-bottom: 2.5rem; }
}

/* ==========================================================================
   v4.17.0 — BANDA DE PIAȚĂ PE MOBIL
   ==========================================================================
   Aceeași bandă, ceva mai strânsă. Rămâne animată și pe telefon: aici
   mișcarea nu e decor, e conținutul propriu-zis, iar `transform` pe un
   singur element costă neglijabil.
   ========================================================================== */
@media (max-width: 640px) {
  .banda-eticheta { padding: 0 .7rem; font-size: .6rem; letter-spacing: .08em; }
  .banda-link { padding: .5rem .8rem; font-size: .78rem; gap: .35rem; }
  .banda-pret { display: none; }        /* pe 390px contează simbolul și variația */
  .banda-pista { animation-duration: 36s; }
  .banda-fereastra {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent);
            mask-image: linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent);
  }
}

/* ─────────────────────────────────────────────────────────────────
   v4.19 — pe pagina /pro, butonul PRO din bara de jos devine CTA
   plin (nu doar text turcoaz), ca îndemnul la abonare să fie mereu
   la degetul mare. Se aplică DOAR pe template-ul paginii PRO — pe
   restul paginilor butonul rămâne normal.
   ───────────────────────────────────────────────────────────────── */
.page-template-page-pro .bvb-bara-jos .bara-jos-pro {
  color: var(--bvb-verde-inchis, #04342c);
  background: var(--bvb-turcoaz);
  border-top-color: var(--bvb-turcoaz);
  font-weight: 700;
}
.page-template-page-pro .bvb-bara-jos .bara-jos-pro:hover,
.page-template-page-pro .bvb-bara-jos .bara-jos-pro:focus {
  color: var(--bvb-verde-inchis, #04342c);
  background: color-mix(in srgb, var(--bvb-turcoaz) 88%, white);
}