/**
 * Section: Publish / Promote / Sell (Figma "macro features" 10521:30030).
 *
 * A white panel with scalloped edges and a dashed centre line; the product
 * screenshot stays pinned while three dark tickets scroll over it.
 */

.hb-section.hb-section--stop {
	--hb-stop-pitch: 140.69px;
	--hb-stop-bite-x: 54.71px;
	--hb-stop-bite-y: 53.22px;
	--hb-stop-phase: 67.22px;
	--hb-stop-screens-top: -273px;
	--hb-stop-frame-pad: 210px 107px 40px;
	--hb-stop-screen-width: 799px;
	position: relative;
	z-index: 1;
	display: flow-root;
	margin-top: var(--wp--preset--spacing--80);
	padding: 0;
}

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

/* Stickers hanging beside the hero buttons. */
.hb-stop__sticker.hb-stop__sticker {
	position: absolute;
	z-index: 3;
}

.hb-stop__sticker--seopress.hb-sticker--seopress {
	--hb-sticker-rotate: -10deg;
	top: -9.4rem;
	left: max(1rem, calc(50% - 40.55rem));
}

.hb-stop__sticker--trusted.hb-sticker--trusted {
	--hb-sticker-rotate: 4deg;
	top: -9.6rem;
	left: min(calc(100% - 16.25rem), calc(50% + 25.8rem));
}

/* White panel. */
.hb-section--stop > .hb-stop__panel.hb-stop__panel {
	position: relative;
	margin-top: 4.875rem;
	padding: 30rem 0 10.25rem;
}

.hb-stop__panel.hb-stop__panel > * {
	position: relative;
	z-index: 1;
	margin-block: 0;
}

.hb-stop__panel::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-color: var(--wp--preset--color--base);
	-webkit-mask:
		radial-gradient(var(--hb-stop-bite-x) var(--hb-stop-bite-y) at 50% 0, #0000 99%, #000 100%) calc(50% - var(--hb-stop-phase)) 0 / var(--hb-stop-pitch) 51% repeat-x,
		radial-gradient(var(--hb-stop-bite-x) var(--hb-stop-bite-y) at 50% 100%, #0000 99%, #000 100%) calc(50% - var(--hb-stop-phase)) 100% / var(--hb-stop-pitch) 51% repeat-x;
	mask:
		radial-gradient(var(--hb-stop-bite-x) var(--hb-stop-bite-y) at 50% 0, #0000 99%, #000 100%) calc(50% - var(--hb-stop-phase)) 0 / var(--hb-stop-pitch) 51% repeat-x,
		radial-gradient(var(--hb-stop-bite-x) var(--hb-stop-bite-y) at 50% 100%, #0000 99%, #000 100%) calc(50% - var(--hb-stop-phase)) 100% / var(--hb-stop-pitch) 51% repeat-x;
}

/* Dashed centre line: cream dashes drawn on the white panel. */
.hb-stop__panel::after {
	content: "";
	position: absolute;
	top: 6.6875rem;
	bottom: 20rem;
	left: calc(50% - 2px);
	z-index: 0;
	width: 4px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='112.2'%3E%3Crect width='4' height='57.04' rx='2' fill='%23f9f4ed'/%3E%3C/svg%3E") 0 -26.52px / 4px 112.2px repeat-y;
}

/* Pinned product screenshot. */
.hb-stop__panel > .hb-stop__screens.hb-stop__screens {
	position: absolute;
	top: var(--hb-stop-screens-top);
	bottom: 15.75rem;
	left: 50%;
	width: min(calc(var(--hb-stop-screen-width) + 214px), 100%);
	transform: translateX(-50%);
	pointer-events: none;
}

.hb-stop__frame.hb-stop__frame {
	position: sticky;
	top: 0;
	display: grid;
	padding: var(--hb-stop-frame-pad);
}

.hb-stop__screen.hb-stop__screen {
	grid-area: 1 / 1;
	margin: 0;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.hb-stop__screen.is-active {
	opacity: 1;
}

.hb-stop__screen img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 799 / 473;
}

/* Tickets. The shadow sits on the column because the ticket mask would clip it. */
.hb-stop__tickets.hb-stop__tickets {
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 22.5rem;
	filter: drop-shadow(40px 64px 32px rgb(173 173 173 / 0.16));
}

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

.hb-stop__ticket.hb-stop__ticket {
	width: 17.5rem;
	margin-left: max(var(--hb-gutter), calc(50% - 35.625rem));
}

.hb-stop__ticket.hb-stop__ticket:nth-child(2) {
	margin-left: min(calc(100% - 17.5rem - var(--hb-gutter)), calc(50% + 18.125rem));
}

.hb-stop__cta.hb-stop__cta {
	gap: var(--wp--preset--spacing--40);
	margin-top: 39.75rem;
}

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

@media (max-width: 1199.98px) {
	.hb-stop__sticker.hb-stop__sticker {
		display: none;
	}
}

@media (max-width: 1023.98px) {
	.hb-section.hb-section--stop {
		--hb-stop-screen-width: 640px;
		--hb-stop-screens-top: -16rem;
		--hb-stop-frame-pad: 13rem 24px 24px;
	}

	.hb-stop__ticket.hb-stop__ticket,
	.hb-stop__ticket.hb-stop__ticket:nth-child(2) {
		margin-left: max(1.5rem, calc(50% - 22rem));
	}

	.hb-stop__ticket.hb-stop__ticket:nth-child(2) {
		margin-left: auto;
		margin-right: max(1.5rem, calc(50% - 22rem));
	}
}

@media (max-width: 781.98px) {
	.hb-section.hb-section--stop {
		--hb-stop-pitch: 81px;
		--hb-stop-bite-x: 31.5px;
		--hb-stop-bite-y: 30.64px;
		--hb-stop-phase: 38.7px;
		--hb-stop-screens-top: -26.6rem;
		--hb-stop-frame-pad: 20.4rem 24px 1rem;
		--hb-stop-screen-width: 327px;
	}

	.hb-section--stop > .hb-stop__panel.hb-stop__panel {
		margin-top: 4.5rem;
		padding: 29.2rem 0 6rem;
	}

	.hb-stop__tickets.hb-stop__tickets {
		gap: 29.375rem;
	}

	.hb-stop__ticket.hb-stop__ticket,
	.hb-stop__ticket.hb-stop__ticket:nth-child(2) {
		margin-inline: auto;
	}

	.hb-stop__ticket .hb-ticket__text {
		font-size: var(--wp--preset--font-size--medium);
		line-height: 1.25;
	}

	.hb-stop__cta.hb-stop__cta {
		margin-top: 20rem;
	}
}