/* ==========================================================================
   yoga-videos.css – Homepage "Yoga in the Himalayas" video strip
   Four 4:5 video tiles; each has its own colour (--v) on hover.
   Loaded on the homepage only.
   ========================================================================== */

.dp-yoga-videos {
	position: relative; overflow: hidden; isolation: isolate;
	background: linear-gradient(180deg, #1a1d3f 0%, var(--dp-primary) 50%, #14173a 100%);
	color: rgba(255, 255, 255, .75);
}
.dp-yoga-videos__bg { /* soft mountain ridge silhouettes */
	position: absolute; inset: auto 0 0 0; height: 55%; z-index: -1; opacity: .5;
	background:
		radial-gradient(ellipse 60% 70% at 20% 100%, rgba(242, 184, 97, .12), transparent 70%),
		radial-gradient(ellipse 50% 60% at 85% 100%, rgba(123, 75, 179, .18), transparent 70%);
}
.dp-yoga-videos::before { /* distant ridge line */
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 160px; z-index: -1;
	background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .25));
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 160' preserveAspectRatio='none'%3E%3Cpath d='M0 160V95l120-40 110 50 150-80 130 60 120-45 140 70 160-90 150 75 130-45 130 55V160z'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 160' preserveAspectRatio='none'%3E%3Cpath d='M0 160V95l120-40 110 50 150-80 130 60 120-45 140 70 160-90 150 75 130-45 130 55V160z'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
}
.dp-yoga-videos .dp-title { color: var(--dp-white); }
.dp-yoga-videos .dp-lead { color: rgba(255, 255, 255, .72); }

.dp-yoga-videos__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.dp-yoga-clip { transition-delay: var(--d); }
.dp-yoga-clip:nth-child(even) { margin-top: 40px; } /* staggered heights */
.dp-yoga-clip a {
	position: relative; display: block; overflow: hidden; isolation: isolate; aspect-ratio: 4 / 5;
	border-radius: 24px; background: #0f1128; color: #fff;
	box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7);
	transition: transform .5s var(--dp-ease), box-shadow .5s;
}
.dp-yoga-clip video { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--dp-ease); }
.dp-yoga-clip a::before { /* dark fade for the caption */
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(180deg, rgba(15, 17, 40, 0) 45%, rgba(15, 17, 40, .88));
}
.dp-yoga-clip a::after { /* colour ring on hover */
	content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
	box-shadow: inset 0 0 0 0 var(--v); transition: box-shadow .4s;
}
.dp-yoga-clip a:hover,
.dp-yoga-clip a:focus-visible { transform: translateY(-8px); box-shadow: 0 36px 60px -26px var(--v); }
.dp-yoga-clip a:hover::after,
.dp-yoga-clip a:focus-visible::after { box-shadow: inset 0 0 0 3px var(--v); }
.dp-yoga-clip a:hover video { transform: scale(1.06); }

.dp-yoga-clip__live {
	position: absolute; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 6px;
	padding: 5px 11px; border-radius: 999px; background: rgba(15, 17, 40, .5);
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
	font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.dp-yoga-clip__live span { width: 7px; height: 7px; border-radius: 50%; background: #3ddc84; animation: dp-yv-pulse 1.8s infinite; }
@keyframes dp-yv-pulse { 0% { box-shadow: 0 0 0 0 rgba(61, 220, 132, .6); } 70%, 100% { box-shadow: 0 0 0 7px rgba(61, 220, 132, 0); } }

.dp-yoga-clip__body { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 6px; padding: 22px; }
.dp-yoga-clip__title { font-family: var(--dp-font-head); font-size: 26px; font-weight: 700; line-height: 1.1; }
.dp-yoga-clip__title::after { content: ""; display: block; width: 30px; height: 3px; margin-top: 8px; border-radius: 3px; background: var(--v); transition: width .45s var(--dp-ease); }
.dp-yoga-clip a:hover .dp-yoga-clip__title::after { width: 64px; }
.dp-yoga-clip__text { font-size: 14px; line-height: 1.55; color: rgba(255, 255, 255, .82); }
.dp-yoga-clip__more {
	display: inline-flex; align-items: center; gap: 6px; margin-top: 4px;
	font-size: 13.5px; font-weight: 800; color: var(--dp-accent-2);
	max-height: 0; opacity: 0; overflow: hidden; transition: max-height .4s var(--dp-ease), opacity .4s;
}
.dp-yoga-clip__more .dp-icon { width: 16px; height: 16px; }
.dp-yoga-clip a:hover .dp-yoga-clip__more,
.dp-yoga-clip a:focus-visible .dp-yoga-clip__more { max-height: 30px; opacity: 1; }

@media (hover: none) {
	.dp-yoga-clip__more { max-height: none; opacity: 1; }
}
@media (max-width: 1024px) {
	.dp-yoga-videos__grid { grid-template-columns: repeat(2, 1fr); }
	.dp-yoga-clip:nth-child(even) { margin-top: 0; }
}
@media (max-width: 560px) {
	.dp-yoga-videos__grid { gap: 12px; }
	.dp-yoga-clip a { border-radius: 18px; }
	.dp-yoga-clip__body { padding: 14px; }
	.dp-yoga-clip__title { font-size: 20px; }
	.dp-yoga-clip__text { display: none; }
	.dp-yoga-clip__live { top: 10px; left: 10px; font-size: 9.5px; }
}
@media (prefers-reduced-motion: reduce) {
	.dp-yoga-clip__live span { animation: none; }
}