/*
 * Downhome Hero. The theme fixes the slider at 500 px and crops every slide to fill it (object-fit: cover).
 * Here every slide shows whole: the frame takes the slides' own shape (2560 x 922), capped at 80% of the
 * screen's height, and any space around a slide is filled with a blurred copy of the same slide.
 * Below 1024 px (phones and tablets) each slide shows full width at its own shape, without its heading and
 * button: the picture itself opens the button's link. See the last two blocks.
 */

.hero-container.dh-hero,
.hero-container.dh-hero .slide-wrapper .hero-slide {
	height: auto;
}

/* Until Slick has started, show only the first slide. Otherwise every slide shows, stacked, for a moment.
   The arrows are in the page from the start but the dots only come with Slick, so the arrows wait too: hidden,
   not removed, so their row keeps its space and nothing moves when they appear. */
.hero-container.dh-hero .slide-wrapper:not(.slick-initialized) .hero-slide ~ .hero-slide {
	display: none;
}

.hero-container.dh-hero .slide-wrapper:not(.slick-initialized) ~ .hero-nav-container {
	visibility: hidden;
}

.hero-container.dh-hero .slide-wrapper .hero-slide .dh-hero-frame {
	position: relative;
	overflow: hidden;
	width: 100%;
	aspect-ratio: 2560 / 922;
	max-height: 80vh;
	background: #303030;
}

.hero-container.dh-hero .slide-wrapper .hero-slide .dh-hero-frame::before {
	content: "";
	position: absolute;
	inset: -10%;
	background: var(--dh-hero-fill) center / cover no-repeat;
	filter: blur(28px);
	opacity: 0.8;
}

.hero-container.dh-hero .slide-wrapper .hero-slide .dh-hero-frame picture {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
}

.hero-container.dh-hero .slide-wrapper .hero-slide .dh-hero-frame img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* The picture as a link: only below 1024 px, where the slide's button isn't shown. */
.hero-container.dh-hero .slide-wrapper .hero-slide .dh-hero-tap {
	display: none;
}

/* Phones and tablets, as Vince asked: each slide shows full width at its own shape, with nothing around it.
   Its heading and button are left off, and the picture opens the button's link. The slider fits whichever slide
   is showing (Slick's adaptiveHeight, switched on in dh-hero.js), and the dots get their own row under it. */
@media (max-width: 1023px) {
	.hero-container.dh-hero .slide-wrapper .hero-slide .dh-hero-frame {
		aspect-ratio: var(--dh-ratio, 2560 / 922);
		max-height: none;
	}

	.hero-container.dh-hero .slide-wrapper .hero-slide .hero-caption-container {
		display: none;
	}

	.hero-container.dh-hero .slide-wrapper .hero-slide .dh-hero-tap {
		display: block;
		position: absolute;
		inset: 0;
		z-index: 1;
	}

	.hero-container.dh-hero .hero-nav-container {
		position: static;
	}

	.hero-container.dh-hero .hero-nav-container .hero-navigation {
		position: static;
		justify-content: center;
		transform: none;
		padding: 10px 0 4px;
	}

	.hero-container.dh-hero .hero-nav-container .hero-navigation .left-arrow,
	.hero-container.dh-hero .hero-nav-container .hero-navigation .right-arrow {
		color: #303030;
	}

	.hero-container.dh-hero .hero-nav-container .hero-navigation .navi-dots ul.slick-dots li {
		border-color: #303030;
	}

	.hero-container.dh-hero .hero-nav-container .hero-navigation .navi-dots ul.slick-dots .slick-active {
		background: #303030;
	}

	/* The theme keeps 80 px above the counters section, meant for under its 500 px slider. Under the short
	   slider and its row of dots, that's an empty band, so close it up when the counters come straight after. */
	.hero-container.dh-hero + .counters-section {
		margin-top: 20px;
	}
}

/* Phones only: a slide's phone picture, at its own shape. */
@media (max-width: 599px) {
	.hero-container.dh-hero .slide-wrapper .hero-slide.dh-has-phone .dh-hero-frame {
		aspect-ratio: var(--dh-phone-ratio, 1 / 1);
	}
}