/* H Coverflow - Frontend Glass Coverflow + Grid Gallery - v1.1 (High Quality + Lightbox) */
.hcflow-wrapper{
  --hc-height:420px;
  --hc-radius:20px;
  --hc-blur:14px;
  --hc-gap:12px;
  width:100%;
  max-width:100%;
  margin: 24px auto;
  position:relative;
  font-family: 'Vazirmatn', Inter, system-ui, sans-serif;
  direction: rtl;
}
.hcflow-wrapper.hcflow-ltr{ direction:ltr; }
.hcflow-wrapper *{ box-sizing:border-box; }

/* Swiper container */
.hcflow-swiper{
  width:100%;
  padding: 18px 0 30px;
  overflow: visible;
}
.hcflow-swiper .swiper-wrapper{ align-items:center; }
.hcflow-slide{
  width: 500px;
  max-width: 78vw;
  height: var(--hc-height);
  display:flex;
  align-items:center;
  justify-content:center;
  transition: filter .4s, opacity .4s;
}
@media(max-width:640px){ .hcflow-slide{ width: 280px; } }

/* Card */
.hcflow-card{
  position:relative;
  width:100%;
  height:100%;
  border-radius: var(--hc-radius);
  overflow:hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 20px 60px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.12) inset;
  transform: translateZ(0);
  isolation:isolate;
  cursor: zoom-in;
}
.hcflow-card-media{
  position:absolute; inset:0;
}
.hcflow-card-media img{
  width:100%; height:100% !important; display:block;
  transform: scale(1.02);
  transition: transform .6s;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: auto;
}
.hcflow-slide.swiper-slide-active .hcflow-card-media img{ transform: scale(1); }
.hcflow-overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.18) 55%, rgba(0,0,0,.72) 100%),
              radial-gradient(600px 300px at 50% 0%, rgba(255,255,255,.10), transparent 60%);
  pointer-events:none;
}
.hcflow-reflection{
  position:absolute; left:0; right:0; bottom:-18px; height:34px;
  background-size: cover; background-position: center bottom;
  filter: blur(6px) brightness(.7);
  transform: scaleY(-1);
  opacity:.0;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.5), transparent);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.5), transparent);
  transition: opacity .4s;
}
.hcflow-slide.swiper-slide-active .hcflow-reflection{ opacity:.22; }
.hcflow-card-content{
  position:absolute; left:0; right:0; bottom:0;
  padding: 18px 18px 16px;
  color:#fff;
  z-index:2;
  text-align: right;
}
.hcflow-ltr .hcflow-card-content{ text-align:left; }
.hcflow-title{
  margin:0 0 6px; font-size:18px; font-weight:900; line-height:1.2; text-shadow:0 2px 18px rgba(0,0,0,.55);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.hcflow-subtitle{
  margin:0; font-size:12.5px; font-weight:500; color:rgba(255,255,255,.88); line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.hcflow-btn{
  display:inline-flex; align-items:center; justify-content:center;
  margin-top:10px; padding:8px 14px; border-radius:999px;
  background: rgba(255,255,255,.92); color:#111; font-size:12px; font-weight:800; text-decoration:none;
  box-shadow:0 6px 20px rgba(0,0,0,.25);
  transition:.2s;
  position:relative; z-index:3;
}
.hcflow-btn:hover{ transform: translateY(-1px); background:#fff; }
.hcflow-btn--ghost{ background: rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.22); backdrop-filter: blur(8px); }
.hcflow-link-stretched{ position:absolute; inset:0; z-index:3; cursor:pointer; }
.hcflow-glass-border{
  position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  border:1px solid rgba(255,255,255,.18);
  background: linear-gradient(135deg, rgba(255,255,255,.18), transparent 40%, rgba(255,255,255,.06));
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  padding:1px;
}

/* Zoom icon on card */
.hcflow-zoom-icon{
  position:absolute; top:12px; left:12px;
  width:34px; height:34px; border-radius:999px;
  display:grid; place-items:center;
  background: rgba(0,0,0,.48);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity:0; transform: scale(.9);
  transition:.25s;
  z-index:3;
  pointer-events:none;
}
.hcflow-ltr .hcflow-zoom-icon{ left:auto; right:12px; }
.hcflow-card:hover .hcflow-zoom-icon,
.hcflow-slide.swiper-slide-active .hcflow-zoom-icon{ opacity:1; transform: scale(1); }

/* Glass effect */
.hcflow-glass .hcflow-card{
  backdrop-filter: blur(var(--hc-blur));
  -webkit-backdrop-filter: blur(var(--hc-blur));
}
.hcflow-glass .hcflow-card::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02));
  pointer-events:none; z-index:1;
}

/* Coverflow states */
.hcflow-slide:not(.swiper-slide-active){ filter: brightness(.72) saturate(.85); }
.hcflow-slide.swiper-slide-active{ filter: brightness(1) saturate(1); }
.hcflow-slide.swiper-slide-active .hcflow-card{
  box-shadow: 0 24px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.14) inset;
}

/* Navigation */
.hcflow-nav{
  width:44px; height:44px;
  border-radius:999px;
  background: rgba(20, 14, 35,.55);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color:#fff;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  display:grid; place-items:center;
  transition:.2s;
}
.hcflow-nav:hover{ background: rgba(255,255,255,.92); color:#111; transform: scale(1.05); }
.hcflow-nav::after{ display:none; }
.hcflow-nav.swiper-button-disabled{ opacity:.35; }

/* Pagination */
.hcflow-pagination{
  position: static !important;
  margin-top:14px;
  display:flex; justify-content:center; gap:6px;
}
.hcflow-pagination .swiper-pagination-bullet{
  width:18px; height:6px; border-radius:999px;
  background: rgba(255,255,255,.35);
  opacity:1; transition:.3s;
}
.hcflow-pagination .swiper-pagination-bullet-active{
  width:28px; background:#fff; box-shadow:0 2px 10px rgba(255,255,255,.35);
}

/* Grid Gallery */
.hcflow-grid-wrap{
  margin-top: 18px;
  padding: 14px;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  backdrop-filter: blur(10px);
}
.hcflow-grid{
  display:grid;
  grid-template-columns: repeat(var(--grid-cols), minmax(0,1fr));
  gap: var(--grid-gap);
}
@media(max-width:1024px){ .hcflow-grid{ grid-template-columns: repeat(var(--grid-cols-tablet), minmax(0,1fr)); } }
@media(max-width:640px){ .hcflow-grid{ grid-template-columns: repeat(var(--grid-cols-mobile), minmax(0,1fr)); } }

.hcflow-grid-item{
  position:relative;
  aspect-ratio: 1.35 / 1;
  border-radius: var(--grid-radius);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  padding:0; cursor:pointer;
  transform: translateZ(0);
  transition: transform .25s, border-color .25s, box-shadow .25s;
}
.hcflow-grid-item img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition: transform .4s, filter .3s;
}
.hcflow-grid-item:hover{ transform: translateY(-2px); border-color: rgba(255,255,255,.18); }
.hcflow-grid-item:hover img{ transform: scale(1.06); }
.hcflow-grid-item.is-active{
  border-color: rgba(124,58,237,.9);
  box-shadow: 0 0 0 2px rgba(124,58,237,.35), 0 8px 24px rgba(124,58,237,.25);
}
.hcflow-grid-item.is-active::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
  pointer-events:none;
}
.hcflow-grid-overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.45));
  opacity:0; transition:.3s;
}
.hcflow-grid-item:hover .hcflow-grid-overlay, .hcflow-grid-item.is-active .hcflow-grid-overlay{ opacity:1; }

/* Empty */
.hcflow-empty{
  padding:32px; text-align:center; color:#a1a1aa;
  background: rgba(255,255,255,.04); border:1px dashed rgba(255,255,255,.12);
  border-radius:14px; font-size:13px;
}

/* RTL adjustments */
.hcflow-rtl .hcflow-nav--prev{ right:12px; left:auto; }
.hcflow-rtl .hcflow-nav--next{ left:12px; right:auto; }
.hcflow-ltr .hcflow-nav--prev{ left:12px; }
.hcflow-ltr .hcflow-nav--next{ right:12px; }

.hcflow-wrapper{ background: radial-gradient(1200px 400px at 50% -10%, rgba(124,58,237,.08), transparent 60%); border-radius:18px; padding:8px 8px 4px; }
.hcflow-swiper.swiper{ overflow:visible; }
.hcflow-wrapper{ overflow:clip; }

/* ============ LIGHTBOX (Fullscreen, Original Size) ============ */
.hcflow-lightbox{
  position:fixed; inset:0;
  display:none; align-items:center; justify-content:center;
  z-index:999999;
  padding: 40px 60px;
}
.hcflow-lightbox.is-open{ display:flex; }
.hcflow-lightbox-bg{
  position:absolute; inset:0;
  background: rgba(8, 6, 14, .78);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.hcflow-lightbox-content{
  position:relative; z-index:2;
  max-width: 92vw; max-height: 88vh;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  animation: hcflow-zoomIn .32s cubic-bezier(.16,1,.3,1);
}
@keyframes hcflow-zoomIn{
  from{ opacity:0; transform: scale(.96) translateY(8px); }
  to{ opacity:1; transform: scale(1) translateY(0); }
}
.hcflow-lightbox-img{
  max-width: 92vw; max-height: 78vh;
  width:auto; height:auto;
  object-fit: contain;
  border-radius: 14px;
  box-shadow: 0 28px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.12);
  background: #0a0a0f;
}
.hcflow-lightbox-caption{
  text-align:center; color:#fff; max-width: 700px;
}
.hcflow-lightbox-title{ margin:0 0 4px; font-size:16px; font-weight:900; text-shadow:0 2px 12px rgba(0,0,0,.6); }
.hcflow-lightbox-subtitle{ margin:0; font-size:12.5px; color:rgba(255,255,255,.82); }
.hcflow-lightbox-close,
.hcflow-lightbox-prev,
.hcflow-lightbox-next{
  position:absolute; z-index:3;
  width:44px; height:44px; border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(20,14,35,.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color:#fff; display:grid; place-items:center; cursor:pointer;
  transition:.18s; box-shadow:0 8px 24px rgba(0,0,0,.35);
}
.hcflow-lightbox-close{ top:18px; right:18px; font-size:18px; font-weight:700; }
.hcflow-lightbox-prev{ left:18px; top:50%; transform:translateY(-50%); }
.hcflow-lightbox-next{ right:18px; top:50%; transform:translateY(-50%); }
.hcflow-lightbox-close:hover,
.hcflow-lightbox-prev:hover,
.hcflow-lightbox-next:hover{ background:#fff; color:#111; transform: translateY(-50%) scale(1.05); }
.hcflow-lightbox-close:hover{ transform: scale(1.05); }
@media(max-width:640px){
  .hcflow-lightbox{ padding: 70px 12px 20px; }
  .hcflow-lightbox-img{ max-height: 66vh; }
  .hcflow-lightbox-prev, .hcflow-lightbox-next{ top:auto; bottom:18px; transform:none; }
  .hcflow-lightbox-prev{ left:22%; }
  .hcflow-lightbox-next{ right:22%; }
  .hcflow-lightbox-close{ top:12px; right:12px; }
}
body.hcflow-lightbox-open{ overflow:hidden; }