/* DH cascading ad.
   Default state is a plain, static ad. The parallax "window" is applied only
   after the runtime probe in cascading-ad.js confirms the browser clips a
   fixed descendant without making the ancestor its containing block. */

.dh-cad{
	--dh-cad-height:92dvh;
	--dh-cad-bleed:20px;
	--dh-cad-breakpoint:768px;
	margin:1.8em 0;
}

.dh-cad__window{position:relative;}

.dh-cad__layer img{
	display:block;
	width:100%;
	height:auto;
}

.dh-cad__layer a{
	display:block;
	border-bottom:0 !important;
}

.dh-cad__label{
	background:#000;
	color:#fff;
	text-align:center;
	font-size:11px;
	font-weight:600;
	letter-spacing:1px;
	text-transform:uppercase;
	padding:2px 15px;
	position:relative;
	z-index:3;
	line-height:1.8;
	margin:0 !important;
}

/* --- Enhanced state -------------------------------------------------- */

.dh-cad.is-parallax .dh-cad__window{
	height:var(--dh-cad-height);
	background:#000;
	overflow:hidden;              /* clips the non-fixed fallback image */
	clip-path:inset(0);           /* clips the fixed layer, without becoming
	                                 its containing block */
}

.dh-cad.is-parallax .dh-cad__layer{
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	display:flex;
	align-items:center;
	justify-content:center;
	visibility:hidden;            /* safety net — see JS */
}

.dh-cad.is-parallax.is-visible .dh-cad__layer{visibility:visible;}

.dh-cad.is-parallax .dh-cad__layer img{
	max-width:100%;
	max-height:100%;
	width:auto;
	object-fit:contain;
}

/* Edge-to-edge inside a padded container. */
.dh-cad.is-parallax{
	margin-left:calc(var(--dh-cad-bleed) * -1);
	margin-right:calc(var(--dh-cad-bleed) * -1);
}

.dh-cad.is-parallax .dh-cad__label{
	margin-left:0 !important;
	margin-right:0 !important;
}

/* --- Mobile only ------------------------------------------------------ */

@media (min-width:769px){
	.dh-cad--mobile-only{display:none !important;}
}

@media (prefers-reduced-motion:reduce){
	.dh-cad.is-parallax .dh-cad__window{height:auto;clip-path:none;}
	.dh-cad.is-parallax .dh-cad__layer{position:static;visibility:visible;}
	.dh-cad.is-parallax{margin-left:0;margin-right:0;}
}
