/* Winning Factor coverflow slider
   Moved verbatim from the Elementor HTML widget. */

.ybc-wrap{
  --card-w: clamp(240px, 30vw, 420px); /* center card width */
  --side-scale: .80;                    /* how much smaller side cards are */
  --side-shift: .70;                    /* side card horizontal offset (x card width) */
  --side-dim: .22;                      /* how much darker the side cards are (0 = off) */
  --radius: 16px;
  --navy: #374151;
  --gray: #c4c8cf;
  width:100%;
  box-sizing:border-box;
  padding:20px 0 10px;
  font-family: inherit;
}
.ybc-wrap *{box-sizing:border-box;}

/* stage holds absolutely-positioned cards, centered */
.ybc-stage{
  position:relative;
  width:100%;
  /* height = center card height; aspect ratio ~ 420:710 */
  height: calc(var(--card-w) * 1.69);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.ybc-card{
  position:absolute;
  top:50%;
  left:50%;
  width:var(--card-w);
  aspect-ratio: 42 / 71;          /* portrait card */
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 10px 24px rgba(0,0,0,.14);
  transform:translate(-50%,-50%);
  transition:transform .55s cubic-bezier(.22,.61,.36,1), opacity .45s ease, box-shadow .45s ease;
  will-change:transform,opacity;
  backface-visibility:hidden;
  cursor:pointer;
}
/* dim overlay sits on the side cards; fades out on the active one */
.ybc-card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:rgba(0,0,0,var(--side-dim));
  transition:opacity .45s ease;
  pointer-events:none;
}
.ybc-card.is-active{
  box-shadow:0 26px 55px rgba(0,0,0,.28);
}
.ybc-card.is-active::after{ opacity:0; }
.ybc-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:var(--radius);   /* keep corners rounded even when scaled */
  user-select:none;
  -webkit-user-drag:none;
}

/* navigation */
.ybc-nav{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:14px;
  margin-top:34px;
}
.ybc-btn{
  width:56px;height:56px;
  border:none;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:transform .2s ease, filter .2s ease;
}
.ybc-btn:hover{filter:brightness(.95);}
.ybc-btn:active{transform:scale(.94);}
.ybc-prev{background:var(--gray);}
.ybc-next{background:var(--navy);}

@media (max-width:600px){
  .ybc-wrap{ --card-w: clamp(190px, 56vw, 280px); --side-shift:.66; }
  .ybc-btn{width:50px;height:50px;}
}