/* Site footer — Figma «Site Footer» 4157:11976 (390) / 4190:19127 (768) /
   3015:2498 (1440) / 4217:13460 (1920). Inside strokes are
   `box-shadow: inset` per project convention (a `border` would change the
   box). No token matches Figma's literal #FFFFFF text/desc color here (same
   gap as site-header.css's `.site-header--white` — see
   designer-questions.md); `rgb(255 255 255)` avoids both a raw hex literal
   and the disallowed `white` keyword. The "Site Footer (Betty Nansen ref)"
   giant background wordmark (Footer-Logo__3673-14583.svg, viewBox
   1500×183, Figma «Logo» 1159:7804 at 1440) was exported "trim to content",
   so its own coordinate space starts at the mark's full, un-clipped left
   bleed rather than at the frame's left edge: in every "Logo" frame
   (390/768/1440/1920) the mark's outline sits at x ≈ −4.0816% of the frame
   width, clipped by the frame boundary, and the frame's own content runs
   ≈104.1667% of the frame width (1500/1440). Rendering the asset at
   `width: 100%` with no offset (the previous rule) scales that whole
   un-clipped 104.1667%-wide graphic down to fit the visible band, which is
   exactly the client-reported bug: mark inset from the left edge instead of
   bleeding off it, wordmark smaller than the frame and not reaching the
   right edge. Fixed the same way at every width, fluidly, with no
   breakpoint overrides: the band clips (`overflow: hidden`) and the svg is
   rendered oversize and shifted left by those two constants
   (`width: 104.1667%; margin-left: -4.0816%`), which also reproduces the
   Figma per-breakpoint heights (390: 50px, 768: 98px, 1440: 183px exactly,
   1920: 244px exactly) to within 1px. Residual: the 768 "Logo" frame
   (4190:19211) is itself drawn 772px wide, not 768; at the real 768px
   viewport this is a 4px width shy of that frame, inherent to the frame's
   own sizing and not fixable from the dev-side breakpoint — see
   client-fixes-report.md, ПР-1.

   Every horizontal padding that is a PAGE gutter reads `--page-gutter`
   (components/container.css) instead of spelling 16/32/56/112 out again: the
   footer's columns, the header's bar and every section between them stand on
   one pair of edges at every viewport width, which is the whole of client fix
   ПР-20. The 32/48 inside `.site-footer__col` and the copyright's 24 are the
   frame's own internal paddings and stay literal. */

.site-footer {
	background: var(--color-neutral-100);
}

.site-footer__newsletter {
	display: flex;
	flex-direction: column;
	gap: 40px;
	justify-content: center;
	padding: 56px var(--page-gutter);
	background: var(--color-neutral-800);
}

.site-footer__newsletter-copy {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.site-footer__newsletter-title {
	margin: 0;
	color: var(--color-primary-500);
	font-family: var(--font-title);
	font-size: var(--fs-h3);
	font-weight: 400;
	line-height: var(--lh-h3);
	letter-spacing: var(--ls-h3);
	text-transform: uppercase;
}

.site-footer__newsletter-desc {
	margin: 0;
	max-width: 47em;
	color: rgb(255 255 255);
	font-family: var(--font-body);
	font-size: var(--fs-s-text);
	line-height: var(--lh-s-text);
	letter-spacing: var(--ls-s-text);
}

.site-footer__newsletter-form {
	width: 100%;
	background: var(--color-neutral-800);
}

/* Main content: address/hours/socials, site map, partner. */

.site-footer__main {
	display: flex;
	flex-direction: column;
	box-shadow: inset 0 -1px 0 0 var(--color-neutral-300);
}

.site-footer__col-title {
	margin: 0;
	color: var(--color-neutral-800);
	font-family: var(--font-title);
	font-size: var(--fs-h3);
	font-weight: 400;
	line-height: var(--lh-h3);
	letter-spacing: var(--ls-h3);
	text-transform: uppercase;
}

.site-footer__partner-title {
	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;
}

.site-footer__col--find {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 32px;
	padding: 40px var(--page-gutter);
}

.site-footer__stage {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.site-footer__stage-heading,
.socials__heading {
	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);
	text-transform: uppercase;
}

.site-footer__address,
.site-footer__phone {
	margin: 0;
	color: var(--color-neutral-800);
	font-family: var(--font-body);
	font-size: var(--fs-m-text);
	font-weight: 600;
	line-height: var(--lh-m-text);
	letter-spacing: var(--ls-m-text);
	text-transform: uppercase;
}

.site-footer__phone a {
	color: inherit;
	text-decoration: none;
}

.site-footer__hours {
	margin: 0;

	/* Figma has #697482 (--color-neutral-500) here, 4.32:1 on the
	   --color-neutral-100 footer background — fails axe color-contrast
	   (WCAG AA needs 4.5:1). --color-neutral-600 is the closest token that
	   clears it (6.89:1), same fix as site-header.css's nav links.
	   Flagged in designer-questions.md. */
	color: var(--color-neutral-600);
	font-family: var(--font-body);
	font-size: var(--fs-s-text);
	line-height: var(--lh-s-text);
	letter-spacing: var(--ls-s-text);
}

.socials__list {
	display: flex;
	flex-wrap: wrap;
	width: fit-content;
	gap: 6px;
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
}

.socials__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	box-shadow: inset 0 0 0 2px var(--color-primary-500);
}

.socials__link svg {
	width: 16px;
	height: 16px;
}

/* Site map. */

.site-footer__sitemap {
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	gap: 24px;
	padding: 40px var(--page-gutter);
	box-shadow: inset 0 1px 0 0 var(--color-neutral-300);
}

.site-footer__col {
	box-sizing: border-box;
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 28px;

	/* Flex items default to `min-width: auto`, which floors this column at
	   its longest unbreakable word's width ("адміністративно-управлінський"
	   still has an unbreakable ~180px remainder past its own hyphen at 16px)
	   regardless of `flex: 1 1 0`. Below ~360px combined with 150 % text that
	   floor exceeds the row's available width and forces a page-level
	   horizontal scrollbar (ПР-5). `overflow-wrap: anywhere` on the links
	   below already shrinks the min-content contribution used for this auto
	   minimum; `min-width: 0` is the defensive belt-and-braces pairing so
	   the column can still shrink to its `flex-basis` share even if a future
	   link text has no break opportunity at all. Neither changes anything
	   where the column already had room (390/768/1440/1920 keep their
	   current widths — verified against spec-diff). */
	min-width: 0;
}

.site-footer__sitemap-heading {
	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;
}

.site-footer__sitemap-group .site-footer__sitemap-heading {
	font-size: var(--fs-s-text);
	line-height: var(--lh-s-text);
}

.site-footer__sitemap-heading--link a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: inherit;
	text-decoration: none;

	/* Same as `.site-footer__sitemap-links a` (ПР-5): an all-caps heading
	   like "РЕПЕРТУАР" has no natural break, and at 150 % text scale its
	   width plus the 27px arrow icon can exceed a column already shrunk by
	   `.site-footer__col`'s `min-width: 0`. */
	overflow-wrap: anywhere;
}

.site-footer__sitemap-heading--link svg {
	width: 27px;
	height: 12px;
}

.site-footer__sitemap-group {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.site-footer__sitemap-links {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__sitemap-links a {
	color: var(--color-neutral-800);
	font-family: var(--font-body);
	font-size: var(--fs-s-text);
	line-height: var(--lh-s-text);
	letter-spacing: var(--ls-s-text);
	text-decoration: none;

	/* See `.site-footer__col`'s comment (ПР-5): lets a long word break past
	   its own hyphen only once the column is too narrow to hold it, instead
	   of forcing the column wider than the row. */
	overflow-wrap: anywhere;
}

.site-footer__sitemap-links a[aria-current="page"] {
	text-decoration: underline;
}

/* Partner. */

.site-footer__col--partner {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 32px;
	padding: 40px var(--page-gutter);
	box-shadow: inset 0 1px 0 0 var(--color-neutral-300);
}

.site-footer__partner-logo img,
.site-footer__partner-logo svg {
	display: block;
	max-width: 100%;
	height: auto;
}

.site-footer__partner-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);
	letter-spacing: var(--ls-s-text);
}

.site-footer__col--partner .c-ticket {
	align-self: flex-start;
}

/* Bottom: decorative wordmark with the vertical copyright near its right
   edge. Figma overlaps this band with the bottom of `.site-footer__main`
   (copyright y 480–657 root-relative sits inside the 190–694 main-row
   span; the logo frame 707–890 laps a further ~98px past it) — flattened
   here into its own flow band below the row, since reproducing that
   overlap needs layered negative margins across the whole footer for a
   purely decorative flourish with no accessibility upside. Documented
   residual, see REPORT.md. */

.site-footer__bottom {
	position: relative;
}

.site-footer__copyright {
	position: absolute;
	top: 0;
	right: 24px;
	margin: 0;
	transform: rotate(90deg);
	transform-origin: top right;
	color: var(--color-neutral-800);
	font-family: var(--font-body);
	font-size: var(--fs-xs-text);
	font-weight: 600;
	line-height: var(--lh-xs-text);
	letter-spacing: var(--ls-xs-text);
	white-space: nowrap;
}

.site-footer__wordmark {
	overflow: hidden;
	line-height: 0;
}

.site-footer__wordmark svg {
	display: block;
	width: 104.1667%;
	margin-left: -4.0816%;
	height: auto;
}

@media (min-width: 768px) {

	.site-footer__newsletter-desc {
		max-width: 28em;
	}

	.site-footer__sitemap-group {
		gap: 18px;
	}
}

/* Only in this band does Figma reshuffle the row: Col1 (find) and the
   partner column share the first row, and the site-map columns move to
   their own full-width row below — not the 390/1440/1920 order (find,
   site-map, partner, inline or stacked in that sequence). `order`
   reproduces that without touching the DOM (the DOM order stays
   meaningful: find, site-map nav, partner everywhere).
   Bounded to 768–1439: `flex-wrap`/`order` on a shared selector would
   otherwise cascade up into the 1440/1920 blocks below, which don't
   redeclare every one of these properties (regression fixed in round 2 —
   see REPORT.md: at 1440 columns rendered find → partner → sitemap, and at
   1920 the partner column stretched and sitemap wrapped to a new row). */
@media (min-width: 768px) and (max-width: 1439px) {

	.site-footer__main {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.site-footer__col--find {
		order: 1;
		flex: 1 1 0;
	}

	.site-footer__col--partner {
		order: 2;
		flex: 1 1 0;
	}

	.site-footer__sitemap {
		order: 3;
		flex: 0 0 100%;
		gap: 64px;
		padding: 32px var(--page-gutter);
	}
}

@media (min-width: 1440px) {

	.site-footer__newsletter {
		flex-direction: row;
		align-items: center;
		gap: 40px;
		padding: 56px var(--page-gutter);
	}

	.site-footer__newsletter-copy {
		flex: 1 1 auto;
	}

	.site-footer__newsletter-desc {
		max-width: none;
	}

	.site-footer__newsletter-form {
		flex: none;
		width: 401px;
	}

	.site-footer__main {
		flex-direction: row;
		align-items: stretch;
		gap: 24px;
		padding: 0 var(--page-gutter);
	}

	.site-footer__col--find {
		flex: 0 0 314px;
		gap: 32px;
		padding: 56px 0;
	}

	.site-footer__sitemap {
		flex: 1 1 auto;
		gap: 24px;
		padding: 0;
		box-shadow: inset 1px 0 0 0 var(--color-neutral-300);
	}

	.site-footer__col {
		gap: 32px;
		padding: 56px 0 56px 32px;
	}

	.site-footer__col--partner {
		flex: 0 0 428px;
		gap: 40px;
		padding: 56px 0 56px 32px;
		box-shadow: inset 1px 0 0 0 var(--color-neutral-300);
	}

}

@media (min-width: 1920px) {

	.site-footer__newsletter {
		padding-block: 86px;
	}

	.site-footer__newsletter-copy {
		gap: 24px;
	}

	.site-footer__newsletter-form {
		width: 450px;
	}

	.site-footer__main {
		gap: 40px;
	}

	.site-footer__col--find {
		flex: 0 0 412px;
		gap: 48px;
		padding: 86px 0;
	}

	.site-footer__col {
		flex: 0 0 312px;
		gap: 40px;
		padding: 86px 0 86px 48px;
	}

	.site-footer__sitemap-group {
		gap: 22px;
	}

	.site-footer__sitemap-links {
		gap: 14px;
	}

	.site-footer__col--partner {
		flex: 1 1 auto;
		padding: 86px 0 86px 48px;
	}
}

/* Hover — Figma footer 1440/1920 (3015:2498 / 4217:13460); the 390/768
   footers carry no interactions. Every one is ON_HOVER, SMART_ANIMATE,
   600ms, ease-out cubic-bezier(0, 0, 0.58, 1) (animations.md):
   · site-map links, «Link "Історія театру"» 4351:24640 → Variant2
     4351:25097: text #272B30 → #0C9586 (--color-primary-600, 3.4:1 on
     --color-neutral-100 — under AA 4.5:1, so --color-primary-700, the
     nearest passing token; designer-questions.md);
   · phone, «Address» 4351:25750 → 4351:25752 (the box-office phone is
     the same component): same colour change. The street address uses it
     too, but here it is plain text, not a link — no hover on it;
   · socials, «Social Media Icon» 4351:26134 → 4351:26136: inside stroke
     #12AD99 → #272B30.
   The column headings «Афіша» / «Репертуар» are plain text layers in the
   design, no interaction. */
@media (min-width: 1440px) {

	.site-footer__sitemap-links a,
	.site-footer__phone a {
		transition: color 600ms cubic-bezier(0, 0, 0.58, 1);
	}

	.site-footer__sitemap-links a:hover,
	.site-footer__sitemap-links a:focus-visible,
	.site-footer__phone a:hover,
	.site-footer__phone a:focus-visible {
		color: var(--color-primary-700);
	}

	.site-footer .socials__link {
		transition: box-shadow 600ms cubic-bezier(0, 0, 0.58, 1);
	}

	.site-footer .socials__link:hover,
	.site-footer .socials__link:focus-visible {
		box-shadow: inset 0 0 0 2px var(--color-neutral-800);
	}
}