/**
 * Al-Ansar Redesign — Videos page
 * Source: html/videos.html
 */

.ar-videos-page{ background:var(--paper, #FBF9F6); }

.ar-videos-featured-section{ padding-top:80px; padding-bottom:0; }
.ar-videos-filters-section{ padding-top:56px; padding-bottom:0; }
.ar-videos-grid-section{ padding-block:48px 80px; background:var(--paper-warm, #F5F1EA); }
.ar-videos-related-section{ padding-block:80px; }
.ar-videos-cta-section{ padding-block:0 100px; }

@media (max-width:1024px){
	.ar-videos-featured-section{ padding-top:64px; }
	.ar-videos-related-section{ padding-block:64px; }
}
@media (max-width:640px){
	.ar-videos-featured-section{ padding-top:48px; }
	.ar-videos-grid-section{ padding-block:40px 64px; }
	.ar-videos-cta-section{ padding-block:0 72px; }
}

.ar-section-head{
	display:flex; justify-content:space-between; align-items:flex-end; gap:24px;
	margin-bottom:36px; flex-wrap:wrap;
}
.ar-section-head h2{ font-size:clamp(36px,4vw,52px); margin-top:14px; color:var(--iron-900,#1A1A1A); font-family:var(--ar-font-heading); font-weight:800; }
.ar-section-head p{ color:var(--iron-500,#6B6B6B); font-size:16px; max-width:420px; line-height:1.7; margin:0; }
.ar-eyebrow{
	display:inline-flex; align-items:center; gap:10px;
	color:var(--gold-700,#88734C); font-size:13px; font-weight:800; letter-spacing:.04em;
}
.ar-eyebrow::before{ content:''; width:26px; height:2px; background:var(--gold-500,#AB9671); }

.ar-pill-filters{ display:flex; gap:10px; flex-wrap:wrap; }
.ar-pill-filters .ar-f-pill{
	padding:11px 22px; border-radius:100px; font-size:14px; font-weight:700;
	border:1.5px solid var(--emerald-600,#186939); color:var(--emerald-700,#0B4A24);
	background:#fff; transition:background .3s var(--ease,ease), color .3s var(--ease,ease), border-color .3s var(--ease,ease);
	white-space:nowrap; cursor:pointer;
}
.ar-pill-filters .ar-f-pill:hover{ background:var(--paper-warm,#F5F1EA); }
.ar-pill-filters .ar-f-pill.active{ background:var(--emerald-700,#0B4A24); color:#fff; border-color:var(--emerald-700,#0B4A24); }
@media (max-width:900px){
	.ar-pill-filters{ flex-wrap:nowrap; overflow-x:auto; padding-bottom:6px; scrollbar-width:thin; }
}

.ar-featured-video{
	position:relative; border-radius:32px; overflow:hidden; box-shadow:var(--shadow-soft,0 24px 60px -28px rgba(2,20,9,.35));
	cursor:pointer; min-height:440px; display:flex; align-items:flex-end; width:100%;
	border:0; padding:0; text-align:start; background:#0c1a12;
}
.ar-featured-video img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease,ease); }
.ar-featured-video:hover img{ transform:scale(1.05); }
.ar-featured-video::after{ content:''; position:absolute; inset:0; background:linear-gradient(0deg, rgba(2,15,8,.92) 0%, rgba(2,15,8,.15) 60%, transparent 100%); }
.ar-fv-play{
	position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:3;
	width:96px; height:96px; border-radius:50%; background:rgba(255,255,255,.15); backdrop-filter:blur(6px);
	display:flex; align-items:center; justify-content:center; transition:transform .4s var(--ease,ease), background .4s var(--ease,ease);
	border:1.5px solid rgba(255,255,255,.4); color:#fff; padding:0;
}
.ar-featured-video:hover .ar-fv-play{ transform:translate(-50%,-50%) scale(1.12); background:var(--gold-500,#AB9671); border-color:var(--gold-500,#AB9671); }
.ar-fv-play svg{ width:34px; height:34px; fill:#fff; margin-inline-start:4px; }
.ar-fv-content{ position:relative; z-index:2; padding:38px 40px; width:100%; }
.ar-fv-meta{ display:flex; gap:14px; align-items:center; color:rgba(255,255,255,.65); font-size:13px; margin-bottom:14px; flex-wrap:wrap; }
.ar-fv-badge{ background:var(--emerald-700,#0B4A24); color:#fff; font-size:11.5px; font-weight:800; padding:5px 14px; border-radius:100px; }
.ar-fv-duration{ background:rgba(255,255,255,.15); padding:4px 12px; border-radius:100px; }
.ar-fv-content h2{ color:#fff; font-size:clamp(22px,2.4vw,30px); max-width:640px; margin:0; font-weight:800; }
.ar-fv-content p{ color:rgba(255,255,255,.65); font-size:14.5px; line-height:1.8; margin-top:12px; max-width:600px; }
.ar-fv-content .ar-btn{ margin-top:22px; pointer-events:none; }

.ar-video-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
@media (max-width:1024px){ .ar-video-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .ar-video-grid{ grid-template-columns:1fr; } }

.ar-video-card{
	border-radius:24px; overflow:hidden; background:#fff; box-shadow:var(--shadow-card,0 12px 40px -24px rgba(2,20,9,.28));
	cursor:pointer; transition:transform .45s var(--ease,ease), box-shadow .45s var(--ease,ease);
	border:0; padding:0; text-align:start; display:block; width:100%; font:inherit; color:inherit;
}
.ar-video-card[hidden]{ display:none !important; }
.ar-video-card:hover{ transform:translateY(-7px); box-shadow:var(--shadow-soft,0 24px 60px -28px rgba(2,20,9,.35)); }
.ar-vc-thumb{ position:relative; height:190px; overflow:hidden; background:#0c1a12; }
.ar-vc-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease,ease); }
.ar-vc-thumb-fallback{ width:100%; height:100%; background:linear-gradient(135deg,#054B21,#002F13); }
.ar-video-card:hover .ar-vc-thumb img{ transform:scale(1.08); }
.ar-vc-thumb::after{ content:''; position:absolute; inset:0; background:linear-gradient(0deg, rgba(2,15,8,.65) 0%, transparent 55%); }
.ar-vc-duration{ position:absolute; bottom:12px; inset-inline-end:12px; z-index:2; background:rgba(0,0,0,.6); color:#fff; font-size:11.5px; font-weight:700; padding:4px 10px; border-radius:6px; }
.ar-vc-cat{ position:absolute; top:12px; inset-inline-start:12px; z-index:2; background:rgba(255,255,255,.92); color:var(--emerald-700,#0B4A24); font-size:11px; font-weight:800; padding:5px 12px; border-radius:100px; }
.ar-vc-play{
	position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2;
	width:56px; height:56px; border-radius:50%; background:rgba(255,255,255,.2); backdrop-filter:blur(4px);
	display:flex; align-items:center; justify-content:center; transition:transform .35s var(--ease,ease), background .35s var(--ease,ease);
}
.ar-video-card:hover .ar-vc-play{ transform:translate(-50%,-50%) scale(1.15); background:var(--gold-500,#AB9671); }
.ar-vc-play svg{ width:20px; height:20px; fill:#fff; margin-inline-start:2px; }
.ar-vc-body{ padding:18px 20px 22px; }
.ar-video-card h4{ font-size:24px; color:var(--iron-900,#1A1A1A); line-height:1.4; margin:0 0 10px; min-height:68px; font-weight:700; }
.ar-vc-foot{ display:flex; justify-content:space-between; font-size:12px; color:var(--iron-500,#6B6B6B); gap:12px; }

.ar-related-carousel{ position:relative; width:100%; min-width:0; }
.ar-related-viewport{
	width:100%; min-width:0;
	overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory;
	scrollbar-width:none; -ms-overflow-style:none;
	-webkit-overflow-scrolling:touch;
}
.ar-related-viewport::-webkit-scrollbar{ display:none; }
.ar-related-viewport:focus{ outline:none; }
.ar-related-viewport:focus-visible{ outline:2px solid var(--gold-500,#AB9671); outline-offset:4px; border-radius:20px; }

.ar-related-slider{ display:flex; gap:22px; width:100%; min-width:0; padding-bottom:4px; }
.ar-related-slider .ar-video-card{
	flex:0 0 calc((100% - 66px) / 4); /* 4 items desktop, 3 gaps */
	min-width:0; scroll-snap-align:start; box-sizing:border-box;
}
@media (max-width:1100px){
	.ar-related-slider .ar-video-card{ flex-basis:calc((100% - 44px) / 3); }
}
@media (max-width:900px){
	.ar-related-slider .ar-video-card{ flex-basis:calc((100% - 22px) / 2); }
}
@media (max-width:640px){
	.ar-related-slider .ar-video-card{ flex-basis:85%; }
}

.ar-related-nav{
	display:flex; align-items:center; justify-content:center; gap:18px; margin-top:28px;
}
.ar-related-carousel.is-static .ar-related-nav{ display:none; }
.ar-related-arrow{
	width:44px; height:44px; border-radius:50%; padding:0; margin:0;
	border:1.5px solid rgba(11,74,36,.28); background:#fff; color:var(--emerald-700,#0B4A24);
	display:flex; align-items:center; justify-content:center;
	cursor:pointer; appearance:none; -webkit-appearance:none;
	box-shadow:var(--shadow-card,0 12px 40px -24px rgba(2,20,9,.28));
	transition:background .3s var(--ease,ease), border-color .3s var(--ease,ease), color .3s var(--ease,ease), opacity .3s var(--ease,ease);
}
.ar-related-arrow svg{ width:18px; height:18px; }
.ar-related-arrow:hover:not(:disabled){
	background:var(--emerald-700,#0B4A24); border-color:var(--emerald-700,#0B4A24); color:#fff;
}
.ar-related-arrow:disabled{ opacity:.35; cursor:default; }
.ar-related-dots{ display:flex; align-items:center; gap:8px; }
.ar-related-dot{
	width:8px; height:8px; padding:0; margin:0; border:0; border-radius:999px;
	background:rgba(11,74,36,.22); cursor:pointer;
	transition:width .25s var(--ease,ease), background .25s var(--ease,ease);
}
.ar-related-dot.active{ background:var(--gold-500,#AB9671); width:22px; }

@media (prefers-reduced-motion: reduce){
	.ar-related-viewport{ scroll-behavior:auto; }
	.ar-related-arrow, .ar-related-dot{ transition:none !important; }
}

.ar-videos-page .ar-divider{
	display:flex; align-items:center; gap:18px;
	max-width:var(--ar-content,1280px); margin:0 auto; padding-inline:var(--pad,24px);
}
.ar-videos-page .ar-divider span{
	flex:1; height:1px;
	background:linear-gradient(90deg, transparent, rgba(171,150,113,.55) 50%, transparent);
}
.ar-videos-page .ar-divider img{ width:13px; height:auto; opacity:.55; }

.ar-videos-cta{
	position:relative; overflow:hidden; border-radius:36px;
	background:linear-gradient(125deg, var(--emerald-700,#0B4A24) 0%, var(--emerald-900,#002F13) 75%);
	padding:64px var(--pad,24px); text-align:center;
}
.ar-cta-pattern{
	position:absolute; inset:0; pointer-events:none; z-index:0;
	background-repeat:repeat; background-size:80px 78px; opacity:.05;
}
.ar-videos-cta h2{ position:relative; z-index:1; color:#fff; font-size:clamp(34px,4vw,52px); margin:0; font-weight:800; font-family:var(--ar-font-heading); }
.ar-videos-cta p{ position:relative; z-index:1; color:rgba(255,255,255,.65); margin-top:14px; }
.ar-videos-cta .ar-btn{ position:relative; z-index:1; margin-top:26px; }

.ar-videos-empty{ text-align:center; color:var(--iron-500,#6B6B6B); font-size:15px; padding:48px 16px; }

/* Modal — title/share above player, related videos in a horizontal row below */
.ar-video-modal-overlay{
	position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center; padding:24px;
	background:rgba(2,10,5,.9); backdrop-filter:blur(10px);
}
.ar-video-modal-overlay[hidden]{ display:none !important; }
.ar-video-modal-box{
	display:flex; flex-direction:column; gap:0; width:100%; max-width:960px;
	background:#0c1a12; border-radius:24px; overflow:hidden;
	box-shadow:0 40px 90px -30px rgba(0,0,0,.6); max-height:92vh; position:relative;
}
.ar-vm-top{
	display:flex; align-items:flex-start; justify-content:space-between; gap:16px 24px;
	padding:22px 56px 16px 24px; color:#fff; flex-shrink:0;
}
.ar-vm-heading{ min-width:0; flex:1; }
.ar-vm-heading h5{
	color:#fff; font-size:clamp(17px,2.2vw,22px); margin:0 0 6px; font-weight:800;
	line-height:1.35; text-wrap:balance;
}
.ar-vm-heading p{
	color:rgba(255,255,255,.6); font-size:13.5px; line-height:1.7; margin:0;
	display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.ar-vm-heading p:empty{ display:none; }
.ar-vm-share{
	display:inline-flex; align-items:center; gap:8px; flex-shrink:0; margin-top:2px;
	color:var(--gold-300,#CBBA9C); font-size:13px; font-weight:700;
	background:rgba(255,255,255,.06); border:1px solid rgba(203,186,156,.28);
	border-radius:999px; cursor:pointer; padding:8px 14px; font:inherit;
	transition:background .25s ease, border-color .25s ease;
}
.ar-vm-share:hover{ background:rgba(255,255,255,.1); border-color:rgba(203,186,156,.5); }
.ar-vm-share svg{ width:16px; height:16px; }
.ar-vm-player{
	position:relative; background:#000; display:flex; align-items:center; justify-content:center;
	aspect-ratio:16/9; width:100%; flex-shrink:0;
}
.ar-vm-player video{ width:100%; height:100%; object-fit:contain; background:#000; }
.ar-vm-player img{ width:100%; height:100%; object-fit:cover; opacity:.55; }
.ar-vm-player .ar-fv-play{ width:80px; height:80px; }
.ar-vm-close{
	position:absolute; top:16px; inset-inline-end:16px; z-index:5; width:40px; height:40px; border-radius:50%;
	background:rgba(255,255,255,.14); display:flex; align-items:center; justify-content:center; color:#fff; border:0; cursor:pointer;
}
.ar-vm-close:hover{ background:rgba(255,255,255,.28); }
.ar-vm-close svg{ width:18px; height:18px; }

@media (max-width:768px){
	.ar-video-modal-overlay{ padding:12px; align-items:flex-end; }
	.ar-video-modal-box{ max-height:94vh; border-radius:20px 20px 12px 12px; }
	.ar-vm-top{
		flex-direction:column; align-items:stretch; gap:12px;
		padding:18px 52px 12px 16px;
	}
	.ar-vm-share{ align-self:flex-start; }
	.ar-fv-content{ padding:28px 22px; }
	.ar-fv-play{ width:72px; height:72px; }
}

body.ar-video-modal-open{ overflow:hidden; }

@media (prefers-reduced-motion: reduce){
	.ar-featured-video img, .ar-video-card, .ar-vc-thumb img, .ar-fv-play, .ar-vc-play{ transition:none !important; }
	.ar-featured-video:hover img, .ar-video-card:hover{ transform:none; }
}