/* «Сплануйте свій візит» (Figma component set «Visit» 4219:14908 — 4219:14771
   @1440, 4220:15043 @1920, 4220:14976 @768, 4219:14909 @390). Markup:
   template-parts/components/visit.php.  Layout per breakpoint, straight from
   the variants: · 390  — column: title, media (map + 2 photos), info; section
   padding 120/16, gaps 40/32/12. · 768  — same column, 160/32, gaps 48/48/20;
   the info column is the design's fixed 539px. · 1440 — row: info 539 left,
   media 652 right, `space-between`; section padding 180/56, gap 56. · 1920 —
   row: info 835, media 839; section padding 240/112, gap 64. The media block
   comes first in the markup because that is its position at 390/768 (the widths
   where the two blocks are stacked and reading order is visible); at 1440/1920
   it is the right column of a two-column row — see visit-report.md. */

/* Kilok is not licensed yet: the site runs Exo 2 under its name (fonts.css,
   size-adjust 95.5%). Figma trims those layers to Kilok's cap height (0.70 em);
   the substitute's is 0.659 em, so a `text-box`-trimmed line box lands 0.041 em
   short and every container above it with it. The difference is added back as
   bottom padding — the glyphs still sit at the top of the trimmed box, and
   heights match the spec instead of the substitute's metrics (same remedy as
   a11y-panel.css's `min-height`, expressed per font-size so it holds at all
   four widths). */
.c-visit {
	--visit-cap-fix: 0.041em;

	/* Per width: Figma's own rounding of the cap box differs (20px for
	   28px type here, 22 for 32 at 768). */
	--visit-value-cap-fix: 1.55px;
	--visit-row-pad: 12px;
	--visit-row-gap: 10px;

	/* 50.857/89 — the whole «Theater Info» plate is the 1440 one scaled. */
	--visit-badge-scale: 0.5714286;
	display: flex;
	flex-direction: column;
	gap: 40px;
	background: var(--color-base-white);
	padding: 120px 16px;
}

/* leadingTrim=CAP_HEIGHT on «Visit Title» (e.g. 4219:14943) — the design's 75px
   box at 390 is two 44px lines trimmed to cap height, not 2 × 44. */
.c-visit__title {
	margin: 0;
	color: var(--color-neutral-800);
	font-family: var(--font-title);
	font-size: var(--fs-h2-m);
	font-weight: 400;
	line-height: var(--lh-h2-m);
	letter-spacing: var(--ls-h2-m);
	text-transform: uppercase;
	text-box: trim-both cap alphabetic;
	padding-bottom: var(--visit-cap-fix);

	/* «СПЛАНУЙТЕ» is one word wider than the 390 column once the
	   accessibility widget scales text to 150 % (and wider still in the
	   dyslexia face): it must break instead of widening the page. At the
	   design sizes nothing breaks, so the measured geometry is unchanged. */
	overflow-wrap: anywhere;
}

.c-visit__row {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

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

.c-visit__map {
	display: block;
}

/* The map is one flat picture at every width (Figma keeps 652×320 / 837×411 /
   703×345 / 358×175.7 — the same 2.0375 ratio), so it scales with the column
   instead of being re-cut. */
.c-visit__map-img {
	display: block;
	width: 100%;

	/* The `height` attribute is a presentational hint — without this
	   it beats aspect-ratio. */
	height: auto;
	aspect-ratio: 652 / 320;
	object-fit: cover;
}

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

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

/* The plate over a map — «Theater Info» 1159:7712 here, «Map Overlay»
   3967:17418 and «Theater Logo Overlay» 3824:8402 on the contacts page: the
   same drawing in three places, so the rules are shared and only the position
   and the scale belong to the page that uses them. The contacts page names
   `podil-visit` as a dependency for exactly these four rules
   (task-11-report.md); `.c-visit__badge-*` stays a selector of its own so the
   home page's committed selector map keeps matching.

   Scale: `--map-badge-scale` when the consumer sets one, otherwise the Visit
   block's own `--visit-badge-scale` (0.5714286 = 50.857/89 below 768, 1 above).

   Decorative and `aria-hidden`: it must not swallow clicks aimed at the map
   link under it. */
.c-map-badge,
.c-visit__badge {
	position: absolute;
	pointer-events: none;
	display: flex;
	flex-direction: column;
	margin: 0;
}

.c-visit__badge {
	top: 56px;
	left: 168px;
}

/* Figma's plate is `#12AD99` with white text — 2.81:1, under WCAG AA for text
   of this size; --color-primary-700 keeps the same hue at 5.49:1
   (designer-questions.md). */
.c-map-badge__plate,
.c-visit__badge-plate {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: calc(89px * var(--map-badge-scale, var(--visit-badge-scale)));
	height: calc(44px * var(--map-badge-scale, var(--visit-badge-scale)));
	padding: calc(4px * var(--map-badge-scale, var(--visit-badge-scale)));
	background: var(--color-primary-700);
	color: var(--color-base-white);
	font-family: var(--font-body);
	font-size: calc(16px * var(--map-badge-scale, var(--visit-badge-scale)));
	font-weight: 600;
	line-height: 1;
	text-transform: uppercase;
}

/* «Театр на / подолі» is one text layer with a hard break (1159:7714). */
.c-map-badge__text,
.c-visit__badge-text {
	white-space: pre-line;
}

/* «Vector 5» under the plate: the design's own arrow export used as a mask so
   the colour is a real `background-color` (#0C9586 — a mark, not text, so no
   contrast substitution) and the shape is still the asset's, never redrawn by
   hand. */
.c-map-badge__mark,
.c-visit__badge-mark {
	width: calc(27.1111px * var(--map-badge-scale, var(--visit-badge-scale)));
	height: calc(12px * var(--map-badge-scale, var(--visit-badge-scale)));
	background: var(--color-primary-600);
	mask: url(../../icons/arrow__3058-2161.svg) no-repeat center / 100% 100%;
}

.c-visit__info {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.c-visit__specs,
.c-visit__rows {
	display: flex;
	flex-direction: column;
	margin: 0;
}

/* «Visit Info» — the three labelled rows; its 16px bottom padding is what
   separates them from the «Доступність» row, which sits outside it in the
   design. */
.c-visit__rows {
	padding-bottom: 16px;
}

.c-visit__spec {
	display: flex;
	flex-direction: column;

	/* The «Доступність» row is its own <dl> — browser default margins
	   would show up as a gap. */
	margin: 0;
	gap: var(--visit-row-gap);
	padding: var(--visit-row-pad) 16px var(--visit-row-pad) 0;
}

.c-visit__spec--address {
	padding-top: 0;
}

/* «Stage» (Доступність) has no padding of its own — the gap above it is the
   rows' own bottom padding. */
.c-visit__spec--access {
	padding: 0;
}

.c-visit__label {
	margin: 0;

	/* Figma #12AD99 = 2.81:1 on white — see designer-questions.md. */
	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;
}

.c-visit__data {
	display: flex;
	flex-direction: column;
	gap: var(--visit-row-gap);
	margin: 0;
}

/* leadingTrim=CAP_HEIGHT on every «Value» (4351:24507 and friends).
   `font-style: normal` because the address value is an `<address>` element. */
.c-visit__value {
	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-transform: uppercase;
	text-box: trim-both cap alphabetic;
	padding-bottom: var(--visit-value-cap-fix);

	/* Same as the title: a long street name or phone must wrap at 150 %. */
	overflow-wrap: anywhere;
}

.c-visit__value--link {
	text-decoration: none;
}

.c-visit__hours {
	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);
}

.c-visit__note {
	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);
}

/* «View Schedule Link» instance (3008:70 / 4190:20136 / 4124:11503): baseline
   row, gap 8. */
.c-visit__all {
	display: inline-flex;
	align-self: flex-start;
	align-items: baseline;
	gap: 8px;
	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-decoration: none;
	text-transform: uppercase;
}

.c-visit__all svg {
	display: block;
	width: 27.1111px;
	height: 12px;
	flex: none;
}

@media (min-width: 768px) {

	.c-visit {
		--visit-row-pad: 16px;
		--visit-row-gap: 12px;
		--visit-value-cap-fix: 0.91px;
		--visit-badge-scale: 1;
		gap: 48px;
		padding: 160px 32px;
	}

	.c-visit__row {
		gap: 48px;
	}

	.c-visit__media,
	.c-visit__photos {
		gap: 20px;
	}

	.c-visit__badge {
		top: 124px;
		left: 340px;
	}

	.c-visit__info {
		width: 539px;
		max-width: 100%;
		gap: 40px;
	}

	/* «Stage» hugs its 332px value at 768 only (4220:14976); at 1440/1920 it
	   fills the column. */
	.c-visit__spec--access {
		width: 332px;
		max-width: 100%;
	}

	/* Hover — «View Schedule Link» Default 3008:70 → Hover 4309:30087
	   (ON_HOVER, SMART_ANIMATE, 600ms, ease-out): text #272B30 → #0C9586,
	   auto-layout gap 8 → 12. The mobile variant (4124:11503) has no Hover, so
	   neither does <768. #0C9586 is 3.71:1 on white — under AA — so the text
	   lands on --color-primary-700, the same substitution the footer/subscribe
	   links already use (animations.md, designer-questions.md). */
	.c-visit__all {
		transition:
			color 600ms cubic-bezier(0, 0, 0.58, 1),
			gap 600ms cubic-bezier(0, 0, 0.58, 1);
	}

	.c-visit__all:hover,
	.c-visit__all:focus-visible {
		gap: 12px;
		color: var(--color-primary-700);
	}
}

@media (min-width: 1440px) {

	/* The same column every page section keeps from here up: the frame's
	   56 gutter at 1440 and, on any wider viewport, the 1328 block centred
	   with equal gutters — `--page-gutter` (components/container.css), the
	   site's one copy of that ladder. Visit is hooked on /, /afisha/,
	   /repertoire/ and /buffet/ alike, so it must not carry its own. */
	.c-visit {
		--visit-value-cap-fix: 1.48px;
		gap: 56px;
		padding: 180px var(--page-gutter);
	}

	/* `row-reverse`: the media block is first in the markup (its place at
	   390/768, where the two blocks are stacked), and the design puts it in the
	   RIGHT column here. */
	.c-visit__row {
		flex-direction: row-reverse;
		justify-content: space-between;

		/* `space-between` alone sets the distance here (the 768 column
		   gap must not leak in). */
		gap: 0;
	}

	.c-visit__media,
	.c-visit__photos {
		gap: 24px;
	}

	.c-visit__media {
		flex: none;
		width: 652px;
	}

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

	/* «Visit Container» is h:fill with `space-between`: the specs at the top,
	   the link pinned to the bottom of the row (the media column sets the
	   height). */
	.c-visit__info {
		flex: none;
		justify-content: space-between;
	}

	.c-visit__spec--access {
		width: auto;
	}

	/* Hover — «Value» Default 4351:24507 → Hover 4351:24509 (600ms, ease-out):
	   text #272B30 → #0C9586 (--color-primary-700 for contrast, as above). Only
	   the 1440/1920 variants of the row have a Hover state; 390/768 (4351:24586
	   / 4351:24578) are Default-only. The address value is plain text here, not
	   a link, so the hover applies to the two phones. */
	.c-visit__value--link {
		transition: color 600ms cubic-bezier(0, 0, 0.58, 1);
	}

	.c-visit__value--link:hover,
	.c-visit__value--link:focus-visible {
		color: var(--color-primary-700);
	}
}

@media (min-width: 1920px) {

	.c-visit {
		--visit-row-pad: 24px;
		--visit-row-gap: 16px;
		--visit-value-cap-fix: 1.8px;
		--visit-badge-scale: 1.5357143; /* 136.679/89 */
		gap: 64px;
		padding: 240px var(--page-gutter);
	}

	.c-visit__media {
		width: 839px;
	}

	/* 837, not the column's own 839 (4220:15043 «Знімок екрана…» is w:fixed). */
	.c-visit__map-img {
		width: 837px;
	}

	.c-visit__badge {
		top: 119.787px;
		left: 386px;
	}

	.c-visit__info {
		width: 835px;
	}

	.c-visit__specs {
		width: 696px;
	}

	/* The address row hugs its value at 1920 (4220:15082, w:hug 592); the two
	   phone rows fill. */
	.c-visit__spec--address {
		width: fit-content;
		max-width: 100%;
	}
}