/* ---------- Grid ---------- */

.watch-episodes-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin: 0 0 32px;
}

.watch-episode {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	aspect-ratio: 16 / 10;
	border: 0;
	border-radius: 12px;
	background-color: #111;
	background-size: cover;
	background-position: center;
	cursor: pointer;
	overflow: hidden;
	padding: 0 28px;
	text-align: right;
}

.watch-episode::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.55) 100%);
	pointer-events: none;
}

.watch-episode__title {
	position: relative;
	z-index: 1;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: clamp(20px, 2.4vw, 28px);
	line-height: 1.2;
	color: #f7f2e7;
	max-width: 60%;
}

.watch-episode--hidden { display: none; }

/* ---------- Load more ---------- */

.watch-episodes-loadmore-wrap {
	position: relative;
	display: flex;
	border: 1px solid #00000033;
	border-radius: 20px !important;
}

.watch-episodes-loadmore {
	width: 100%;
	background: transparent;
	border: none;
	color: #1A1A1A;
	padding: 12px 24px;
	font-size: 13px;
	letter-spacing: 0.1%;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .2s ease;
	font-weight: 600;
	font-family: 'Nunito Sans', sans-serif;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.watch-episodes-loadmore::after {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url('https://staging.daxprojects.com/bbb/wp-content/uploads/2026/08/arrow-right.webp');
    background-repeat: no-repeat;
    background-size: contain;
    flex-shrink: 0; 
}

.watch-episodes-loadmore:hover { background: rgba(201, 162, 75, .12); }

/* ---------- Lightbox ---------- */
.watch-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.watch-lightbox[hidden] { display: none; }

.watch-lightbox__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,.85);
}

.watch-lightbox__content {
	position: relative;
	width: min(90vw, 960px);
	z-index: 1;
}

.watch-lightbox__iframe-wrap {
	position: relative;
	width: 100%;
	padding-top: 56.25%; /* 16:9 */
}

.watch-lightbox__iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: 8px;
}

.watch-lightbox__close {
	position: absolute;
	top: -44px;
	right: 0;
	background: none;
	border: 0;
	color: #fff;
	font-size: 32px;
	line-height: 1;
	cursor: pointer;
}

.watch-episodes-grid .watch-episode {
  width: 422px;
  height: 237px;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 20px !important;
}

#inner-watch {
  z-index: 999 !important;
}

@media (max-width: 1360px){
	.watch-episodes-grid .watch-episode {
    width: 423px !important;
	}
}

@media (max-width: 1280px){
	 .watch-episodes-grid .watch-episode {
        width: 397px !important;
		height: 220px !important;
    }
}

@media (max-width: 1200px){
	  .watch-episodes-grid .watch-episode {
        width: 370px !important;
		height: 205px !important;
	}
}

@media (max-width: 1024px) {
	.watch-episodes-grid { grid-template-columns: repeat(2, 1fr); }
	.video-item .vc_column-inner { width: 100% !important; }
	.watch-episodes-grid .watch-episode { width: 100% !important; }
}

@media (max-width: 810px){
	.watch-episodes-grid .watch-episode{
	height: 190px !important;
}
}

@media (max-width: 810px){
	.watch-episodes-grid .watch-episode{
	height: 180px !important;
}
}

@media (max-width: 660px) {
	.watch-episodes-grid { 
		grid-template-columns: 1fr;
	}
	.watch-episodes-grid .watch-episode {
    height: 300px !important;
	}
}

@media (max-width: 600px) {
	.watch-episodes-grid .watch-episode {
    height: 240px !important;
	}
}

@media (max-width: 475px) {
	.watch-episodes-grid .watch-episode {
    height: 200px !important;
	}
}
@media (max-width: 375px) {
	.watch-episodes-grid .watch-episode {
    height: 175px !important;
	}
}