/**
 * Section: demo tour (Figma component 10627:5659): a head row, a video poster
 * and product screenshots on a track that keeps the current slide centred
 * with its neighbours peeking out, then the thumbnails between two arrows.
 */

.hb-section.hb-section--demo {
	/* Width of the centred slide: 1090px, the screenshots 1035px. */
	--hb-demo-w: min(68.125rem, 100cqw - 2 * var(--hb-gutter));
	--hb-demo-shot-w: calc(var(--hb-demo-w) * 1035 / 1090);
	--hb-demo-gap: var(--wp--preset--spacing--50);
	container-type: inline-size;
	margin-top: var(--wp--preset--spacing--90);
}

.hb-section.hb-section--demo > * {
	margin-block: 0;
}

/* The section spans the viewport (its width is the container width); the
 * head and the thumbnails line up with the centred slide. */
.hb-section.hb-section--demo > :is(.hb-demo__head, .hb-demo__select) {
	max-width: var(--hb-demo-w);
	margin-inline: auto;
}

/* Head: title and introduction, the button at the end of the row. */
.hb-demo__head.hb-demo__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--50);
}

.hb-demo__head.hb-demo__head > * {
	margin: 0;
}

.hb-demo__intro.hb-demo__intro {
	max-width: 40.125rem;
}

.hb-demo__intro.hb-demo__intro > * {
	margin: 0;
}

.hb-demo__intro h2 {
	letter-spacing: -0.025em;
	line-height: 1;
}

.hb-demo__intro p {
	margin-top: var(--wp--preset--spacing--30) !important;
	letter-spacing: -0.04em;
	line-height: 1.3;
}

/* Track: the slides scroll and snap to the middle; the padding centres the
 * first and last ones. */
.hb-demo__track.hb-demo__track {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: var(--hb-demo-gap);
	margin-top: var(--wp--preset--spacing--70) !important;
	padding-inline: calc((100cqw - var(--hb-demo-w)) / 2);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.hb-demo__track::-webkit-scrollbar {
	display: none;
}

/* The screenshot before the first slide, as on the design. */
.hb-demo__track.hb-demo__track::before {
	content: "";
	box-sizing: border-box;
	position: absolute;
	top: 0;
	left: calc((100cqw - var(--hb-demo-w)) / 2 - var(--hb-demo-gap) - var(--hb-demo-shot-w));
	width: var(--hb-demo-shot-w);
	aspect-ratio: 1035 / 613;
	border: 2px solid var(--wp--preset--color--contrast);
	border-radius: var(--wp--custom--radius--md);
	background: url("../../images/home/screen-calendar.webp") 38.2% 52.3% / 101.31% 102.68% no-repeat;
}

.hb-demo__track.hb-demo__track > * {
	flex: none;
	margin: 0;
	scroll-snap-align: center;
}

/* Screenshots (Figma "screen", 1035 x 613). */
.hb-demo__shot.hb-demo__shot {
	box-sizing: border-box;
	position: relative;
	width: var(--hb-demo-shot-w);
	aspect-ratio: 1035 / 613;
	overflow: hidden;
	border: 2px solid var(--wp--preset--color--contrast);
	border-radius: var(--wp--custom--radius--md);
}

.hb-demo__shot img,
.hb-demo__screen img {
	position: absolute;
	top: -1.4%;
	left: -0.5%;
	width: 101.31%;
	max-width: none;
	height: 102.68%;
	object-fit: cover;
	object-position: 0 0;
}

/* Video poster (Figma "player", 1090 x 613), laid out in container units so
 * it keeps its composition at any width. */
.hb-demo__player.hb-demo__player {
	container-type: inline-size;
	position: relative;
	width: var(--hb-demo-w);
	aspect-ratio: 1090 / 613;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--md);
	background-color: #30211a;
}

.hb-demo__cover.hb-demo__cover {
	position: absolute;
	inset: 0;
	opacity: 0.64;
}

.hb-demo__cover.hb-demo__cover > * {
	position: absolute;
	margin: 0;
}

.hb-demo__texture.hb-demo__texture {
	inset: 0;
}

.hb-demo__texture img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hb-demo__screen.hb-demo__screen {
	box-sizing: border-box;
	top: 4.967cqw;
	left: 50cqw;
	width: 80.734cqw;
	height: 47.798cqw;
	overflow: hidden;
	border: 2px solid var(--wp--preset--color--contrast);
	border-radius: 0.917cqw;
}

.hb-demo__logo.hb-demo__logo {
	top: 15.334cqw;
	left: 9.633cqw;
	width: 10.826cqw;
}

.hb-demo__logo img {
	display: block;
	width: 100%;
	height: auto;
}

.hb-demo__caption.hb-demo__caption {
	top: 21.756cqw;
	left: 9.633cqw;
	width: 25.321cqw;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 5.505cqw;
	font-weight: 400;
	letter-spacing: -0.045em;
	line-height: 0.9;
}

.hb-demo__play {
	position: absolute;
	top: calc(50% + 0.5px);
	left: 50%;
	display: grid;
	place-items: center;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: var(--wp--custom--radius--sm);
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--border);
	transform: translate(-50%, -50%);
	transition: background-color var(--wp--custom--transition), color var(--wp--custom--transition);
}

.hb-demo__play::before {
	content: "";
	width: 1.5rem;
	height: 1.5rem;
	background-color: currentColor;
	-webkit-mask: url("../../icons/play-large-line.svg") center / contain no-repeat;
	mask: url("../../icons/play-large-line.svg") center / contain no-repeat;
}

.hb-demo__play:hover,
.hb-demo__play:focus-visible {
	background-color: var(--wp--preset--color--primary-hover);
	color: var(--wp--preset--color--base);
}

/* Thumbnails between the arrows. */
.hb-demo__select {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--hb-demo-gap);
	margin-top: var(--wp--preset--spacing--70) !important;
}

.hb-demo__thumbs {
	display: flex;
	gap: var(--hb-demo-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hb-demo__thumbs li {
	margin: 0;
}

.hb-demo__thumbs a {
	box-sizing: border-box;
	display: block;
	width: 5.5rem;
	height: 5.5rem;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--sm);
	opacity: 0.4;
	transition: opacity var(--wp--custom--transition);
}

.hb-demo__thumbs a:hover,
.hb-demo__thumbs a:focus-visible {
	opacity: 0.7;
}

.hb-demo__thumbs a[aria-current="true"] {
	border: 2px solid var(--wp--preset--color--contrast);
	opacity: 1;
}

.hb-demo__thumbs img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 0 0;
}

.hb-demo__arrow {
	display: grid;
	flex: none;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 0;
	border-radius: var(--wp--custom--radius--sm);
	background: transparent;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	transition: opacity var(--wp--custom--transition);
}

.hb-demo__arrow::before {
	content: "";
	width: 1.5rem;
	height: 1.5rem;
	background-color: currentColor;
	-webkit-mask: var(--hb-arrow) center / contain no-repeat;
	mask: var(--hb-arrow) center / contain no-repeat;
}

.hb-demo__arrow--prev { --hb-arrow: url("../../icons/arrow-left-line.svg"); }
.hb-demo__arrow--next { --hb-arrow: url("../../icons/arrow-right-line.svg"); }

.hb-demo__arrow[hidden] {
	display: none;
}

.hb-demo__arrow:hover {
	opacity: 0.7;
}

@media (max-width: 781.98px) {
	.hb-demo__head.hb-demo__head {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media (max-width: 599.98px) {
	.hb-section.hb-section--demo {
		--hb-demo-gap: var(--wp--preset--spacing--30);
	}

	.hb-demo__play {
		width: 2.75rem;
		height: 2.75rem;
	}

	/* Swiping replaces the arrows; the thumbnails shrink to fit. */
	.hb-demo__arrow:not([hidden]) {
		display: none;
	}

	.hb-demo__thumbs {
		gap: var(--wp--preset--spacing--20);
	}

	.hb-demo__thumbs a {
		width: 2.75rem;
		height: 2.75rem;
	}
}