/*
 * Documents. Figma 2489:70374: head (header/XL + body/M dark, 16 gap), 24 to a
 * row of 311-wide card/documents 16 apart (white, 1px border-light, radius 16,
 * 16 padding, 16 gap): 80x80 background-purple icon tile (radius 16, 64px
 * primary icon) with a green tag/small on the right, header/S title + body/S
 * text (8 gap). 16 to the arrows (40x40, radius 8), right-aligned.
 * Mobile 2530:72179: header/L + body/S head, 231-wide cards, then "1 / 12"
 * (subtitle/M, current number primary, rest grey), a 187px progress line and
 * the arrows spread across the row.
 */

.documents__inner {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.documents__head {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 765px;
}

.documents__title { font: var(--f-header-xl); color: var(--c-text-dark); }
.documents__text { max-width: 740px; font: var(--f-body-m); color: var(--c-text-dark); }

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

.documents__track { align-items: stretch; }

.document-card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 311px;
	padding: 15px;                     /* 16 minus the border */
	border: 1px solid var(--c-border-light);
	border-radius: var(--r-m);
	background: var(--c-bg-white);
}

.document-card__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px;
}

.document-card__badge {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 80px;
	height: 80px;
	border-radius: var(--r-m);
	background: var(--c-bg-purple);
}

.document-card__icon { --icon-size: 64px; color: var(--c-primary); }

/* tag/small, green fill. */
.document-card__label {
	padding-inline: 10px;
	border-color: var(--c-secondary);
	background: var(--c-secondary);
}

.document-card__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.document-card__title { font: var(--f-header-s); color: var(--c-text-dark); }
.document-card__text { font: var(--f-body-s); color: var(--c-text-dark); }

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

.documents__counter,
.documents__progress { display: none; }

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

.documents__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;
}

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

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

@media (max-width: 767px) {
	.documents__head { gap: 8px; }
	.documents__title { font: var(--f-header-l); }
	.documents__text { font: var(--f-body-s); }

	.documents .documents__track { margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter); }
	.document-card { width: 231px; }

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

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

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

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

	.documents__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;
	}
}