/*
 * Pack. Figma section/pack 2347:59922: purple band (background-purple,
 * radius 20, 64 padding, 1220 inside, 32 between blocks). Top: 765 text
 * column (header/XL + body/S, 16 gap) beside a 272x246 illustration 60px from
 * the right. Groups: header/L title, 24 gap, row of 311 cards (sheet 311x207,
 * 24px zoom icon 16px from the corner, 10 gap, 18px green tick + body/XS),
 * 16 to the pagination (right).
 * Mobile 2347:61452: full-bleed band, 84/20 padding, illustration 177x160
 * centred on top, header/L + body/S, group titles header/M, 16 gaps; cards
 * 310 (sheet 310x217); "1 / 7", 187px progress line and arrows.
 */

.pack__band {
	display: flex;
	flex-direction: column;
	gap: 32px;
	/* Full-bleed band (Figma 2347:59922: 1440 wide, r20, 64 top/bottom, content in the 1220 column). */
	width: 100%;
	padding: 64px max(var(--gutter), (100% - var(--container)) / 2);
	border-radius: var(--r-l);
	background: var(--c-bg-purple);
	overflow: hidden;
}

.pack__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 32px;
}

.pack__intro {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 765px;
	padding-top: 45px;
	min-width: 0;
}

.pack__title { font: var(--f-header-xl); color: var(--c-text-dark); text-wrap: wrap; }
.pack__text { font: var(--f-body-s); color: var(--c-text-dark); }

.pack__illustration {
	flex: none;
	width: 272px;
	height: 246px;
	margin-right: 60px;
}

.pack__group {
	display: flex;
	flex-direction: column;
	gap: 24px;
	min-width: 0;
}

.pack__group-title { font: var(--f-header-l); color: var(--c-text-dark); }

.pack__slider {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

.pack__track { margin: 0; }

.pack-doc {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 311px;
}

.pack-doc__image {
	position: relative;
	display: block;
	height: 207px;
	overflow: hidden;
	background: var(--c-bg-white);
}

.pack-doc__zoom {
	--icon-size: 24px;
	position: absolute;
	right: 16px;
	bottom: 16px;
	color: var(--c-primary);
	transition: transform .15s ease;
}

.pack-doc__image:hover .pack-doc__zoom { transform: scale(1.15); }

.pack-doc__label {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	font: var(--f-body-xs);
	color: var(--c-text-dark);
}

.pack-doc__tick { --icon-size: 18px; }

.pack__nav {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 19px;
}

.pack__counter,
.pack__progress { display: none; }

.pack__arrows { display: flex; gap: 16px; }

.pack__arrow {
	--icon-size: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--c-border-dark);
	border-radius: var(--r-xs);
	background: var(--c-bg-white);
	color: var(--c-text-dark);
	transition: background-color .15s ease, color .15s ease;
}

.pack__arrow:hover { background: var(--c-border-dark); color: var(--c-text-white); }

.pack__arrow[aria-disabled="true"] {
	border-color: var(--c-border-light);
	color: var(--c-border-light);
	pointer-events: none;
}

@media (max-width: 1100px) {
	.pack__illustration { margin-right: 0; }
}

@media (max-width: 767px) {
	.pack__band {
		align-items: stretch;
		width: 100%;
		padding: 84px var(--gutter);
		border-radius: 0;
	}

	.pack__top { flex-direction: column-reverse; align-items: center; }
	.pack__intro { padding-top: 0; }
	.pack__title { font: var(--f-header-l); }
	.pack__illustration { width: 177px; height: 160px; }

	.pack__group { gap: 16px; }
	.pack__group-title { font: var(--f-header-m); }

	.pack .pack__track { margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter); }
	.pack-doc { width: 310px; gap: 16px; }
	.pack-doc__image { height: 217px; }

	.pack__nav { justify-content: space-between; }

	.pack__counter {
		display: block;
		font: var(--f-subtitle-m);
		color: var(--c-text-dark);
		white-space: nowrap;
	}

	.pack__progress {
		position: relative;
		display: block;
		flex: 1;
		max-width: 187px;
		height: 1px;
		background: var(--c-border-light);
	}

	.pack__progress::after {
		content: "";
		position: absolute;
		inset: -1px auto -1px 0;
		width: calc(var(--progress, 0) * 100%);
		border-radius: 2px;
		background: var(--c-dark-purple);
		transition: width .2s ease;
	}
}