/*
 * Front-end only (not loaded in the block editor, where the slides stay listed one
 * under another so each can be edited).
 *
 * The hero: a wide, rounded photo panel. Works for the block version
 * (.dangelo-slideshow with cover blocks) and the Elementor widget (.dgl-hero).
 * assets/js/theme.js animates it with GSAP. Without JavaScript the first slide shows.
 */

.dangelo-hero-section,
.dgl-hero-wrap {
	padding-top: 0.75rem;
}

.dgl-hero-wrap {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: var(--wp--custom--gutter);
	box-sizing: content-box;
}

.dangelo-slideshow,
.dgl-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--card);
	background: #000;
	color: #fff;
	aspect-ratio: 4 / 5;
	margin-block: 0;
}

@media (min-width: 600px) {
	.dangelo-hero-section,
	.dgl-hero-wrap {
		padding-top: 1.25rem;
	}

	.dangelo-slideshow,
	.dgl-hero {
		aspect-ratio: 16 / 10;
	}
}

@media (min-width: 1024px) {
	.dangelo-slideshow,
	.dgl-hero {
		aspect-ratio: 21 / 9;
	}
}

.dangelo-slideshow > .wp-block-cover,
.dgl-hero .dgl-hero__slide {
	position: absolute;
	inset: 0;
	margin: 0 !important;
	min-height: 0 !important;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem 1.5rem 4.5rem;
	border-radius: 0;
}

.dangelo-slideshow > .wp-block-cover:not(:first-child),
.dgl-hero .dgl-hero__slide:not(:first-child) {
	visibility: hidden;
	opacity: 0;
}

.dgl-hero .dgl-hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
	overflow: hidden;
}

.dangelo-slideshow .wp-block-cover__image-background,
.dgl-hero .dgl-hero__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transform: scale(1.08);
	will-change: transform;
}

.dgl-hero .dgl-hero__shade,
.dangelo-slideshow .wp-block-cover__background {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.25) 55%, rgba(0, 0, 0, 0.2)) !important;
	opacity: 1 !important;
}

.dangelo-slideshow .wp-block-cover__inner-container,
.dgl-hero .dgl-hero__content {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 64rem;
	margin: 0 auto;
	padding: 0;
	text-align: center;
	color: #fff;
}

.dangelo-slideshow h1,
.dangelo-slideshow h2,
.dgl-hero .dgl-hero__title {
	max-width: 16ch;
	margin: 0 auto;
	color: #fff;
	font-size: var(--wp--preset--font-size--display);
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

.dangelo-slideshow .wp-block-buttons,
.dgl-hero .dgl-hero__actions {
	margin-top: 1.75rem;
	justify-content: center;
}

/* Words of a headline, split by the script so they can rise one by one. */
.dgl-word {
	display: inline-block;
	overflow: hidden;
	padding-bottom: 0.1em;
	vertical-align: top;
}

.dgl-word > span {
	display: inline-block;
	will-change: transform;
}

/* Controls, added by the script: pause, progress dots, arrows. */
.dgl-hero__controls {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	z-index: 5;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem;
	pointer-events: none;
}

.dgl-hero__controls > * {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	pointer-events: auto;
}

.dgl-hero__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.15);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
	color: #fff;
	backdrop-filter: blur(4px);
	cursor: pointer;
	transition: background-color 200ms, color 200ms;
}

.dgl-hero__btn:hover {
	background: #fff;
	color: #000;
}

.dgl-hero__dots {
	display: flex;
	gap: 0 !important;
}

.dgl-hero__dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.dgl-hero__dot > span {
	position: relative;
	display: block;
	width: 1.75rem;
	height: 2px;
	overflow: hidden;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.35);
}

.dgl-hero__dot > span > span {
	position: absolute;
	inset: 0;
	background: #fff;
	transform: scaleX(0);
	transform-origin: left;
}

@media (min-width: 782px) {
	.dgl-hero__controls {
		padding: 1.5rem;
	}

	.dgl-hero__dot {
		width: 3.5rem;
	}

	.dgl-hero__dot > span {
		width: 2.75rem;
	}
}

@media (max-width: 599px) {
	.dgl-hero__arrows {
		display: none !important;
	}
}