/* ===== HeroRef slider ===== */

.heroRefBox{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  overflow:hidden;
  background:#fff;
  box-shadow:0 18px 50px rgba(0,0,0,.10);
  min-height:500px;
  position:relative;
  margin: 10px 0;
  border-radius: 7px;
}

/* LEFT (big image) */
.heroRef__left{
  position:relative;
  background:#f2f2f2;
  overflow:hidden;
}
.heroRef__mainImg{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  max-height:500px;
}

/* RIGHT (static bg + text + thumb) */
.heroRef__right{
  position:relative;
  background-image: var(--hero-right-bg);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  padding:26px 26px 26px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.heroRef__text{
  width:100%;
  max-width:520px;
  text-align:left;
  padding-right:210px; /* место под миниатюру справа */
}
.heroRef__title{
  font-size:48px;
  line-height:1.02;
  font-weight:900;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:rgba(0,0,0,.18);
  margin:-50px 0 10px;
  background: linear-gradient(to bottom, #d1d1d1 0%, #535655 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.heroRef__descr{
  font-size:18px;
  font-weight:800;
  color:#393637;
  max-width:520px;
}

/* Thumb (next slide) */
.heroRef__thumbWrap{
  position:absolute;
  right:22px;
  bottom:22px;
  width:250px;
  height:170px;
  box-shadow:0 18px 50px rgba(0,0,0,.18);
  cursor:pointer;
}
.heroRef__thumbImg{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:opacity .15s ease;
  border-radius: 7px;
}
.heroRef__thumbImg.is-fading{opacity:0}

/* arrows */
.heroRef__arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px;height:44px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.7);
  background:rgba(57,54,55,.75);
  color:#fff;
  font-size:30px;
  line-height:40px;
  cursor:pointer;
  display:flex;
  flex-direction: column-reverse;
  z-index:10;
}
.heroRef__arrow:hover{background:rgba(157,10,30,.85)}
.heroRef__arrow--prev{left:16px}
.heroRef__arrow--next{right:16px}

/* empty */
.heroRef__empty{
  background:#fff;
  border-radius:14px;
  padding:26px;
  box-shadow:0 18px 50px rgba(0,0,0,.08);
}
.heroRef__emptyTitle{font-size:22px;font-weight:900;margin:0 0 6px}
.heroRef__emptyText{color:#666;font-weight:700}

/* responsive */
@media (max-width:980px){
  .heroRefBox{grid-template-columns:1fr; min-height:unset}
  .heroRef__right{min-height:260px}
  .heroRef__text{padding-right:0; text-align:center}
  .heroRef__thumbWrap{right:14px; bottom:14px; width:170px; height:105px}
  .heroRef__title{font-size:34px}
}
@media (max-width:520px){
  .heroRef__thumbWrap{position:static; margin:14px auto 0}
  .heroRef__right{padding:18px}
  .heroRef__arrow--prev{left:10px}
  .heroRef__arrow--next{right:10px}
}

/* flying clone */
.heroRef__fly{border:1px solid rgba(0,0,0,.08)}