/* «Публічні закупівлі» — Figma `3796:16462` (1440) /
   `4480:24519` (390), plan 06 task 10.

   The banner is the shared `.c-section-title--banner`
   composition with no photo, same as `partnership.css`. The
   filter bar («Filter Controls» `3796:16809`, 1440×50:
   Категорія 520×48 / Рік 520×48 / Сортування 400×48,
   `1px solid --color-neutral-300` between them) is three
   `<details>` dropdowns, each echoing its own choice as text.
   The documents table («Documents List» `3807:7597`) is a
   real `<table>`: header row 1332×83 with a
   `1px solid --color-neutral-300` bottom rule, each document
   row the same height and rule, columns 380 / 180 / 180 / 180
   (format icon + «завантажити» action). Under 768 the table
   becomes a stacked card list — a `<table>` at 380px content
   width has no room for five columns, so each row's cells are
   laid out as label/value pairs instead (the semantics stay a
   table; only the visual arrangement changes, ruling R16). */

/* «Hero» `3977:17483`, 1440×348, no auto-layout padding of its
   own: the breadcrumbs sit flush with the frame's own top
   edge, and the grey fill runs 150px past the last text row —
   the same construction `partnership.css`'s own Hero uses. */
.procurement-hero {
	background: var(--color-neutral-100);
	padding-top: 0;
	padding-bottom: 150px;
}

.procurement-hero__inner {
	max-width: 1696px;
	margin-inline: auto;
	padding-inline: var(--page-gutter);
	display: flex;
	flex-direction: column;
	gap: 94px;
}

/* Same contrast fix as `.partnership-hero .breadcrumbs a` —
   see that rule's own comment. */
.procurement-hero .breadcrumbs a {
	color: var(--color-neutral-600);
}

/* 1297 per `3977:17483`'s own «Container», +13 safety margin:
   at 1297 flat the substitute font's own H1 width (Kilok is
   unlicensed, Exo 2 stands in — figma-rules.md) pushes the
   fixed-width intro column 7px past the viewport
   (overflow-sweep.js caught it at 1440). Residual is the
   substitute font's width, same allowance verify.md gives text
   layers; the margin only keeps that residual from becoming a
   real horizontal scrollbar. */
.procurement-hero__header {
	max-width: 1310px;
}

/* Filter bar. */

/* animations.md `4550:25469` «Фільтри та сортування фіксуються
   зверху» — the same sticky-below-the-header construction
   filters.css's own `.afisha-filters--bar` uses: `top`, not
   `transform` (a transform on a still-in-flow sticky box would
   lift the bar over the hero above it before it actually
   sticks — filters.css's own fix-round-1 C1 note), zero until
   the header is actually sticky (`--podil-header-h`/
   `--podil-header-shift` default to 0px). */
.procurement-filters {
	display: flex;
	flex-direction: row;
	border-top: 1px solid var(--color-neutral-300);
	border-bottom: 1px solid var(--color-neutral-300);
	background: var(--color-neutral-100);
	position: sticky;
	z-index: 12;
	top: calc(var(--podil-header-h, 0px) + var(--podil-header-shift, 0px));
	transition: top 300ms cubic-bezier(0, 0, 0.58, 1);
}

/* prefers-reduced-motion.md / accessibility-ua.md §7.1: the sticky
   offset is a position change, not a decorative motion, but its own
   `transition: top` is still an animation under the reduced-motion
   media feature — base.css's own `*, *::before, *::after` reset
   forces its duration to ~0 already; this says the same thing on the
   rule itself so `document.getAnimations()` finds nothing running
   the instant the page settles, not just after 0.01ms. */
@media (prefers-reduced-motion: reduce) {

	.procurement-filters {
		transition: none;
	}
}

/* «Filter Controls» `3796:16809`, 1440 and up — the desktop
   bar draws three separate dropdowns; under 1440 the frame
   replaces it with the compact drawer row below. */
.procurement-filters--bar {
	display: none;
}

@media (min-width: 1440px) {

	.procurement-filters--bar {
		display: flex;
	}
}

/* `4480:24519` → `Frame 1437255384`, under 1440 only. */
.procurement-filters--drawer {
	display: flex;
}

@media (min-width: 1440px) {

	.procurement-filters--drawer {
		display: none;
	}
}

.procurement-filter {
	position: relative;
	border-bottom: 0;
}

.procurement-filters--bar .procurement-filter {
	border-right: 1px solid var(--color-neutral-300);
}

.procurement-filters--bar .procurement-filter:last-child {
	border-right: 0;
}

@media (min-width: 1440px) {

	.procurement-filters--bar .procurement-filter {
		flex: 1 1 0;
	}

	.procurement-filters--bar .procurement-filter:last-child {
		flex: 0 0 400px;
	}
}

/* The drawer row's own «сортування» — `Sort Dropdown`
   `4480:24519`, 195.5 of the row's 390. */
.procurement-filters--drawer .procurement-filter {
	flex: 1 1 0;

	/* Default flex-item min-width is `auto` (its own content's
	   min-content), not 0 — at 320px «сортування: спочатку
	   нові» alone needs more than the row's own half and pushed
	   10px past the viewport (overflow-sweep.js). `min-width: 0`
	   lets it shrink properly; the label itself then truncates
	   below, never the row. */
	min-width: 0;
	border-left: 1px solid var(--color-neutral-300);
}

/* Wraps rather than truncates: an ellipsis would silently drop the current
   sort state from a reader at 150 % zoom (accessibility-ua.md §3.4's own
   "обране повторюється текстом" — text that then disappears again defeats
   the point). The row's own height is `auto`, so a wrapped label just
   makes the trigger taller, never clips it (tests/e2e/helpers/
   element-overflow.js's own `clipped` check would catch a truncation). */
.procurement-filters--drawer .procurement-filter__label {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: break-word;
}

.procurement-filters--drawer .procurement-filter__summary {
	height: auto;
	align-items: flex-start;
}

/* Shared by the bar's three dropdowns (1440+, `12/24/12/24`)
   and the drawer row's own «сортування» (under 1440,
   `12/16/12/16`) — the two never show at once, so one
   responsive rule serves both `Sort Dropdown` compositions. */
.procurement-filter__summary {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
	color: var(--color-neutral-800);
	font-family: var(--font-body);
	font-size: var(--fs-s-text);
	font-weight: 600;
	text-transform: uppercase;
	cursor: pointer;
	list-style: none;
}

@media (min-width: 1440px) {

	.procurement-filter__summary {
		padding: 12px 24px;
	}
}

.procurement-filter__summary::-webkit-details-marker {
	display: none;
}

.procurement-filter__icon {
	display: flex;
	color: var(--color-neutral-800);
}

.procurement-filter__arrow {
	margin-left: auto;
}

.procurement-filter[open] .procurement-filter__arrow {
	transform: rotate(180deg);
}

.procurement-filter__options {
	position: absolute;
	z-index: 2;
	inset-inline-start: 0;
	top: 100%;
	box-sizing: border-box;
	min-width: 100%;
	max-width: calc(100vw - 2 * var(--page-gutter));
	margin: 0;
	padding: 8px 0;
	list-style: none;
	background: var(--color-base-white);
	border: 1px solid var(--color-neutral-300);
	box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
}

/* The last panel's own border (1px each side) is the +2px over
   its 400px trigger overflow-sweep.js caught at 1440 — flush
   its right edge to the trigger's instead of its left. */
.procurement-filter:last-child .procurement-filter__options {
	inset-inline-start: auto;
	inset-inline-end: 0;
}

.procurement-filter__link {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 24px;
	color: var(--color-neutral-800);
	font-family: var(--font-body);
	font-size: var(--fs-s-text);
	text-decoration: none;
	white-space: nowrap;
}

.procurement-filter__link:hover,
.procurement-filter__link--current {
	background: var(--color-neutral-100);
}

.procurement-filter__box {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	border: 1px solid var(--color-neutral-400);
}

.procurement-filter__link--current .procurement-filter__box {
	border-color: var(--color-primary-500);
}

/* «фільтри» drawer — `4480:24519` → `Frame 1437255384` → `Frame
   1437255293` (194.5 of the row's 390, icon + «фільтри»). Same
   trigger shape `.procurement-filter__summary` uses, so the two
   buttons of the drawer row read as one pair. */
.procurement-drawer {
	flex: 1 1 0;
	min-width: 0;
	border-right: 1px solid var(--color-neutral-300);
}

.procurement-drawer__toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 100%;
	padding: 16px;
	color: var(--color-neutral-800);
	font-family: var(--font-body);

	/* «Menu,button» text-style (`фільтри` `4480:24519`, 20/24) —
	   the nav's own type, not the s-text/m-text scale. */
	font-size: 20px;
	line-height: 24px;
	font-weight: 600;
	text-transform: uppercase;
	cursor: pointer;
	list-style: none;
}

.procurement-drawer__toggle::-webkit-details-marker {
	display: none;
}

.procurement-drawer__toggle-icon {
	display: flex;
	color: var(--color-neutral-800);
}

.procurement-drawer__count {
	color: var(--color-primary-700);
	font-weight: 600;
}

/* Default (no JavaScript, or before the dialog swap runs): the
   panel opens in flow, directly under the trigger, like every
   other `<details>` on this page. */
.procurement-drawer__panel {
	box-sizing: border-box;
	padding: 16px;
	background: var(--color-base-white);
	border: 1px solid var(--color-neutral-300);
}

.procurement-drawer__panel[hidden] {
	display: none;
}

/* With the script: the frame's own full-panel drawer — same
   construction `.afisha-drawer--dialog .afisha-drawer__panel`
   uses (filters.css), fixed and covering the viewport, header
   pinned, the groups scrolling under it. `dialog.js` has
   already made the rest of the page `inert` and frozen its
   scroll position. */
.procurement-drawer--dialog .procurement-drawer__panel {
	position: fixed;
	z-index: 20;
	inset: 0;
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 24px;
	overflow-y: auto;
}

.procurement-drawer--dialog .procurement-drawer__panel[hidden] {
	display: none;
}

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

.procurement-drawer__title {
	color: var(--color-neutral-800);
	font-family: var(--font-title);
	font-size: var(--fs-h5);
	font-weight: 400;
	text-transform: uppercase;
}

.procurement-drawer__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	color: var(--color-neutral-800);
	background: none;
	border: 0;
	cursor: pointer;
}

.procurement-drawer__close[hidden] {
	display: none;
}

.procurement-drawer__group {
	margin: 0;
	padding: 0;
	border: 0;
}

.procurement-drawer__legend {
	margin-bottom: 8px;
	padding: 0;
	color: var(--color-neutral-600);
	font-family: var(--font-body);
	font-size: var(--fs-xs-text);
	font-weight: 600;
	text-transform: uppercase;
}

.procurement-drawer__list {
	position: static;
	max-width: none;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
}

/* Documents table. */

/* «Documents List» `3807:7597` is 80px below «Filters Bar»'s
   own frame edge, and 180px above «Footer»'s (the same
   recurring 180px inter-section gap `partnership.css`
   documents). */
.procurement-documents {
	padding-top: 80px;
	padding-bottom: 180px;
}

.procurement-documents__inner {
	max-width: 1696px;
	margin-inline: auto;
	padding-inline: var(--page-gutter);
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.procurement-documents__intro {
	margin: 0;
	max-width: 720px;
	color: var(--color-neutral-600);
	font-family: var(--font-body);
	font-size: var(--fs-m-text);
	line-height: var(--lh-m-text);
}

.procurement-empty {
	margin: 0;
	color: var(--color-neutral-600);
	font-family: var(--font-body);
	font-size: var(--fs-m-text);
}

.procurement-table {
	width: 100%;
	border-collapse: collapse;
}

.procurement-table thead {
	display: none;
}

@media (min-width: 768px) {

	.procurement-table thead {
		display: table-header-group;
	}
}

.procurement-table th {
	padding: 22px 16px;
	border-bottom: 1px solid var(--color-neutral-300);
	color: var(--color-neutral-600);
	font-family: var(--font-body);
	font-size: var(--fs-s-text);
	font-weight: 400;
	text-align: left;
}

.procurement-table tr {
	display: block;
	padding: 16px 0;
	border-bottom: 1px solid var(--color-neutral-300);
}

@media (min-width: 768px) {

	.procurement-table tr {
		display: table-row;
		padding: 0;
	}
}

.procurement-table td {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 0;
	color: var(--color-neutral-800);
	font-family: var(--font-body);
	font-size: var(--fs-s-text);
}

@media (min-width: 768px) {

	.procurement-table td {
		display: table-cell;
		padding: 22px 16px;
	}
}

.procurement-table__name {
	font-weight: 600;
	text-transform: uppercase;
}

/* A label before every value under 768, where the header row
   is hidden — the same information the `<th scope="col">`s
   carry, repeated visually because the table becomes a
   stacked list there. */
.procurement-table__category::before,
.procurement-table__date::before {
	content: attr(data-label);
	flex: 0 0 auto;
	color: var(--color-neutral-500);
	font-size: var(--fs-xs-text);
}

@media (min-width: 768px) {

	.procurement-table__category::before,
	.procurement-table__date::before {
		content: none;
	}
}

.procurement-table__format svg {
	display: block;
}

.procurement-table__action {
	justify-content: flex-end;
}

@media (min-width: 768px) {

	.procurement-table__action {
		justify-content: flex-start;
	}
}

.procurement-table__download {
	text-transform: lowercase;
}

.procurement-more {
	margin-top: 8px;
}

@media (forced-colors: active) {

	.procurement-filters,
	.procurement-filter,
	.procurement-table th,
	.procurement-table tr {
		border-color: CanvasText;
	}
}

/* «Page Description» `3977:17483` is `size=w:fixed` — 244px,
   not the shared component's own default hug width. Kept
   SHRINKABLE (`0 1`, not `0 0`): the substitute font's own H1
   ("ПУБЛІЧНІ ЗАКУПІВЛІ" — Kilok is unlicensed, figma-rules.md)
   measures ~1107px against the row's 1310px budget, so a
   non-shrinking 244px column pushes 81px past the viewport
   (overflow-sweep.js caught it). Shrinking here means more
   line-wrapping than the frame draws (verify.md's own allowed
   residual for a text layer's width) instead of a scrollbar. */
@media (min-width: 1440px) {

	.procurement-hero__header .c-section-title__intro {
		flex: 0 1 244px;
	}
}