/* ==========================================================================
   Page styles for the two fixed content pages
   (Procurement Support, About & Cooperation).
   Loaded only from those templates. Shared blocks — .band, .section-head,
   .prose, .task-card, .steps, .fact-list, .chip-list, .notice — keep living
   in style.css and are reused here, never redefined.
   ========================================================================== */

/* The first band sits inside .site-main's own padding, so it must not add
   another 2.5rem above the page title. */
.site-main > .band:first-child { padding-top: 0; }

/* These sections are linked from the footer and from within the page. */
.site-main .band[id] { scroll-margin-top: 1rem; }

/* Jump list of the four procurement tasks, under the page header. */
.page-jump { margin-top: 1.25rem; }

/* Procurement task block: reading column plus a panel of optional details.
   One column below 900px, like the shared inquiry module. */
.task-detail {
	display: grid;
	gap: 1.75rem;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	align-items: start;
}

.task-detail-text .section-head { margin-bottom: 1.25rem; }
.task-detail-text .task-index { margin: 0 0 0.35rem; }

/* The details panel reuses .task-card; it only needs a little more room than
   a grid card, and a quieter optional-items note above the button. */
.task-card .task-facts { padding-left: 1.15rem; }
.task-card .task-card-text { font-size: 0.95rem; }

/* Numbered process list (how an enquiry is handled), plain CSS counters so
   the order stays readable without any script. */
.steps--numbered { counter-reset: nw-step; }
.steps--numbered .step { counter-increment: nw-step; position: relative; padding-left: 2.6rem; }
.steps--numbered .step::before {
	content: counter(nw-step);
	position: absolute;
	left: 0.85rem;
	top: 0.32rem;
	width: 1.4rem;
	height: 1.4rem;
	border-radius: 50%;
	background: var(--c-brand);
	color: #fff;
	display: grid;
	place-items: center;
	font-size: 0.8rem;
	font-weight: 700;
	line-height: 1;
}

@media (max-width: 900px) {
	.task-detail { grid-template-columns: 1fr; }
}