/* AOP Swiper styles */
.aop-wrapper{ position: relative; padding:0; margin:0; overflow:hidden; }
.aop-swiper{ width:100%; overflow:hidden; }
.aop-slide{ width:350px; } /* fixed card width */
.swiper-wrapper{ align-items:stretch; }
:root{ --aop-gap:16px; }
.swiper .swiper-wrapper{ gap: var(--aop-gap); }

.op-card{
  position: relative;
  background:#111;
  color:#fff;
  border-radius:18px;
  overflow:hidden;
  box-shadow: 0 10px 25px rgba(0,0,0,.35);
}
.op-image{ width:100%; height:450px; overflow:hidden; background:#000; }
.op-img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }

/* Bottom gradient for text */
.op-card::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:45%;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 40%, rgba(0,0,0,.85) 100%);
  pointer-events:none;
}
.op-meta{
  position:absolute; left:16px; right:16px; bottom:16px; z-index:2;
  color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.5);
}
.op-subtitle{ font-weight:600; opacity:.95; font-size:14px; margin-bottom:6px; }
.op-title{ font-weight:700; font-size:20px; margin:0; }

.op-link{ position:absolute; inset:0; z-index:3; }

/* FA arrows like sample */
.aop-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border-radius:999px;
  background:#fff; border:1px solid rgba(0,0,0,.12);
  box-shadow:0 4px 12px rgba(0,0,0,.16);
  display:grid; place-items:center; cursor:pointer;
  z-index:10000;
}
.aop-prev{ left:8px; }
.aop-next{ right:8px; }
.aop-nav i{ font-size:14px; color:#000; line-height:1; }
.aop-nav:focus{ outline:none; }
.aop-nav:hover{ transform: translateY(-50%) scale(1.05); }

/* Edge masks */
.aop-wrapper::before, .aop-wrapper::after{
  content:""; position:absolute; top:0; bottom:0; width:32px; z-index:9000; pointer-events:none;
}
.aop-wrapper::before{ left:0; background: linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.25), rgba(0,0,0,0)); }
.aop-wrapper::after{ right:0; background: linear-gradient(270deg, rgba(0,0,0,.55), rgba(0,0,0,.25), rgba(0,0,0,0)); }

/* Loading overlay */
.aop-wrapper.aop-loading::after{
  content:""; position:absolute; inset:0; background: rgba(0,0,0,.2); /* filter removed */ z-index: 11000;
}
.aop-wrapper.aop-loading::before{
  content:""; position:absolute; left:50%; top:50%; width:28px; height:28px; margin:-14px 0 0 -14px;
  border:3px solid rgba(255,255,255,.6); border-top-color:#000; border-radius:50%;
  animation:aop-spin .8s linear infinite; z-index: 11001;
}
@keyframes aop-spin{ to{ transform: rotate(360deg); } }

/* Responsive */
@media (max-width: 768px){
  .aop-slide{ width: 260px; }
  .op-image{ height: 320px; }
}


/* v3.1 - reset nav buttons to avoid theme interference */
.aop-wrapper .aop-nav{
  all: unset;
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border-radius:999px;
  background:#fff; border:1px solid rgba(0,0,0,.12);
  box-shadow:0 4px 12px rgba(0,0,0,.16);
  display:grid; place-items:center; cursor:pointer;
  z-index:10000;
}
.aop-wrapper .aop-prev{ left:8px; }
.aop-wrapper .aop-next{ right:8px; }
.aop-wrapper .aop-nav i{ font-size:14px; color:#000; line-height:1; }
.aop-wrapper .aop-nav:focus{ outline:none; }
.aop-wrapper .aop-nav:hover{ transform: translateY(-50%) scale(1.05); }


/* v3.2 — force LTR inside wrapper so direction control is consistent even on RTL sites */
.aop-wrapper{ direction: ltr !important; }


/* v4.2 – enforce 350x450 cards, disable wrapping, guard against theme overrides */
.aop-wrapper .swiper-wrapper{ display:flex !important; flex-wrap:nowrap !important; align-items:stretch !important; gap:16px !important; }
.aop-wrapper .aop-slide{ flex:0 0 350px !important; width:350px !important; }
.aop-wrapper .op-image{ height:450px !important; }
.aop-wrapper .op-img{ width:100% !important; height:100% !important; object-fit:cover !important; object-position:center !important; display:block !important; }


/* v4.3 – image fill & top-aligned crop */
.aop-wrapper .op-image{ width:100% !important; height:450px !important; overflow:hidden !important; }
.aop-wrapper .op-img{
  width:100% !important;
  height:100% !important;
  object-fit: cover !important;        /* fill the frame */
  object-position: 50% 0% !important;  /* top-center: crop from bottom if needed */
  display:block !important;
}

/* auto-fix block */

.card, .artist, .item, .tile, .slide, .swiper-slide, [class*="card"], [class*="tile"], [class*="artist"] {
  overflow: hidden;
  border-radius: 16px;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}
.card, .artist, .item, .tile, .slide, .swiper-slide, [class*="card"], [class*="tile"], [class*="artist"]::after, .card, .artist, .item, .tile, .slide, .swiper-slide, [class*="card"], [class*="tile"], [class*="artist"]::before {
  background: none !important;
  mix-blend-mode: normal !important;
}
.card, .artist, .item, .tile, .slide, .swiper-slide, [class*="card"], [class*="tile"], [class*="artist"] img {
  display:block; width:100%; height:100%;
  object-fit:cover; background:#fff;
}

.swiper-slide::after, .swiper-slide::before { background: none !important; }