/**
 * Section: main features of a feature page (Figma "main features"
 * 10543:56556): a centred head, an illustration beside three stacked step
 * cards, then a grid of light ticket cards.
 */

.hb-section.hb-section--focus {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--80);
	margin-top: 0;
	padding: 0;
}

.hb-section.hb-section--focus > * {
	width: 100%;
	margin-block: 0;
}

.hb-focus__head.hb-focus__head {
	align-self: center;
	width: auto;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--50);
	max-width: 40.125rem;
	text-align: center;
}

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

.hb-focus__title.hb-focus__title {
	letter-spacing: -0.0625em;
	line-height: 0.875;
}

.hb-focus__head p {
	letter-spacing: -0.04em;
	line-height: 1.3;
}

.hb-focus__row.hb-focus__row {
	display: grid;
	grid-template-columns: minmax(0, 603fr) minmax(0, 422fr);
	align-items: center;
	gap: var(--wp--preset--spacing--80);
}

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

.hb-focus__media.hb-focus__media {
	overflow: hidden;
	aspect-ratio: 603 / 550;
	border-radius: var(--wp--custom--radius--md);
}

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

.hb-focus__steps.hb-focus__steps {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--50);
}

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

.hb-focus-step.hb-focus-step {
	padding: var(--wp--preset--spacing--70);
	border-radius: var(--wp--custom--radius--lg);
}

.hb-focus-step.hb-focus-step > * {
	margin: 0;
}

.hb-focus-step:first-child {
	background-color: var(--wp--preset--color--surface);
	box-shadow: var(--hb-shadow-drop);
}

.hb-focus-step h3 {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	letter-spacing: -0.04em;
	line-height: 1;
}

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

/* All features: a head row, then light tickets on a 3-column grid. */
.hb-focus__all.hb-focus__all {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--70);
	/* Figma: 120px under the steps. */
	margin-top: calc(7.5rem - var(--wp--preset--spacing--80)) !important;
}

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

.hb-focus__all-head.hb-focus__all-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
}

.hb-focus__all-head.hb-focus__all-head > * {
	margin: 0;
}

.hb-focus__all-head h3 {
	letter-spacing: -0.025em;
	line-height: 1;
}

.hb-tickets.hb-tickets {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--50);
}

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

/* Light wrapper-ticket (Figma "corners" 554 x 32): scalloped top and bottom
 * edges, 21.3px wide bites every 27.36px from 6.87px, beige body. */
.hb-ticket-light.hb-ticket-light {
	--hb-notch: 10.64px;
	--hb-pitch: 27.357px;
	--hb-notch-x: 3.83px;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
	/* 32px scallop band + 16px, less the 1px overlaps of the Figma layers. */
	padding: 2.9375rem var(--wp--preset--spacing--60);
	background-color: var(--wp--preset--color--surface);
	-webkit-mask:
		radial-gradient(circle var(--hb-notch) at 50% -0.3px, #0000 98%, #000 100%) var(--hb-notch-x) 0 / var(--hb-pitch) 51% repeat-x,
		radial-gradient(circle var(--hb-notch) at 50% calc(100% + 0.3px), #0000 98%, #000 100%) var(--hb-notch-x) 100% / var(--hb-pitch) 51% repeat-x;
	mask:
		radial-gradient(circle var(--hb-notch) at 50% -0.3px, #0000 98%, #000 100%) var(--hb-notch-x) 0 / var(--hb-pitch) 51% repeat-x,
		radial-gradient(circle var(--hb-notch) at 50% calc(100% + 0.3px), #0000 98%, #000 100%) var(--hb-notch-x) 100% / var(--hb-pitch) 51% repeat-x;
}

.hb-ticket-light.hb-ticket-light > * {
	margin: 0;
}

.hb-ticket-light__icon {
	width: 1.5rem;
	height: 1.5rem;
}

.hb-ticket-light__icon img {
	display: block;
	width: 1.5rem;
	height: 1.5rem;
}

.hb-ticket-light h4 {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	letter-spacing: -0.04em;
	line-height: 1;
}

.hb-ticket-light p {
	margin-top: calc(var(--wp--preset--spacing--20) - var(--wp--preset--spacing--40)) !important;
	letter-spacing: -0.04em;
	line-height: 1.3;
}

@media (max-width: 1023.98px) {
	.hb-focus__row.hb-focus__row {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--60);
	}

	.hb-tickets.hb-tickets {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 599.98px) {
	.hb-tickets.hb-tickets {
		grid-template-columns: minmax(0, 1fr);
	}

	.hb-focus-step.hb-focus-step {
		padding: var(--wp--preset--spacing--50);
	}
}