/**
 * Oyolloo Elements — How It Works.
 *
 * Figma: node 471:1123 — 1920x712 on light grey.
 *   heading 120px from the top, centred; eyebrow 16px above the title
 *   grid    3 columns, 24px gap, 40px below the heading
 *   badge   overhangs the card, so the grid needs 16px of top breathing room
 *   cta     centred, 40px below the grid
 *
 * @package Oyolloo\Elements
 * @since   1.0.0
 */

.oe-how-it-works__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	text-align: center;
}

.oe-how-it-works__eyebrow {
	margin: 0;
	text-transform: uppercase;
	letter-spacing: 0;
}

/* The deck is a slider so 471:3927 can page the three steps on a phone. All
   three fit at desktop widths, so the shared script draws no dots there. */
.oe-how-it-works__slider {
	/* The badge overhangs the card by 15px, which the 40px gap already
	   absorbs — no extra room needed above it. */
	margin-block-start: var(--oe-space-xl);
}

.oe-how-it-works__track {
	--oe-per-view: 3;
	--oe-gap: var(--oe-space-md);

	align-items: stretch;
	/* A scroll container clips what leaves it, and the step badge sits 15px
	   above the card, so the track reserves the room and gives it straight
	   back — the deck's position on the page is unchanged. */
	padding-block-start: 16px;
	margin-block-start: -16px;
}

.oe-how-it-works__track .oe-card {
	height: auto;
}

.oe-how-it-works__cta {
	display: flex;
	justify-content: center;
	margin-block-start: var(--oe-space-xl);
}

@media (max-width: 1024px) {
	.oe-how-it-works__track {
		--oe-per-view: 2;
	}
}

/*
 * Mobile (Figma 471:3927): 345-wide cards one at a time, and the card turns
 * into two rows — the icon tile with its step badge beside it, then the copy.
 */
@media (max-width: 767px) {
	.oe-how-it-works__head {
		padding-block-end: var(--oe-space-sm);
	}

	.oe-how-it-works__slider {
		margin-block-start: var(--oe-space-md);
	}

	.oe-how-it-works__cta {
		margin-block-start: var(--oe-space-md);
	}

	/* The card fills the column and the next one bleeds past the gutter, which
	   is how the design shows there is more to swipe to. It bleeds by the
	   container's own gutter, not a fixed mobile figure - overshoot here is a
	   horizontal scrollbar on the whole page. */
	.oe-how-it-works__track {
		--oe-per-view: 1;
		--oe-gap: var(--oe-space-sm);
		width: calc(100% + var(--oe-gutter-inline, var(--oe-gutter-mobile)));
		/* Card stays the design's 345 and the bled track's remainder is the
		   peek, so the sliver does not shrink with the container's gutter. */
		--oe-peek: max(0px, calc(100% - 345px));
	}

	.oe-how-it-works__head {
		/* stretch, not flex-start: the heading has to keep the full column width
		   or it shrink-wraps and breaks onto a second line. */
		align-items: stretch;
		text-align: start;
	}

	.oe-how-it-works__track .oe-card {
		--oe-card-pad: var(--oe-space-sm);

		display: grid;
		/* auto + 1fr, so the copy spanning both rows cannot widen the icon
		   column and push the step badge away from it. */
		grid-template-columns: auto 1fr;
		justify-items: start;
		align-items: center;
		gap: var(--oe-space-sm);
	}

	/* The design leads with the icon and puts the step badge beside it; the
	   markup keeps the badge first so it can overhang on desktop. */
	.oe-how-it-works__track .oe-card__badge {
		order: 2;
	}

	.oe-how-it-works__track .oe-card__tile {
		order: 1;
		width: 54px;
		height: 54px;
		padding: 10px;
	}

	.oe-how-it-works__track .oe-card__tile .oe-icon,
	.oe-how-it-works__track .oe-card__tile svg,
	.oe-how-it-works__track .oe-card__tile img {
		width: 32px;
		height: 32px;
	}

	.oe-how-it-works__track .oe-card__badge {
		position: static;
		inset: auto;
	}

	.oe-how-it-works__track .oe-card__body {
		order: 3;
		grid-column: 1 / -1;
		gap: var(--oe-space-2xs);
	}

	.oe-how-it-works__track .oe-card__title {
		font-size: var(--oe-h5-size);
		line-height: 26px;
	}

	.oe-how-it-works__track .oe-card__text {
		font-size: var(--oe-body-sm-size);
		line-height: 22px;
	}

	.oe-how-it-works__cta .oe-btn {
		width: 100%;
	}
}