/*
 * Service page: «ماذا نقدّم» (pages/service/offers.php) — the section frame
 * only. The offers themselves (cards, and the tool they are shown in) are
 * the offer-stage component: assets/css/components/offer-stage.css +
 * assets/css/components/offer-stage/{skin}.css.
 */

.gb-svc-offers {
	overflow: clip;
	padding-block: var(--gb-space-2xl);
	background-color: var(--gb-surface);
	color: var(--gb-text);
}

.gb-svc-offers__head {
	margin-block-end: var(--gb-space-l);
}

/*
 * Revision 14: a service told in two tools (pages/service/offers.php) — each
 * tool opens with its own part heading: a big number in the seed's
 * turquoise and the part's title, on a hairline that runs to the edge.
 */
.gb-svc-offers__part {
	display: flex;
	align-items: center;
	gap: var(--gb-space-s);
	margin-block: var(--gb-space-xl) var(--gb-space-m);
}

.gb-svc-offers__head + .gb-svc-offers__part {
	margin-block-start: 0;
}

.gb-svc-offers__part::after {
	content: "";
	flex: 1 1 auto;
	min-inline-size: 2rem;
	block-size: 1px;
	background: linear-gradient(to left, var(--gb-border), transparent);
}

[dir="ltr"] .gb-svc-offers__part::after {
	background: linear-gradient(to right, var(--gb-border), transparent);
}

.gb-svc-offers__part-mark {
	display: grid;
	place-items: center;
	flex: none;
	inline-size: 2.6rem;
	aspect-ratio: 1;
	border: 1px solid var(--gb-color-turquoise-a35);
	border-radius: 50%;
	background-color: var(--gb-color-turquoise-a10);
	color: var(--gb-color-logo-teal);
	font-family: var(--gb-font-display);
	font-size: var(--gb-step-0);
	font-weight: var(--gb-weight-bold);
	font-variant-numeric: tabular-nums;
}

.gb-svc-offers__part-title {
	margin: 0;
	font-family: var(--gb-font-display);
	font-size: var(--gb-step-2);
	font-weight: var(--gb-weight-bold);
	line-height: 1.3;
	color: var(--gb-color-logo-navy);
}

/* Two tools one after the other: room between them. */
.gb-offer-stage + .gb-svc-offers__part {
	margin-block-start: var(--gb-space-2xl);
}

@media (forced-colors: active) {
	.gb-svc-offers__part::after {
		background: CanvasText;
	}
}