/**
 * Section: key figures (Figma "data" 10535:27446): top of the white ticket
 * panel, a bowl notch in its top edge and five rotated stickers.
 */

.hb-section.hb-section--stats {
	position: relative;
	z-index: 1;
	margin-top: var(--wp--preset--spacing--90);
	padding: 3rem 0 0;
}

/* A solution page has no room above the ticket (Figma Solution / Single
 * 10535:27473: the band is the ticket alone, 362 tall). */
.single-solution .hb-section.hb-section--stats {
	padding-top: 0;
}

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

.hb-stats.hb-stats {
	position: relative;
	height: 22.625rem;
	background:
		url("../../images/shapes/data-bg-ticket-top.svg") center top / 1440.04px 361.645px no-repeat,
		linear-gradient(var(--wp--preset--color--base), var(--wp--preset--color--base)) left top / calc(50% - 719px) 100% no-repeat,
		linear-gradient(var(--wp--preset--color--base), var(--wp--preset--color--base)) right top / calc(50% - 719px) 100% no-repeat;
}

.hb-stats.hb-stats > .hb-stat {
	position: absolute;
	margin: 0;
}

.hb-stat .hb-stat__num {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--display-2);
	font-weight: 400;
	letter-spacing: -0.0625em;
	line-height: 0.875;
	white-space: nowrap;
}

.hb-stat .hb-stat__label {
	margin: 0;
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--medium);
	letter-spacing: -0.05rem;
	line-height: 1.25;
	white-space: nowrap;
}

.is-style-sticker.hb-stat {
	gap: 0.75rem;
	justify-content: flex-start;
	padding-top: 1.875rem;
}

/* Perforated stickers: a 180px column with stamp notches on both short edges. */
.is-style-sticker.hb-sticker--perforated {
	--hb-notch: 8.985px;
	--hb-pitch: 23.1px;
	width: 11.25rem;
	aspect-ratio: 180 / 150.23;
	padding-top: 2.2rem;
	-webkit-mask:
		radial-gradient(circle at 50% 0, #0000 var(--hb-notch), #000 calc(var(--hb-notch) + 0.5px)) top / var(--hb-pitch) 51% repeat-x,
		radial-gradient(circle at 50% 100%, #0000 var(--hb-notch), #000 calc(var(--hb-notch) + 0.5px)) bottom / var(--hb-pitch) 51% repeat-x;
	mask:
		radial-gradient(circle at 50% 0, #0000 var(--hb-notch), #000 calc(var(--hb-notch) + 0.5px)) top / var(--hb-pitch) 51% repeat-x,
		radial-gradient(circle at 50% 100%, #0000 var(--hb-notch), #000 calc(var(--hb-notch) + 0.5px)) bottom / var(--hb-pitch) 51% repeat-x;
}

/* Desktop composition (positions from the 1440 frame, expressed in % so it
 * keeps its proportions down to 1100px). */
@media (min-width: 1100px) {
	.hb-stats.hb-stats {
		max-width: 90rem;
		margin-inline: auto;
	}

	/* Beyond 1440px the white panel carries on to the screen edges. */
	.hb-section.hb-section--stats::before {
		content: "";
		position: absolute;
		top: 3rem;
		right: 0;
		left: 0;
		height: 22.625rem;
		background:
			linear-gradient(var(--wp--preset--color--base), var(--wp--preset--color--base)) left top / calc(50% - 45rem + 1px) 100% no-repeat,
			linear-gradient(var(--wp--preset--color--base), var(--wp--preset--color--base)) right top / calc(50% - 45rem + 1px) 100% no-repeat;
		pointer-events: none;
	}

	.hb-stat--beige.hb-stat--beige {
		--hb-sticker-rotate: 4deg;
		top: -4.05rem;
		left: 6.108%;
	}

	.hb-stat--purple.hb-stat--purple {
		--hb-sticker-rotate: -10.59deg;
		top: 7.9rem;
		left: 23.352%;
	}

	.hb-stat--grey.hb-stat--grey {
		--hb-sticker-rotate: 4deg;
		top: 12.89rem;
		left: 42.358%;
	}

	.hb-stat--yellow.hb-stat--yellow {
		--hb-sticker-rotate: -10.59deg;
		top: 7.34rem;
		left: 62.172%;
	}

	.hb-stat--dark.hb-stat--dark {
		--hb-sticker-rotate: -2deg;
		top: -2.715rem;
		left: 77.938%;
	}
}

/* Smaller screens: no notch, a wrapped row of gently tilted stickers. */
@media (max-width: 1099.98px) {
	.hb-section.hb-section--stats {
		padding-top: 0;
		background-color: var(--wp--preset--color--base);
	}

	.hb-stats.hb-stats {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
		height: auto;
		padding: var(--wp--preset--spacing--80) var(--hb-gutter) 0;
		background: none;
	}

	.hb-stats.hb-stats > .hb-stat {
		position: relative;
	}

	.hb-stats > .hb-stat:nth-child(odd) {
		--hb-sticker-rotate: 3deg;
	}

	.hb-stats > .hb-stat:nth-child(even) {
		--hb-sticker-rotate: -4deg;
	}
}

/* Phones: two stickers per row (Figma has no mobile band). */
@media (max-width: 599.98px) {
	.hb-stats.hb-stats {
		gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
		padding-top: var(--wp--preset--spacing--70);
	}

	.is-style-sticker.hb-stat,
	.is-style-sticker.hb-sticker--perforated {
		width: min(9.75rem, calc(50% - 0.375rem));
		gap: 0.375rem;
		padding: 1.25rem 0.5rem 0.75rem;
	}

	.is-style-sticker.hb-sticker--perforated {
		aspect-ratio: 241 / 136;
		padding-top: 1.5rem;
	}

	.hb-stat .hb-stat__num {
		font-size: 2.5rem;
	}

	.hb-stat .hb-stat__label {
		font-size: var(--wp--preset--font-size--small);
		line-height: 1.15;
		white-space: normal;
		text-wrap: balance;
	}
}