/**
 * WHAT TO EXPECT
 *
 * Horizontal carousel on the same cream band as section 03.
 *
 * Measured from the design (1440 frame):
 *   heading    251px, centred (x 228, 983 wide)
 *   slides     376x501 (3:4), 17px gaps, spanning the 1164 column
 *   number     top-left of each slide, title bottom-left
 *   progress   1043x4 track at x 138; buttons 48px, right-aligned to 1302
 */

@layer components {
	.expect {
		background-color: var(--clr-bg-alt);
		padding-block-end: var(--section-space);
	}

	.expect__head {
		text-align: center;
		margin-block-end: var(--space-2xl);
	}

	.expect__title {
		margin: 0;
		font-family: var(--font-display);
		font-size: var(--fs-display-1);
		line-height: var(--lh-display-1);
		letter-spacing: var(--track-display-1);
		text-transform: uppercase;
	}

	.expect__intro {
		margin: var(--space-m) auto 0;
		max-inline-size: 46rem;
		color: var(--clr-text-muted);
	}

	/* ---- Carousel ------------------------------------------------------ */

	.expect__viewport { overflow: hidden; }

	.expect__track {
		display: flex;
		gap: 1.0625rem;                      /* 17px measured */
	}

	.expect__slide {
		position: relative;
		flex: 0 0 calc((100% - (1.0625rem * 2)) / 3);
		min-inline-size: 0;
		border-radius: var(--radius-card);
		overflow: hidden;
		background-color: var(--clr-bg-inverse);
	}

	@media (max-width: 61.999rem) {
		.expect__slide { flex-basis: calc((100% - 1.0625rem) / 2); }
	}
	@media (max-width: 39.999rem) {
		.expect__slide { flex-basis: 85%; }
	}

	.expect__slide img {
		inline-size: 100%;
		block-size: 100%;
		aspect-ratio: 376 / 501;
		object-fit: cover;
	}

	/*
	 * Scrim. The number sits top-left and the title bottom-left over
	 * uncontrolled photography, so both ends need protecting — hence a
	 * two-stop gradient rather than one fading in a single direction.
	 */
	.expect__slide::after {
		content: "";
		position: absolute;
		inset: 0;
		background-image: linear-gradient(
			to bottom,
			rgb(0 0 0 / 0.45) 0%,
			rgb(0 0 0 / 0) 30%,
			rgb(0 0 0 / 0) 45%,
			rgb(0 0 0 / 0.75) 100%
		);
		pointer-events: none;
	}

	.expect__number,
	.expect__label {
		position: absolute;
		z-index: 1;
		margin: 0;
		inset-inline-start: var(--space-m);
		font-family: var(--font-display);
		text-transform: uppercase;
		color: var(--white);
	}

	.expect__number {
		inset-block-start: var(--space-m);
		font-size: var(--fs-display-4);
		line-height: 1;
	}

	.expect__label {
		inset-block-end: var(--space-m);
		inset-inline-end: var(--space-m);
		font-size: var(--fs-display-4);
		line-height: 0.95;
	}

	/* ---- Controls ------------------------------------------------------ */

	.expect__controls {
		display: flex;
		align-items: center;
		gap: var(--space-s);
		margin-block-start: var(--space-l);
	}

	/*
	 * Scrollbar-style progress: the thumb's width is one "page" of the
	 * carousel and it travels the remaining track. Driven from Embla's
	 * scrollProgress, so it stays honest however many slides there are.
	 */
	.expect__progress {
		flex: 1 1 auto;
		block-size: 4px;
		border-radius: 2px;
		background-color: rgb(0 0 0 / 0.1);
		overflow: hidden;
	}

	.expect__progress-thumb {
		display: block;
		block-size: 100%;
		border-radius: 2px;
		background-color: var(--clr-accent);
		inline-size: var(--thumb-width, 33%);
		transform: translate3d(var(--thumb-offset, 0%), 0, 0);
		transition: transform var(--transition-slow);
	}

	.expect__nav {
		display: flex;
		gap: 0.5625rem;                      /* 9px measured */
		flex: 0 0 auto;
	}

	.expect__button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		inline-size: 3rem;                   /* 48px measured */
		block-size: 3rem;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background-color: var(--clr-text);
		color: var(--clr-accent);
		cursor: pointer;
		transition: background-color var(--transition-fast), opacity var(--transition-fast);
	}
	.expect__button:hover:not(:disabled) { background-color: var(--clr-accent); color: var(--clr-bg); }
	.expect__button:disabled { opacity: 0.35; cursor: default; }

	/* Chevron drawn in CSS — no asset for a shape this simple. */
	.expect__button::before {
		content: "";
		inline-size: 0.5rem;
		block-size: 0.5rem;
		border-inline-end: 2px solid currentcolor;
		border-block-start: 2px solid currentcolor;
		transform: rotate(45deg);
		margin-inline-start: -0.15rem;
	}
	.expect__button[data-dir="prev"]::before {
		transform: rotate(-135deg);
		margin-inline: 0 -0.15rem;
	}
}