/* Ludhiana Lions Highlights — carousel styles */

.llh{
	--llh-accent:#E8473D;
	--llh-accent-dark:#C9382F;
	--llh-ink:#1A1A1A;
	--llh-muted:#7B8794;
	--llh-line:#E4E7EC;
	--llh-card:#FFFFFF;
	--llh-radius:14px;
	--llh-gap:22px;
	--llh-per-view:3;
	position:relative;
	font-family:inherit;
	color:var(--llh-ink);
}
.llh *,.llh *::before,.llh *::after{box-sizing:border-box}

/* head ------------------------------------------------------------------ */
.llh__head{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:18px}
.llh__heading{margin:0;font-size:28px;font-weight:800;letter-spacing:.3px;line-height:1.2;color:inherit}

/* arrows ---------------------------------------------------------------- */
.llh__nav{display:flex;gap:10px;flex:0 0 auto}
.llh__nav--below{justify-content:center;margin-top:20px}
.llh__arrow{
	width:42px;height:42px;border-radius:50%;
	background:var(--llh-card);border:1px solid var(--llh-line);
	display:inline-flex;align-items:center;justify-content:center;
	cursor:pointer;padding:0;transition:background .2s ease,border-color .2s ease,transform .2s ease;
	box-shadow:0 1px 4px rgba(16,24,40,.06);
}
.llh__arrow svg{width:20px;height:20px;fill:none;stroke:var(--llh-ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.llh__arrow:hover:not(:disabled){background:var(--llh-accent);border-color:var(--llh-accent);transform:translateY(-1px)}
.llh__arrow:hover:not(:disabled) svg{stroke:#fff}
.llh__arrow:disabled{opacity:.35;cursor:default}
.llh__arrow:focus-visible{outline:2px solid var(--llh-accent);outline-offset:2px}

/* track ----------------------------------------------------------------- */
.llh__viewport{overflow:hidden;margin:0 -2px;padding:2px}
.llh__track{
	display:flex;
	gap:var(--llh-gap);
	transition:transform .45s cubic-bezier(.4,0,.2,1);
	will-change:transform;
}
.llh.is-dragging .llh__track{transition:none}
.llh__slide{
	flex:0 0 calc((100% - (var(--llh-per-view) - 1) * var(--llh-gap)) / var(--llh-per-view));
	min-width:0;
}

/* card ------------------------------------------------------------------ */
.llh__card{
	display:block;width:100%;padding:0;margin:0;text-align:left;cursor:pointer;
	background:var(--llh-card);border:1px solid var(--llh-line);border-radius:var(--llh-radius);
	overflow:hidden;font:inherit;color:inherit;
	transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
	box-shadow:0 2px 10px rgba(16,24,40,.05);
}
.llh__card:hover{transform:translateY(-4px);box-shadow:0 12px 26px rgba(16,24,40,.13);border-color:transparent}
.llh__card:focus-visible{outline:2px solid var(--llh-accent);outline-offset:3px}

.llh__thumb{position:relative;display:block;aspect-ratio:16/9;background:#0f1115;overflow:hidden}
.llh__thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease,opacity .3s ease}
.llh__card:hover .llh__thumb img{transform:scale(1.06)}
.llh__thumb::after{
	content:"";position:absolute;inset:0;
	background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.45) 100%);
	opacity:.85;
}
.llh__play{
	position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
	width:56px;height:56px;border-radius:50%;background:var(--llh-accent);
	display:flex;align-items:center;justify-content:center;z-index:2;
	box-shadow:0 6px 18px rgba(0,0,0,.3);
	transition:transform .25s ease,background .25s ease;
}
.llh__play svg{width:26px;height:26px;fill:#fff;margin-left:2px}
.llh__card:hover .llh__play{transform:translate(-50%,-50%) scale(1.1);background:var(--llh-accent-dark)}
.llh__duration{
	position:absolute;right:10px;bottom:10px;z-index:2;
	background:rgba(0,0,0,.78);color:#fff;font-size:11px;font-weight:700;
	padding:3px 7px;border-radius:4px;letter-spacing:.3px;
}
.llh__body{display:block;padding:15px 16px 17px}
.llh__title{
	display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
	font-size:15px;font-weight:700;line-height:1.4;color:var(--llh-ink);
}
.llh__date{display:block;margin-top:7px;font-size:12px;font-weight:600;color:var(--llh-muted)}

/* dots ------------------------------------------------------------------ */
.llh__dots{display:flex;justify-content:center;gap:8px;margin-top:20px}
.llh__dots:empty{display:none}
.llh__dot{
	width:9px;height:9px;padding:0;border:0;border-radius:50%;cursor:pointer;
	background:var(--llh-line);transition:background .2s ease,width .2s ease;
}
.llh__dot.is-active{background:var(--llh-accent);width:26px;border-radius:5px}
.llh__dot:focus-visible{outline:2px solid var(--llh-accent);outline-offset:2px}

/* modal ----------------------------------------------------------------- */
.llh__modal{
	position:fixed;inset:0;z-index:99999;background:rgba(9,11,16,.88);
	display:flex;align-items:center;justify-content:center;padding:24px;
	opacity:0;transition:opacity .25s ease;
}
.llh__modal.is-open{opacity:1}
.llh__modal[hidden]{display:none}
.llh__modal-inner{position:relative;width:min(1000px,100%);}
.llh__frame{position:relative;aspect-ratio:16/9;width:100%;background:#000;border-radius:10px;overflow:hidden}
.llh__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.llh__close{
	position:fixed;top:22px;right:24px;z-index:5;
	width:46px;height:46px;border-radius:50%;padding:0;border:0;cursor:pointer;
	display:flex;align-items:center;justify-content:center;line-height:1;
	transition:background-color .2s ease,transform .2s ease;
}
.llh__close svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round}
.llh__close:hover{transform:rotate(90deg)}
.llh__close:focus-visible{outline:2px solid #fff;outline-offset:3px}
body.llh-modal-open{overflow:hidden}

/* responsive ------------------------------------------------------------ */
@media(max-width:1024px){
	.llh{--llh-gap:18px}
	.llh__heading{font-size:24px}
}
@media(max-width:767px){
	.llh{--llh-gap:14px}
	.llh__head{flex-direction:column;align-items:flex-start;gap:12px}
	.llh__heading{font-size:21px}
	.llh__play{width:46px;height:46px}
	.llh__play svg{width:22px;height:22px}
	.llh__title{font-size:14px}
	.llh__close{top:16px;right:16px;width:40px;height:40px}
}
@media(prefers-reduced-motion:reduce){
	.llh__track{transition:none}
	.llh__card:hover{transform:none}
	.llh__card:hover .llh__thumb img{transform:none}
}


/* ------------------------------------------------------------------------
 * Theme-proof overrides.
 * The cards, arrows and close button are <button> elements, so themes and
 * Elementor global button styles hit them. These rules win those fights.
 * --------------------------------------------------------------------- */
.llh .llh__card,
.llh .llh__card:hover,
.llh .llh__card:focus,
.llh .llh__card:active{
	background-color:var(--llh-card) !important;
	background-image:none !important;
	color:var(--llh-ink) !important;
	text-decoration:none !important;
}
.llh .llh__title{transition:color .22s ease}
.llh .llh__card:hover .llh__title,
.llh .llh__card:focus-visible .llh__title{color:var(--llh-accent) !important}

.llh .llh__arrow,
.llh .llh__arrow:focus{
	background-color:var(--llh-card) !important;
	background-image:none !important;
	border:1px solid var(--llh-line) !important;
	color:var(--llh-ink) !important;
}
.llh .llh__arrow:hover:not(:disabled),
.llh .llh__arrow:focus-visible:not(:disabled){
	background-color:var(--llh-accent) !important;
	border-color:var(--llh-accent) !important;
}
.llh .llh__arrow:hover:not(:disabled) svg,
.llh .llh__arrow:focus-visible:not(:disabled) svg{stroke:#fff !important}

.llh .llh__close,
.llh .llh__close:focus{
	background-color:rgba(255,255,255,.16) !important;
	background-image:none !important;
	border:0 !important;
	color:#fff !important;
}
.llh .llh__close:hover{background-color:var(--llh-accent) !important}

.llh .llh__dot{background-color:var(--llh-line) !important;background-image:none !important;border:0 !important}
.llh .llh__dot.is-active{background-color:var(--llh-accent) !important}