/* ═══════════════════════════════════════════════════════════════════════════
   99-hero-imagine.css · imaginea din hero, in locul gradientului      LOT 149

   CERUT: pe unele pagini, o imagine aleasa din Editorul pluginului in locul
   gradientului animat. Marcajul: `blocks/x-ahero.php` pune `.mds-ahero--img`
   pe sectiune si `<img class="mds-ahero__img">` in `.mds-ahero__bg--img`.

   ⚠ Imaginea umple exact cutia fundalului animat (`.mds-ahero__bg`, `inset:0`,
     `mds-asset.css:59`), deci inaltimea heroului nu se schimba: o da continutul,
     ca pana acum. `object-fit:cover`, centrata.
   ⚠ VOALUL e cel al temei, mai inchis: sus, sub breadcrumb si titlu, 64%; jos
     se topeste in fundalul paginii, ca la gradient. Culorile sunt ale voalului
     existent (`mds-asset.css:68`), doar opacitatile cresc.
   ⚠ Fara imagine nimic din fisierul asta nu se aplica.
   ═══════════════════════════════════════════════════════════════════════════ */

.mds-ahero__bg--img{ background:#131313; }
.mds-ahero__bg--img .mds-ahero__img{
  position:absolute; inset:0; width:100%; height:100%; max-width:none;
  object-fit:cover; object-position:center; display:block;
}
.mds-ahero--img .mds-ahero__veil{
  background:linear-gradient(to bottom,
    rgba(8,9,10,.64), rgba(8,9,10,.55) 30%,
    rgba(8,9,10,.62) 66%, rgba(8,9,10,.92) 92%, var(--mds-bg));
}