/* Slider imagini MCP – responsive, fade elegant */
.hero-slider{
  position:relative;
  width:100%;
  max-width:720px;
  /* pe desktop folosim proporția imaginii vechi 466x566 (portret) */
  aspect-ratio: 466 / 566;
  overflow:hidden;
  border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.12);
  /* marginul lateral îl preia din .foto_dreapta (stil.css) */
}

.hero-slide{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity .8s ease-in-out;
  will-change: opacity;
}
.hero-slide.is-active{ opacity:1; }

/* asigură întinderea pe tot containerul */
.hero-slide picture,
.hero-slide img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

/* Bullets */
.hero-dots{
  position:absolute;
  left:50%;
  bottom:10px;
  transform:translateX(-50%);
  display:flex;
  gap:8px;
  z-index:2;
}
.hero-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#ffffffb3;
  border:0;
  cursor:pointer;
}
.hero-dot.is-active{ background:#0079C1; }

/* Integrare cu layout-ul existent: .foto_dreapta vine din stil.css (float right + margini) */
.hero-slider.foto_dreapta{
  max-width:466px;          /* dimensiunea clasică a imaginii vechi pe desktop */
}

/* Clearfix pentru containerul cu float */
#mainContent::after{
  content:"";
  display:block;
  clear:both;
}

/* ===== Mobile: nu ascunde .foto_dreapta; ocupă lățime completă și folosește formatul 500x300 ===== */
@media screen and (max-width: 767px){
  .hero-slider.foto_dreapta{
    display:block !important;   /* contracarăm .foto_dreapta { display:none } din stil.css */
    float:none !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 0 16px 0 !important;
    aspect-ratio: 5 / 3;        /* proporția pozelor mobile: 500x300 */
  }
}