/*
 * Portal. Figma 2022:61877 desktop: 1020 column, header left, then image panel
 * 480x320 and steps 480, 60 apart, button centred; 24 gaps.
 * 556:13815 mobile: stacked, image panel 350x287.
 * The screenshot sits on a lilac panel, cropped so its left/bottom run off the panel.
 */

.portal .container {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 24px;
}

.portal__head .section-head__text { font: var(--f-body-xs); }

.portal__body {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 480px));
	justify-content: center;
	align-items: start;
	gap: 24px 60px;
}

/* Image panel */
.portal__media {
	--portal-panel: #dbcef8;             /* Figma fill, no token */
	position: relative;
	aspect-ratio: 480 / 320;
	border: 1px solid var(--c-bg-segment);
	border-radius: var(--r-l);
	background: var(--portal-panel);
	overflow: hidden;
}

.portal__shot {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity .35s ease;
}

.portal__shot.is-active { opacity: 1; }

/* Crop from Figma: the image box is 146% x 133% of the panel, shifted left/up. */
.portal__img {
	position: absolute;
	left: -40.6%;
	top: -6.1%;
	width: 146.25%;
	max-width: none;
	height: 133.1%;
	object-fit: cover;
	object-position: left top;
}

/* Steps */
.portal__steps {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.portal__progress {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.portal__count { font: var(--f-subtitle-m); color: var(--c-text-grey); white-space: nowrap; }
.portal__count span { color: var(--c-text-dark); }

.portal__bar {
	position: relative;
	width: min(240px, 70%);
	height: 8px;
	border-radius: var(--r-pill);
	background: var(--c-border-light);
	overflow: hidden;
}

.portal__bar::after {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: calc(100% / var(--n));
	border-radius: var(--r-pill);
	background: var(--c-secondary);
	transform: translateX(calc(var(--i) * 100%));
	transition: transform .35s ease;
}

.portal__list {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.portal__step {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding-bottom: 19px;               /* 20 minus the line */
	border-bottom: 1px solid var(--c-border-light);
}

.portal__step:last-child { padding-bottom: 0; border-bottom: 0; }

.portal__title { font: var(--f-header-xs); }

.portal__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	font: inherit;
	color: var(--c-text-dark);
	text-align: left;
}

.portal__toggle:hover { color: var(--c-primary); }

.portal__num { font: var(--f-body-s); color: var(--c-text-grey); }
.portal__step.is-open .portal__num { color: var(--c-text-dark); }

.portal__text { font: var(--f-body-s); color: var(--c-text-dark); }

.portal__cta { display: flex; justify-content: center; }

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

@media (max-width: 767px) {
	.portal__media { aspect-ratio: 350 / 287; }

	.portal__img {
		left: -40.7%;
		top: 0;
		width: 146.3%;
		height: 118.8%;
	}

	.portal__step:last-child { padding-bottom: 19px; border-bottom: 1px solid var(--c-border-light); }
}