/* Contacts page — Figma «Контакти» 3812:8043 (1440) / 4482:26612 (390), plan 06
   task 11. Six sections in the frame's own order: the banner with the map,
   «Найпотрібніші контакти», «Плануйте свій візит», «Відділи та контактні особи»
   with «Театр у соцмережах» on the same grey ground, «Офіційна інформація» and
   the form block (plan 07's slot).

   Widths: the frame draws 390 and 1440 only (inventory.md — no 768, no 1920 for
   this page). So the mobile composition holds up to 1440, where the two-column
   grids of the frame take over, and only the shared column (`--page-gutter`,
   container.css) and the type tokens step at 768/1920. Section rhythm follows
   the same ladder visit.css uses for the width it has no frame for: 120 / 160 /
   180 px between sections.

   Kilok is not licensed: the site runs Exo 2 under its name (fonts.css). Figma
   trims the display layers to Kilok's cap height (0.70 em) and the substitute's
   is 0.659 em, so 0.041 em goes back as bottom padding — the same remedy
   section-title.css and visit.css already use, here on the two headings this
   page owns (the H1's type override and the row titles).

   Colour substitutions (designer-questions.md): every `#12AD99` that carries
   TEXT is `--color-primary-700` (2.8:1 → 5.5:1 on white), and the map plate's
   fill likewise — the same two entries the footer and the Visit block already
   have. The person's name in the mock is `#2A2A2A`, a one-off next to the
   file's own `#272B30`; the token is used.

   Animations: the only prototype action under either frame is the shared
   «send» button's hover (animations.md row «Кнопка „Надіслати" форм»), which
   `.c-ticket` already draws — «Прокласти маршрут» and «Написати листа» are
   instances of that set. Nothing else on this page has an interaction. */

.contacts-hero,
.contacts-essential,
.contacts-visit,
.contacts-departments,
.contacts-socials,
.contacts-official,
.contacts-form {
	--contacts-cap-fix: 0.041em;
	--contacts-section-gap: 120px;
	--contacts-section-pad: 80px;
	--contacts-row-pad: 16px;
}

/* ---------------------------------------------------------------- banner */

/* «Hero» 3967:17405 / 4482:26613: breadcrumbs, then the header, the map and the
   address block in one column (390) or the header beside the address with the
   map under both (1440). */
.contacts-hero {
	padding: 0 var(--page-gutter) var(--contacts-section-gap);
	background: var(--color-base-white);
}

/* «Hero» 3967:17405 is one column: the breadcrumbs, then everything else, 24
   apart (36 at 1440). The breadcrumb component is a `nav` around an
   `inline-flex` row, so it is laid out as a flex parent here — otherwise its
   own line box (24 px, the separator's «M/M text» leading) stands in for the
   row's 16 and pushes the whole page 8 px down. */
.contacts-hero__inner {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.contacts-hero__inner > .breadcrumbs {
	display: flex;
}

.contacts-hero__body {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* This page's banner is the one whose H1 is «H1/H1 M» at every width (Page
   Title 3812:8120 — 120/120 at 1440, 60/60 at 390) and whose header stays a
   column while the address block sits beside it; the shared `--banner` variant
   is a row of heading + paragraph, which is a different composition (halls,
   buffet, accessibility). So the type and the gap are overridden here and the
   variant is not used. */
.contacts-hero__header {
	gap: 20px;
}

.contacts-hero__header .c-section-title__heading {
	font-size: var(--fs-h1-m);
	line-height: var(--lh-h1-m);
	letter-spacing: var(--ls-h1-m);
}

/* «Page Description» 4482:26623 keeps its own 284 measure inside the 358 column
   at 390; at 1440 it fills the header's 625. */
.contacts-hero__header .c-section-title__intro {
	max-width: 284px;
}

.contacts-hero__address {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 32px;
}

/* «Address Info» 3967:17410: the label and the street, 12 apart, across the
whole
   address column (the button under it hugs at 390 and fills at 1440). */
.contacts-hero__address-info {
	display: flex;
	flex-direction: column;
	align-self: stretch;
	gap: 12px;
}

/* «Address Text» 3967:17412 — «M/M text (semi bold)», cap-trimmed, uppercase.
*/
.contacts-hero__street {
	margin: 0;
	color: var(--color-neutral-800);
	font-family: var(--font-body);
	font-size: var(--fs-m-text);
	font-style: normal;
	font-weight: 600;
	line-height: var(--lh-m-text);
	letter-spacing: var(--ls-m-text);
	text-box: trim-both cap alphabetic;
	text-transform: uppercase;
}

/* «Get Directions Button» 3891:10318 — an instance of the shared «send» set
   (289×40 at 1440, 234×34 at 390), so it is `.c-ticket` and the hover lines
   come with it. The frame resizes those instances below their own padding
   (40 tall around 14 + 22 + 14 of content), so the box is what the code
   reproduces and the `pad=` of the instance is a residual of the diff
   (task-11-report.md). */

/* «Get Directions Button» 3824:8358 / 4482:26760 and «Написати листа» in the
   form slot fill their column (650×64 at 1440, 358×56 at 390). Figma stores a
   stretched instance's centring as horizontal padding (590/591 px on the 650
   button); the code centres the label with flex, so those two `pad=` values are
   a residual of the diff, not a box difference (task-11-report.md). */
.contacts-visit__route,
.contacts-form__button {
	width: 100%;
	min-height: 56px;
	padding-block: 8px;
	padding-inline: 36px;

	/* `.c-ticket` keeps its label on one line; at 320 px and 150 % text these
	   two labels are wider than their button, so they wrap instead of spilling
	   (at the design sizes both are one line and the box is unchanged). */
	text-align: center;
	white-space: normal;
}

/* ------------------------------------------------------------------- map */

/* «Map Section» 3967:17416 / «Frame 1437255386» 4482:26679. The picture of the
   city is the frame's own asset (the same file the Visit block ships); the
   iframe of ТЗ §4.14 / accessibility-ua.md §3.6 covers it once it loads, so the
   box keeps the frame's ratio whichever of the two is on screen. */
.contacts-map {
	position: relative;
	aspect-ratio: 1328 / 652;
	overflow: hidden;
}

.contacts-map__image,
.contacts-map__frame {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
}

/* The frame the button loads covers the picture it replaces. */
.contacts-map__slot,
.contacts-map__frame {
	position: absolute;
	inset: 0;
}

.contacts-map__slot:empty {
	display: none;
}

/* «Показати інтерактивну мапу» is not in the frame — it is the consent step
   docs/decisions.md 06-15 asks for, so it sits in the picture's own corner on a
   white plate and leaves the composition above it alone. */
.contacts-map__load {
	position: absolute;
	right: 16px;
	bottom: 16px;
	background: var(--color-base-white);
}

/* `.c-ticket`'s own `display: inline-flex` beats the UA rule for `[hidden]`,
   and the button stays hidden until the module unhides it. */
.contacts-map__load[hidden] {
	display: none;
}

/* «Theater Logo Badge» 3967:17419 / «Theater Info» 4482:26685 — the shared
   plate (`.c-map-badge` in visit.css; this page depends on that handle for
   exactly those four rules). Only the position and the scale belong here:
   50.857/89 of the 1440 plate below that width, full size from 1440. */
.contacts-map__badge {
	--map-badge-scale: 0.5714286;
	top: 56px;
	left: 168px;
}

/* -------------------------------------------------- shared row vocabulary */

/* «Phone Label» / «Email Label» — «S/S text (regular)» on `#4A5563`. */
.contacts-label {
	margin: 0;
	color: var(--color-neutral-600);
	font-family: var(--font-body);
	font-size: var(--fs-s-text);
	font-weight: 400;
	line-height: var(--lh-s-text);
	letter-spacing: var(--ls-s-text);
}

/* «Address Heading» 3967:17411 — the same label in teal (contrast token). */
.contacts-label--accent {
	color: var(--color-primary-700);
	font-weight: 600;
	text-transform: uppercase;
}

/* «Working Hours» 3817:8228 — «M/M text», cap-trimmed, two lines broken by the
   designer's own U+2028 (printed with `nl2br()`). */
.contacts-hours {
	margin: 0;
	color: var(--color-neutral-600);
	font-family: var(--font-body);
	font-size: var(--fs-m-text);
	font-weight: 400;
	line-height: var(--lh-m-text);
	letter-spacing: var(--ls-m-text);
	text-box: trim-both cap alphabetic;

	/* Each period keeps its own line, as the frame's two-line box does; the
	   substitute font is wider than Sofia Pro, so the box is wider than the
	   frame's 203 px and grows leftwards from the same right edge (the allowed
	   text-width residual). */
	white-space: nowrap;
}

/* A white row: «Box Office Row» 3817:8135 / 4482:26692 and every department
   row. At 390 the row is a stacked card, at 1440 the name sits left of the
   values (see the 1440 block below). */
.contacts-row {
	display: flex;
	flex-direction: column;
	gap: 24px;
	box-sizing: border-box;
	padding: var(--contacts-row-pad);
	background: var(--color-base-white);
}

/* «Box Office» 3817:8137, «Department Title» 3894:11425 — «H6/2», cap-trimmed,
   uppercase. */
.contacts-row__title {
	margin: 0;
	padding-bottom: var(--contacts-cap-fix);
	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-align: left;
	text-box: trim-both cap alphabetic;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}

/* «Contact Details» 3824:8558 / 4482:26719: the values stand side by side at
   both widths (the rows with one value cannot tell). */
.contacts-row__details {
	display: flex;
	gap: 12px;
	margin: 0;
}

.contacts-row__detail {
	display: flex;
	flex: 1 1 0;
	min-width: 0;
	flex-direction: column;
	gap: 8px;
}

/* «Phone Number» / «Email Address» — «M/M text», cap-trimmed. The link keeps
   the value's own type; the underline is the page's own affordance for a
   telephone and an address (nothing in the frame draws one, so it appears on
   hover and focus only). */
.contacts-row__value {
	margin: 0;
}

.contacts-row__link {

	/* `text-box` trims a block's line box, so the link and the name are blocks
	   — as an inline they would keep the font's own leading (25.8 px instead of
	   the frame's 14 at 1440). */
	display: block;
	color: var(--color-neutral-800);
	font-family: var(--font-body);
	font-size: var(--fs-m-text);
	font-weight: 400;
	line-height: var(--lh-m-text);
	letter-spacing: var(--ls-m-text);
	text-box: trim-both cap alphabetic;
	text-decoration: none;
	overflow-wrap: anywhere;
}

.contacts-row__link:hover,
.contacts-row__link:focus-visible {
	color: var(--color-primary-700);
	text-decoration: underline;
}

/* ------------------------------------------- «Найпотрібніші контакти» */

.contacts-essential {
	padding: var(--contacts-section-pad) var(--page-gutter);
	background: var(--color-neutral-100);
}

/* Heading, the schedule line 40 under it, the rows 24 under that (the 390
   frame's own column). */
.contacts-essential__inner {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.contacts-essential .contacts-hours,
.contacts-departments .contacts-hours {
	margin-top: 16px;
}

.contacts-essential__rows {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ----------------------------------------- «Плануйте свій візит» */

/* Not the shared Visit component: three transport tiles over the address and
   the route button, with the map and two photographs beside them at 1440
   (3824:8328 / 4482:26726 — see the part's own docblock). This one section
   stands 160 below the block before it at 390 and 180 at 1440; every other pair
   is 120/180. */
.contacts-visit {
	margin-top: 160px;
	padding: 0 var(--page-gutter);
	background: var(--color-base-white);
}

.contacts-visit__inner {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.contacts-visit__cards {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* «Public Transport Row» 3824:8331 / 4482:26730: a grey tile, the label above
   the line the theatre wrote, the two pushed apart. */
.contacts-tile {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 32px;
	min-height: 118px;

	/* 16 at both widths — the tile's own padding, not the contact rows' 24/32. */
	padding: 16px;
	background: var(--color-neutral-100);
}

.contacts-tile__title {
	margin: 0;
	color: var(--color-primary-700);
	font-family: var(--font-body);
	font-size: var(--fs-s-text);
	font-weight: 600;
	line-height: var(--lh-s-text);
	letter-spacing: var(--ls-s-text);
	text-transform: uppercase;
}

/* «Transport Value» 3824:8333 — «S/S text (semi bold)» on `#272B30` (the 1440
   node's own font fields say Kilok in caps, which its own 22 px line box
   contradicts: the 390 twin is Sofia Pro Semi Bold — designer-questions.md). */
.contacts-tile__text {
	margin: 0;
	color: var(--color-neutral-800);
	font-family: var(--font-body);
	font-size: var(--fs-s-text);
	font-weight: 600;
	line-height: var(--lh-s-text);
	letter-spacing: var(--ls-s-text);
}

/* «Address Row» 3824:8350 keeps 16 px of air at its right edge, at both
widths. */
.contacts-visit__address {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-right: 16px;
}

/* «Address Value» 3824:8353 — «H3» (36/36 at 1440, 28/28 at 390), cap-trimmed,
   uppercase: this one is set in the display face, unlike the banner's
   address. */
.contacts-visit__street {
	margin: 0;
	padding-bottom: var(--contacts-cap-fix);
	color: var(--color-neutral-800);
	font-family: var(--font-title);
	font-size: var(--fs-h3);
	font-style: normal;
	font-weight: 400;
	line-height: var(--lh-h3);
	letter-spacing: var(--ls-h3);
	text-box: trim-both cap alphabetic;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}

.contacts-visit__media {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* The map is one flat picture at every width (652×320 at 1440, 358×175.7 at
   390 — the same 2.0375 ratio), so it scales with the column. */
.contacts-visit__map {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 652 / 320;
	object-fit: cover;
}

.contacts-visit__photos {
	display: flex;
	gap: 12px;
}

.contacts-visit__photo {
	flex: 1 1 0;
	min-width: 0;
	height: auto;
	aspect-ratio: 314 / 180;
	object-fit: cover;
}

/* The plate over the photographs sits at the same place as the Visit block's
   («Theater Logo Overlay» 3824:8402 → 301/109 at 1440, 168/56 at 390). */
.contacts-visit__badge {
	top: 56px;
	left: 168px;
}

/* ----------------------------------- «Відділи та контактні особи» */

/* One grey ground carries the departments and the social cards («Departments
   And Social Media Section» 3894:11419), so the pair has no gap between them:
   the departments' own bottom padding is the air above the social heading (120
   at 390, 180 at 1440 — «Departments Section» 3894:11420 is 1335 tall against a
   960 list). */
.contacts-departments {
	margin-top: var(--contacts-section-gap);
	padding: var(--contacts-section-pad) var(--page-gutter) var(--contacts-section-gap);
	background: var(--color-neutral-100);
}

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

/* Cards until 1440, a four-column table from there (both with the roles written
   out in the markup, so the `display` switch never costs the table
   semantics). */
.contacts-departments__table {
	display: block;
	width: 100%;
	text-align: left;
}

.contacts-departments__table tbody {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* The rows are cards, not a grid of cells, until 1440 — hence the explicit
   roles in the markup: a `display` change takes the table semantics away from
   assistive technology, and the roles put them back. */
.contacts-row--department {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* At 390 the title sits 24 above the values and the three values are 20 apart
   («Contact Details» 4482:26947 inside a row whose own gap is 24). */
.contacts-row--department {
	gap: 24px;
}

.contacts-row--department > .contacts-row__detail {
	margin-top: -4px;
}

/* The cells carry no padding and no weight of their own — the row does (a `th`
   would otherwise come out bold and centred). */
.contacts-row--department > .contacts-row__title,
.contacts-row--department > .contacts-row__person,
.contacts-row--department > .contacts-row__detail {
	padding: 0;
	font-weight: 400;
}

.contacts-row--department > .contacts-row__title {
	display: block;
}

.contacts-row__person {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.contacts-row__position {
	display: block;
	color: var(--color-neutral-600);
	font-family: var(--font-body);
	font-size: var(--fs-s-text);
	font-weight: 400;
	line-height: var(--lh-s-text);
	letter-spacing: var(--ls-s-text);
}

.contacts-row__name {
	display: block;
	color: var(--color-neutral-800);
	font-family: var(--font-body);
	font-size: var(--fs-m-text);
	font-weight: 400;
	line-height: var(--lh-m-text);
	letter-spacing: var(--ls-m-text);
	text-box: trim-both cap alphabetic;
}

.contacts-row--department .contacts-row__detail {
	display: flex;
	flex: 1 1 0;
	min-width: 0;
	flex-direction: column;
	gap: 8px;
}

/* ------------------------------------------- «Театр у соцмережах» */

.contacts-socials {
	padding: 0 var(--page-gutter) var(--contacts-section-pad);
	background: var(--color-neutral-100);
}

.contacts-socials__inner {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.contacts-socials__cards {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* «Facebook Card» 3894:11476 / 4482:27015: the whole card is the link, and
   «Card Content» inside it holds the header and the sentence 20 apart. */
.contacts-social__link {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: var(--contacts-row-pad);
	background: var(--color-base-white);
	text-decoration: none;
}

.contacts-social__content {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 20px;
}

.contacts-social__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.contacts-social__info {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* «Platform Name» 3894:11481 — «S/S text (semi bold) caps» in teal (contrast
   token). */
.contacts-social__name {
	display: block;
	color: var(--color-primary-700);
	font-family: var(--font-body);
	font-size: var(--fs-s-text);
	font-weight: 600;
	line-height: var(--lh-s-text);
	letter-spacing: var(--ls-s-text);
	text-transform: uppercase;
}

/* «Handle» 3894:11480 — «H5» in the body face at 600 (two of the three cards;
   the Facebook one says Kilok in caps, which the other two contradict —
   designer-questions.md). */
.contacts-social__handle {
	display: block;
	color: var(--color-neutral-800);
	font-family: var(--font-body);
	font-size: var(--fs-h5);
	font-weight: 600;
	line-height: var(--lh-h5);
	letter-spacing: var(--ls-h5);
	overflow-wrap: anywhere;
}

/* «Icon Wrapper» 3894:11483 — a 40×40 box with the frame's 2px teal inside
   stroke (a box-shadow, so the box itself does not grow). */
.contacts-social__icon {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	box-shadow: inset 0 0 0 2px var(--color-primary-500);
}

.contacts-social__icon svg {
	display: block;
	fill: var(--color-neutral-800);
}

/* «Card Description» 3894:11487 keeps its own 220 measure at both widths. */
.contacts-social__text {
	display: block;
	max-width: 220px;
	color: var(--color-neutral-600);
	font-family: var(--font-body);
	font-size: var(--fs-s-text);
	font-weight: 400;
	line-height: var(--lh-s-text);
	letter-spacing: var(--ls-s-text);
}

.contacts-social__link:hover .contacts-social__handle,
.contacts-social__link:focus-visible .contacts-social__handle {
	color: var(--color-primary-700);
}

/* --------------------------------------------- «Офіційна інформація» */

.contacts-official {
	margin-top: var(--contacts-section-gap);
	padding: 0 var(--page-gutter);
	background: var(--color-base-white);
}

.contacts-official__inner {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.contacts-official__rows {
	margin: 0;
}

/* Every row of «Organization Details» 3824:8639 carries the same 1px bottom
   rule and 24px of air above and below its label (the first row's top padding
   is the section's own gap, hence 0). */
.contacts-official__row {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 24px 0;
	box-shadow: inset 0 -1px 0 0 var(--color-neutral-300);
}

/* Only the first row of «Organization Details» opens without air above it; the
   registration group's own first row keeps its 24 (3824:8678). */
.contacts-official__group--details .contacts-official__row:first-child {
	padding-top: 0;
}

/* «Official Name Value» 3824:8644 — «Menu,button»: the body face at 600, in
   caps (20/24 at 1440, 16/18.7 at 390). */
.contacts-official__value {
	margin: 0;
	color: var(--color-neutral-800);
	font-family: var(--font-body);
	font-size: var(--fs-menu-button);
	font-weight: 600;
	line-height: var(--lh-menu-button);
	letter-spacing: var(--ls-menu-button);
	text-transform: uppercase;
	overflow-wrap: anywhere;
}

.contacts-official__doc {
	text-align: left;
}

/* ------------------------------------------------------- the form slot */

.contacts-form {
	margin-top: var(--contacts-section-gap);
	padding: var(--contacts-section-pad) var(--page-gutter);
	background: var(--color-neutral-100);
}

.contacts-form__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
}

/* «Form Title Block» 3981:22884: the heading and its line are centred. */
.contacts-form__header {
	align-items: center;
	gap: 24px;
	text-align: center;
}

/* «Form Fields Block» 3981:22889 — the white card. Until plan 07 fills it with
   the form, it carries the department the letter would reach. */
.contacts-form__card {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 32px;
	width: 100%;
	padding: 32px 12px;
	background: var(--color-base-white);
}

.contacts-form__lead {
	margin: 0;
	color: var(--color-neutral-600);
	font-family: var(--font-body);
	font-size: var(--fs-s-text);
	font-weight: 400;
	line-height: var(--lh-s-text);
	letter-spacing: var(--ls-s-text);
}

.contacts-form__details {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin: 0;
}

.contacts-form__detail {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.contacts-form__value {
	margin: 0;
}

/* ================================================================== 768 */

@media (min-width: 768px) {

	.contacts-hero,
	.contacts-essential,
	.contacts-visit,
	.contacts-departments,
	.contacts-socials,
	.contacts-official,
	.contacts-form {
		--contacts-section-gap: 160px;
	}
}

/* ================================================================= 1440 */

@media (min-width: 1440px) {

	.contacts-hero,
	.contacts-essential,
	.contacts-visit,
	.contacts-departments,
	.contacts-socials,
	.contacts-official,
	.contacts-form {
		--contacts-section-gap: 180px;
		--contacts-section-pad: 100px;
		--contacts-row-pad: 24px 32px;
	}

	/* ----------------------------------------------------------- banner */

	/* «Frame 1437255397» 4488:25794: the header row (954 = 625 + 40 + 289,
	   bottom-aligned) and the map under it, 36 apart; the breadcrumbs are
	   another 36 above. */
	.contacts-hero__inner {
		gap: 36px;
	}

	/* «Frame 1437255397» 4488:25794: the header row hugs 954 = 625 + 40 + 289
	   and the map under it fills the whole 1328 column, hence the empty third
	   track. */
	.contacts-hero__body {
		display: grid;
		grid-template-columns: 625px 289px minmax(0, 1fr);
		gap: 36px 40px;
		align-items: end;
	}

	.contacts-hero__header {
		grid-column: 1;
	}

	/* At 1440 the paragraph fills the header's own 625 column. */
	.contacts-hero__header .c-section-title__intro {
		max-width: none;
	}

	.contacts-hero__address {
		grid-column: 2;
		grid-row: 1;
		align-items: stretch;
	}

	.contacts-hero__map {
		grid-row: 2;
	}

	.contacts-hero__route {
		width: 100%;
	}

	.contacts-hero__header {
		gap: 32px;
	}


	.contacts-hero__map {
		grid-column: 1 / -1;
	}

	.contacts-map__badge {
		--map-badge-scale: 1;
		top: 281px;
		left: 666px;
	}

	/* ------------------------------------------------ contact rows */

	/* «Box Office Row» 3817:8135: the name in a 400 column, the values in an
	   832 one, pushed to the two ends of the row. */
	.contacts-row {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 32px;
	}

	.contacts-row__title {
		flex: 0 0 400px;
	}

	.contacts-row__details {
		flex: 0 0 832px;
		gap: 20px;
	}

	.contacts-row__detail {
		flex: 0 0 406px;
		gap: 12px;
	}

	.contacts-visit__address {
		padding-right: 16px;
	}

	/* 3817:8128 / 3894:11420: the heading and the schedule line share the first
	   row of the section's own grid, the list fills the second. */
	.contacts-essential__inner,
	.contacts-departments__inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: start;
		gap: 56px 40px;
	}

	.contacts-essential .contacts-hours,
	.contacts-departments .contacts-hours {
		grid-column: 2;
		grid-row: 1;
		margin-top: 0;
		text-align: right;
	}

	.contacts-essential__rows,
	.contacts-departments__table {
		grid-column: 1 / -1;
	}

	.contacts-visit__inner,
	.contacts-socials__inner,
	.contacts-official__inner {
		gap: 56px;
	}

	/* --------------------------------------- «Плануйте свій візит» */

	/* 3824:8328: the tiles, the address and the button in a 650 column, the
	   map and the photographs in a 652 one, the two pushed apart (1328 −
	   650 − 652 = 26). The tiles keep the top of the column and the address
	   pair its bottom, which is the frame's own `space-between` (the 429-tall
	   «Visit Info» holds 174 + 84 + 171). */
	.contacts-visit {
		margin-top: var(--contacts-section-gap);
	}

	.contacts-visit__inner {
		display: grid;
		grid-template-columns: 650px 652px;
		grid-template-rows: auto auto 1fr auto;
		justify-content: space-between;
		gap: 0 26px;
	}

	.contacts-visit__header {
		grid-column: 1;
		grid-row: 1;
		margin-bottom: 56px;
	}

	.contacts-visit__cards {
		grid-column: 1;
		grid-row: 2;
		flex-direction: row;
		gap: 8px;
	}

	.contacts-visit__address {
		grid-column: 1;
		grid-row: 3;
		align-self: end;
		gap: 12px;

		/* «Address Row» 3824:8350 keeps 16 px of air at its right edge. */
		padding-right: 16px;
		margin-bottom: 48px;
	}

	.contacts-visit__route {
		grid-column: 1;
		grid-row: 4;
	}

	.contacts-visit__media {
		grid-column: 2;
		grid-row: 1 / -1;
		gap: 24px;
	}

	.contacts-tile {
		flex: 1 1 0;
		min-width: 0;
		min-height: 174px;
	}

	.contacts-visit__photos {
		gap: 24px;
	}

	.contacts-visit__badge {
		top: 109px;
		left: 301px;
	}

	/* ------------------------------ departments, socials, official */

	/* «Department List» 3894:11420: 32 + 340 + 36 + 340 + 24 + 200 + 24 + 300 +
	   32 = 1328, every row 96 tall with its values centred. The four columns are
	   flex items with the frame's own three different gaps (36 / 24 / 24), so the
	   row's own box stays the 1328 the section's column gives it. */
	.contacts-row--department {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 0;
	}

	.contacts-row--department > .contacts-row__title {
		flex: 0 0 340px;
		margin-right: 36px;
	}

	.contacts-row--department > .contacts-row__person {
		flex: 0 0 340px;
		margin-right: 24px;
	}

	.contacts-row--department > .contacts-row__detail {
		flex: 0 0 200px;
		margin-top: 0;
		margin-right: 24px;
	}

	.contacts-row--department > .contacts-row__detail:last-child {
		flex: 0 0 300px;
		margin-right: 0;
	}

	.contacts-row--department .contacts-row__person {
		gap: 12px;
	}

	.contacts-row--department .contacts-row__detail {
		gap: 12px;
	}

	.contacts-socials__cards {
		flex-direction: row;
		gap: 24px;
	}

	.contacts-social {
		flex: 1 1 0;
		min-width: 0;
	}

	.contacts-social__link {
		height: 100%;
		padding: 24px;
	}

	.contacts-social__info {
		gap: 8px;
	}

	/* 3824:8637: «Organization Details» in a 636 column, «Registration And
	   Documents» in another, the two pushed to the ends of the page column. */
	.contacts-official__rows {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
	}

	.contacts-official__group {
		flex: 0 0 636px;
	}

	/* The rows of both columns are label against value, the value in its own
	   420 box on the right. */
	.contacts-official__row {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 24px;
	}

	.contacts-official__row .contacts-label {
		flex: none;
	}

	.contacts-official__value {
		flex: 0 0 420px;
	}

	.contacts-official__row--name .contacts-official__value {
		text-align: right;
	}

	/* --------------------------------------------------- form slot */

	.contacts-form__inner {
		gap: 54px;
	}

	.contacts-form__header {
		width: 634px;
		max-width: 100%;
		gap: 24px;
	}

	.contacts-form__card {
		width: 662px;
		padding: 32px;
	}

	.contacts-visit__route,
	.contacts-form__button {
		min-height: 64px;
	}
}