/* «Співпраця та партнерство» — Figma `3789:15666` (1440) /
   `4436:34393` (390), plan 06 task 10.

   The banner is the shared `.c-section-title--banner`
   composition with no photo («Hero Background Shape»
   `3977:17460` is a flat `--color-neutral-100` fill, not an
   image layer). «Можливості співпраці» is two rows of three
   cards at 1440 (`3789:15715`, 427×232 each, 24px gap)
   collapsing to one column under 768. «Надіслати заявку»
   (`3789:15828`) is the plan-07 slot: heading, lead and a
   `mailto:` button on a `--color-neutral-100` band, in place
   of the frame's own two-column form composition. */

/* «Hero» — absolutely positioned in both frames (no
   auto-layout padding of its own): the breadcrumbs sit flush
   with the frame's own top edge, and the grey fill runs past
   the last text row by a real breakpoint value, not a scaled
   one (390 `4436:34393`: content ends at 76+322=398, frame
   ends at 411 → 13px is folded into the smaller `--font-scale`
   rounding below, not written separately; 1440 `3789:15666`:
   150px, review-confirmed). Same for the breadcrumbs-to-title
   gap (390: title block starts at 180, breadcrumbs end at 91 →
   89px; 1440: 98px, both from `figma-spec.py`, not estimated). */
.partnership-hero {
	background: var(--color-neutral-100);
	padding-top: 0;
	padding-bottom: 102px;
}

@media (min-width: 1440px) {

	.partnership-hero {
		padding-bottom: 150px;
	}
}

/* The three sections of this page stand on the page column and nothing else:
   `padding-inline` is `--page-gutter` (container.css). Each `__inner` also
   carried `max-width: 1696px`, which is that column's own content width at
   1920 (1920 − 2 × 112) written as a length — inert at 1440, exact at 1920 and
   wrong above it, where it held the page at 1696 while the header went on
   widening (client fix ПР-20). The cap is gone; the inners are as wide as the
   column, at 1440 and 1920 to the pixel they were. */
.partnership-hero__inner {
	margin-inline: auto;
	padding-inline: var(--page-gutter);
	display: flex;
	flex-direction: column;
	gap: 89px;
}

@media (min-width: 1440px) {

	.partnership-hero__inner {
		gap: 98px;
	}
}

/* The shared `breadcrumbs.css` colours its links
   `--color-neutral-500` (#697482), 4.32:1 on this banner's own
   `--color-neutral-100` fill — fails WCAG AA (design/figma/
   designer-questions.md, the box-office-hours defect
   recurring). Overridden here, not in the shared file: every
   other page's banner is white or a photo, where 4.32:1 never
   happens. `--color-neutral-600` is the same substitute the
   header and the footer already use for the identical
   contrast failure (6.89:1). */
.partnership-hero .breadcrumbs a {
	color: var(--color-neutral-600);
}

.partnership-hero__header {
	max-width: 1297px;
}

/* «Можливості співпраці» `3789:15715`. */

/* «Collaboration Opportunities Section» `3789:15715` is
   absolutely positioned in the frame, so the gap above and
   below it is plain inter-section spacing, not this section's
   own padding — written here rather than as margin on the
   neighbours (Hero's bottom, Contact Form's top).

   Review (fix round 1, Critical): the values below were
   applied unconditionally at every width, giving 390 a ~250px
   gap the frame never draws (`4436:34393`: Hero Section ends
   at 76+335=411, «Frame 1437255382» starts at 531 — a 120px
   gap, not 246) — confirmed by `figma-spec.py design/figma/
   file.json 3789:15715 --depth 4` at both widths, not
   estimated. The header-to-cards gap is a real breakpoint
   change too (`gap=40` at 390 vs `gap=54` at 1440,
   computed from `877-823` on the 1440 frame — not a scaled value). */
.partnership-options {
	padding-top: 120px;
	padding-bottom: 120px;
}

@media (min-width: 1440px) {

	.partnership-options {
		padding-top: 172px;
		padding-bottom: 180px;
	}
}

.partnership-options__inner {
	margin-inline: auto;
	padding-inline: var(--page-gutter);
	display: flex;
	flex-direction: column;
	gap: 40px;
}

@media (min-width: 1440px) {

	.partnership-options__inner {
		gap: 54px;
	}
}

.partnership-options__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: podil-partnership-option;
}

@media (min-width: 768px) {

	.partnership-options__list {
		grid-template-columns: repeat(2, 1fr);
		gap: 24px;
	}
}

@media (min-width: 1440px) {

	.partnership-options__list {
		grid-template-columns: repeat(3, 1fr);
	}
}

.partnership-option {
	counter-increment: podil-partnership-option;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 16px;
	min-height: 232px;
	padding: 16px;
	background: var(--color-neutral-100);
	overflow: hidden;
}

/* «Decorative Arrow» `3789:15744` — the same corner-bracket
   construction `.access-step__corner` uses (accessibility.css),
   reused here at its own 1440 size. */
.partnership-option__corner {
	position: absolute;
	top: 0;
	right: 0;
	width: 54.58px;
	height: 32.62px;
	background-image:
		linear-gradient(var(--color-primary-500), var(--color-primary-500)),
		linear-gradient(var(--color-primary-500), var(--color-primary-500));
	background-repeat: no-repeat;
	background-position: left top, right top;
	background-size: 54.58px 14.5px, 8.516px 32.62px;
}

/* «Card Number» `04`…`01` etc (text-style «H3», Kilok-Bold
   36/36, case=upper) — the frame's own «01»…«06» is this
   list's position, written here rather than stored
   (`inc/parts/partnership.php`'s own docblock,
   accessibility-ua.md §3.6: a number and its label are read
   together, which a counter gives an `<ol>` for free).

   The frame's own colour, `--color-primary-500` (#12AD99), is
   2.56:1 on this card's `--color-neutral-100` fill — fails
   WCAG AA even at the large-text threshold (3:1). Substituted
   with `--color-primary-700` (4.98:1), the same token
   details-link.css and event-card.css already use for the
   identical defect (design/figma/designer-questions.md). */
.partnership-option::before {
	content: counter(podil-partnership-option, decimal-leading-zero);
	align-self: flex-end;
	color: var(--color-primary-700);
	font-family: var(--font-title);
	font-size: var(--fs-h3);
	line-height: var(--lh-h3);
	font-weight: 400;
	text-transform: uppercase;
}

/* «Card Title» (text-style «H6/2», Kilok-Bold 24/24 at 1440,
   case=upper) — the display font, not the body one. */
.partnership-option__title {
	margin: 0;
	color: var(--color-neutral-800);
	font-family: var(--font-title);
	font-size: var(--fs-h6);
	font-weight: 400;
	line-height: var(--lh-h6);
	letter-spacing: var(--ls-h6);
	text-transform: uppercase;

	/* leadingTrim CAP_HEIGHT (checked in file.json: this text node's own
	   hug height is 17 against a 24 line-height) — the section-title
	   heading's own remedy (section-title.css), applied here too. */
	text-box: trim-both cap alphabetic;
}

/* «Card Description» (text-style «S/S text (regular)»). */
.partnership-option__body {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.partnership-option__text {
	margin: 0;
	color: var(--color-neutral-800);
	font-family: var(--font-body);
	font-size: var(--fs-s-text);
	line-height: var(--lh-s-text);
}

/* «Надіслати заявку» `3789:15828` — the plan-07 slot.

   «Contact Form Section» is `pad=80/16/80/16` under 1440
   (`4436:34393`) and `100/56/100/56` at 1440 (`3789:15666`) —
   a real breakpoint change, not a scaled one; the horizontal
   half is `--page-gutter`, which already resolves to those
   same two values. */
.partnership-form {
	background: var(--color-neutral-100);
	padding-block: 80px;
}

@media (min-width: 1440px) {

	.partnership-form {
		padding-block: 100px;
	}
}

.partnership-form__inner {
	margin-inline: auto;
	padding-inline: var(--page-gutter);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
}

.partnership-form__button {
	display: inline-flex;
}

.partnership-form__email {
	margin: 0;
}

.partnership-form__email a {
	color: var(--color-neutral-700);
	font-family: var(--font-body);
	font-size: var(--fs-s-text);
}

@media (forced-colors: active) {

	.partnership-option {
		border: 1px solid CanvasText;
	}
}