/*
 * Inner pages — studio shell (Новини / Контакти / single)
 * Same brand contract as homepage clean: #e5e5e5 · #1a1a1a · #3F2780 · #FFD141
 */

.g22-studio {
	/* Brand purple — reference the sitewide token (home-henna.css, already
	   correct #3F2780) instead of a locally hardcoded value. */
	--g22-purple: var(--g22h-purple, #3F2780);
	--g22-purple-hover: #5235a0;
	--g22-yellow: #ffd141;
	--g22-bg: #e5e5e5;
	--g22-bg-soft: #f0f0f0;
	--g22-ink: #1a1a1a;
	--g22-ink-soft: rgba(26, 26, 26, 0.68);
	/* WCAG AA fix: 0.45 alpha measured ~2.75:1 on the #e5e5e5 studio
	   background above — fails 4.5:1. Bumped to 0.68 (~5.4:1 verified,
	   matching the existing --g22-ink-soft convention already used in
	   this file for the same purpose). */
	--g22-ink-mute: rgba(26, 26, 26, 0.72);
	--g22-line: rgba(26, 26, 26, 0.12);
	--g22-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--g22-shell: min(1120px, calc(100% - 64px));
	background: var(--g22-bg);
	color: var(--g22-ink);
}

/* Motion tokens — same values as .g22-henna--clean on the homepage
   (home-studio.css), redeclared locally because that scope never reaches
   this page (kontakty renders its own .g22-studio root, not
   .g22-henna--clean). Kept in one place so every transition/animation
   below reads off the same scale/curve family instead of ad-hoc numbers. */
.g22-kontakty {
	--g22-t-fast: 100ms;
	--g22-t-med: 200ms;
	--g22-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--g22-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

body:has(.g22-studio) {
	background: var(--g22-bg);
}

body:has(.g22-studio) .g22-main {
	padding-top: 0;
}

.g22-studio__shell {
	width: var(--g22-shell);
	margin-inline: auto;
}

.g22-studio__intro {
	/* Ira 2026-07-29: one shared offset from sticky nav → yellow kicker/dot
	   across studio pages (kontakty / news / etc.). */
	padding: var(--g22-below-nav, clamp(72px, 9vw, 96px)) 0 clamp(40px, 6vw, 64px);
}

.g22-studio__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px;
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: var(--g22-hero-kicker-size, 0.72rem);
	font-weight: 500;
	letter-spacing: var(--g22-hero-kicker-tracking, 0.16em);
	text-transform: uppercase;
	color: var(--g22-ink-mute);
}

/* Yellow dash — shared --g22-hero-kicker-dash-* tokens. */
.g22-studio__eyebrow::before {
	content: "";
	display: inline-block;
	width: var(--g22-hero-kicker-dash-w, 18px);
	height: var(--g22-hero-kicker-dash-h, 3px);
	margin-right: 0;
	flex: 0 0 var(--g22-hero-kicker-dash-w, 18px);
	border-radius: 1px;
	background: var(--g22-yellow);
}

.g22-studio__eyebrow a {
	color: inherit;
	text-decoration: none;
}

.g22-studio__eyebrow a:hover {
	color: var(--g22-purple);
}

.g22-studio__title {
	margin: 16px 0 0;
	max-width: var(--g22-hero-title-max, 18ch);
	font-size: var(--g22-hero-title, clamp(2.75rem, 5.4vw, 3.75rem));
	line-height: var(--g22-hero-title-lh, 1.04);
	letter-spacing: var(--g22-hero-title-ls, -0.035em);
	font-weight: 700;
	color: var(--g22-ink);
	text-align: left;
}

.g22-studio__lede {
	margin: 20px 0 0;
	max-width: var(--g22-hero-summary-max, 54ch);
	font-size: var(--g22-hero-summary-size, clamp(1rem, 1.4vw, 1.2rem));
	line-height: var(--g22-hero-summary-lh, 1.65);
	color: var(--g22-ink-mute);
	text-align: left;
}

.g22-studio__h2 {
	margin: 0 0 20px;
	max-width: 18ch;
	font-size: clamp(1.75rem, 3.2vw, 2.75rem);
	line-height: 1.15;
	letter-spacing: -0.03em;
	font-weight: 700;
}

.g22-studio__empty {
	margin: 48px 0;
	color: var(--g22-ink-soft);
}

.g22-studio__text-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--g22-purple);
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: color 200ms var(--g22-ease);
}

.g22-studio__text-link:hover {
	color: var(--g22-purple-hover);
}

.g22-studio__text-link:focus-visible {
	outline: 2px solid var(--g22-purple);
	outline-offset: 3px;
}

/* ---------- Forms inside studio ---------- */

.g22-studio .g22-form {
	/* Flat grid DOM (adapt 2026-07-29): label/input pairs are direct grid
	   siblings, not label>input wrappers (see inc/forms.php) — so a uniform
	   grid `gap` applies identically to the tight label→input relationship
	   AND the looser field→field separation, bloating the whole form's
	   rhythm (~55px between fields). Spacing is now controlled entirely via
	   margins on the label rule below (Refactoring UI: related elements
	   ~8px, field groups ~20-24px), so the grid gap itself is zeroed. */
	display: grid;
	gap: 0;
}

.g22-studio .g22-form label {
	/* Was display:grid — a container with no block-level children (label
	   only ever holds a text run + one inline <span>*</span>), which is
	   what let "ІМ'Я" and the "*" render on separate lines at some widths.
	   display:block fixes that. Wrapping stays normal (adapt 2026-07-29):
	   white-space:nowrap forced a horizontal page-scroll under text-zoom /
	   longer i18n labels; the required "*" is glued to its word with a
	   &nbsp; in inc/forms.php, so labels can wrap safely without orphaning
	   the asterisk. */
	display: block;
	/* margin-top = field→field separation (gap the grid used to provide);
	   margin-bottom = tight label→input coupling. */
	margin-top: 18px;
	margin-bottom: 6px;
	overflow-wrap: break-word;
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--g22-ink-mute);
}

/* Zero the top margin on the first VISIBLE label so it sits with normal
   spacing under the H2, not a doubled/bloated gap. The true first `label`
   of-type is the hidden honeypot (.g22-form__website, out of flow via
   position:absolute) — the first visible one is its next direct sibling. */
.g22-studio .g22-form label.g22-form__website + label {
	margin-top: 0;
}

.g22-studio .g22-form label span[aria-hidden="true"] {
	margin-left: 4px;
	color: var(--g22-purple);
	font-weight: 700;
}

.g22-studio .g22-form__website {
	position: absolute;
	left: -9999px;
	height: 0;
	overflow: hidden;
}

.g22-studio .g22-form input,
.g22-studio .g22-form select,
.g22-studio .g22-form textarea {
	width: 100%;
	box-sizing: border-box;
	min-height: 46px;
	margin: 0;
	padding: 12px 14px;
	border: 1px solid var(--g22-line);
	border-radius: 12px;
	background: #fff;
	color: var(--g22-ink);
	font: inherit;
	font-size: 1rem;
	letter-spacing: 0;
	text-transform: none;
	font-weight: 500;
	transition:
		border-color var(--g22-t-fast) var(--g22-ease-out),
		box-shadow var(--g22-t-fast) var(--g22-ease-out);
}

.g22-studio .g22-form textarea {
	min-height: 96px;
	resize: vertical;
}

.g22-studio .g22-form input:focus,
.g22-studio .g22-form select:focus,
.g22-studio .g22-form textarea:focus {
	outline: none;
	border-color: var(--g22-purple);
	box-shadow: 0 0 0 3px rgba(63, 39, 128, 0.15);
}

.g22-studio .g22-form button,
.g22-studio .g22-form [type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 8px;
	/* Sitewide pill-button normalization (2026-07-22): 48px height already
	   matched; horizontal padding trimmed to 24px and tracking flipped to
	   the canonical +0.02em, matching home-studio.css/pages/*.css. */
	min-height: 48px;
	padding: 0 24px;
	border: 0;
	border-radius: 999px;
	background: var(--g22-purple);
	color: #fff;
	font: inherit;
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: none;
	cursor: pointer;
	will-change: transform;
	box-shadow: 0 10px 24px rgba(63, 39, 128, 0.22);
	transition:
		background-color var(--g22-t-fast) var(--g22-ease-out),
		box-shadow var(--g22-t-fast) var(--g22-ease-out),
		transform var(--g22-t-fast) var(--g22-ease-out);
}

.g22-studio .g22-form button:hover,
.g22-studio .g22-form [type="submit"]:hover {
	background: var(--g22-purple-hover);
	box-shadow: 0 14px 30px rgba(63, 39, 128, 0.3);
	transform: translateY(-1px);
}

.g22-studio .g22-form button:active,
.g22-studio .g22-form [type="submit"]:active {
	box-shadow: 0 6px 16px rgba(63, 39, 128, 0.2);
	transform: translateY(0) scale(0.98);
}

.g22-studio .g22-form button:focus-visible,
.g22-studio .g22-form [type="submit"]:focus-visible {
	outline: 2px solid var(--g22-yellow);
	outline-offset: 3px;
}

.g22-studio .g22-form__notice {
	padding: 12px 14px;
	border-radius: 12px;
	font-size: 0.95rem;
	line-height: 1.45;
}

.g22-studio .g22-form__notice--success {
	background: rgba(63, 39, 128, 0.1);
	color: var(--g22-purple);
}

.g22-studio .g22-form__notice--error {
	background: rgba(180, 40, 40, 0.08);
	color: #8a2020;
}

.g22-studio .g22-form__field-error {
	color: #8a2020;
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
}

/* Consent line under the submit button — small, muted, skin-agnostic so it
   renders the same in the studio form and the consultation modal. */
.g22-form__consent {
	margin: 4px 0 0;
	font-size: 0.78rem;
	line-height: 1.5;
	letter-spacing: 0;
	text-transform: none;
	color: var(--g22-ink-soft, rgba(26, 26, 26, 0.68));
}

.g22-form__consent a {
	color: var(--g22-purple, #3f2780);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.g22-form__consent a:hover,
.g22-form__consent a:focus-visible {
	color: var(--g22-purple-hover, #5235a0);
}

/* ---------- Kontakty ---------- */

.g22-kontakty__main {
	padding-bottom: clamp(36px, 4.5vw, 58px);
}

.g22-kontakty__layout {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: clamp(28px, 4vw, 48px);
	/* stretch, not start: the aside used to size to its own (short)
	   content and leave a visible gap of bare page background under the
	   facts list while the form panel ran the full height of its own
	   content. Stretch + the aside/card flex rules below give the fact
	   card the same height as the form panel and fill it deliberately
	   instead of leaving dead space. */
	align-items: stretch;
}

.g22-kontakty__form-panel,
.g22-kontakty__aside {
	padding: clamp(24px, 3vw, 32px);
	background: var(--g22-bg-soft);
	border-radius: 20px;
}

.g22-kontakty__aside {
	display: flex;
	flex-direction: column;
	align-self: stretch;
}

.g22-kontakty__facts {
	list-style: none;
	margin: 0;
	padding: 0;
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0;
}

.g22-kontakty__facts li {
	padding-block: 16px;
	border-top: 1px solid var(--g22-line);
}

.g22-kontakty__facts li:first-child {
	padding-top: 0;
	border-top: 0;
}

.g22-kontakty__facts li:last-child {
	padding-bottom: 0;
}

.g22-kontakty__fact-label {
	display: block;
	margin-bottom: 6px;
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--g22-ink-mute);
}

.g22-kontakty__fact-value {
	display: block;
	font-size: 1.05rem;
	line-height: 1.45;
	font-weight: 600;
	color: var(--g22-ink);
	text-decoration: none;
}

/* Phone/email are the page's primary call to action — sized up so they
   read first, ahead of the static location/grade facts above them. */
a.g22-kontakty__fact-value {
	font-size: 1.35rem;
	letter-spacing: -0.01em;
	transition: color var(--g22-t-fast) var(--g22-ease-out);
}

a.g22-kontakty__fact-value:hover {
	color: var(--g22-purple);
}

.g22-kontakty__socials,
.g22-kontakty__map,
.g22-kontakty__voices {
	padding: clamp(36px, 4.5vw, 58px) 0;
	border-top: 1px solid var(--g22-line);
}

.g22-kontakty__social-list {
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
}

.g22-kontakty__social-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 56px;
	padding: 16px 18px;
	background: var(--g22-bg-soft);
	border-radius: 16px;
	color: var(--g22-ink);
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	will-change: transform;
	box-shadow: 0 0 0 rgba(63, 39, 128, 0);
	transition:
		background-color var(--g22-t-fast) var(--g22-ease-out),
		color var(--g22-t-fast) var(--g22-ease-out),
		box-shadow var(--g22-t-fast) var(--g22-ease-out),
		transform var(--g22-t-fast) var(--g22-ease-out);
}

.g22-kontakty__social-link:hover,
.g22-kontakty__social-link:focus-visible {
	background: var(--g22-purple);
	color: #fff;
	box-shadow: 0 10px 22px rgba(63, 39, 128, 0.22);
	transform: translateY(-2px);
}

.g22-kontakty__social-link:focus-visible {
	outline: 2px solid var(--g22-yellow);
	outline-offset: 3px;
}

.g22-kontakty__social-arrow {
	transition: transform var(--g22-t-fast) var(--g22-ease-out);
}

.g22-kontakty__social-link:hover .g22-kontakty__social-arrow,
.g22-kontakty__social-link:focus-visible .g22-kontakty__social-arrow {
	transform: translate(2px, -2px);
}

/* Map — flat brand card, no gradient (the homepage's own rule, in the
   header comment of home-studio.css: "No AI gradients"). Purple/yellow
   radial fill read as off-system here for the same reason; a plain
   .g22-bg-soft card with the same lift-on-hover as every other card on
   this page keeps it inside the language instead of standing apart. */
.g22-kontakty__map-card {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 18px;
	margin-top: 18px;
	min-height: 120px;
	padding: clamp(22px, 3vw, 32px);
	border-radius: 20px;
	background: var(--g22-bg-soft);
	color: inherit;
	text-decoration: none;
	cursor: pointer;
	will-change: transform;
	box-shadow: 0 0 0 rgba(63, 39, 128, 0);
	transition:
		transform var(--g22-t-fast) var(--g22-ease-out),
		box-shadow var(--g22-t-fast) var(--g22-ease-out);
}

.g22-kontakty__map-card:hover,
.g22-kontakty__map-card:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 14px 30px rgba(26, 26, 26, 0.12);
}

.g22-kontakty__map-card:focus-visible {
	outline: 2px solid var(--g22-purple);
	outline-offset: 3px;
}

.g22-kontakty__map-pin {
	width: 18px;
	height: 18px;
	border-radius: 50% 50% 50% 0;
	background: var(--g22-purple);
	transform: rotate(-45deg);
	box-shadow: 0 0 0 8px rgba(63, 39, 128, 0.12);
}

.g22-kontakty__map-copy {
	display: grid;
	gap: 6px;
}

.g22-kontakty__map-copy strong {
	font-size: 1.2rem;
	letter-spacing: -0.02em;
}

.g22-kontakty__map-copy span {
	color: var(--g22-ink-soft);
	font-size: 0.95rem;
}

.g22-kontakty__map-cta {
	font-size: 1.4rem;
	color: var(--g22-purple);
	transition: transform var(--g22-t-fast) var(--g22-ease-out);
}

.g22-kontakty__map-card:hover .g22-kontakty__map-cta,
.g22-kontakty__map-card:focus-visible .g22-kontakty__map-cta {
	transform: translate(2px, -2px);
}

.g22-kontakty__voices-head {
	margin-bottom: 28px;
}

.g22-kontakty__voices-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

.g22-kontakty__voice-link {
	position: relative;
	display: block;
	aspect-ratio: 9 / 16;
	overflow: hidden;
	border-radius: 20px;
	background: #1a1a1a;
	color: #fff;
	text-decoration: none;
	cursor: pointer;
	will-change: transform;
	box-shadow: 0 0 0 rgba(26, 26, 26, 0);
	transition:
		transform var(--g22-t-fast) var(--g22-ease-out),
		box-shadow var(--g22-t-fast) var(--g22-ease-out);
}

.g22-kontakty__voice-link:hover,
.g22-kontakty__voice-link:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 14px 30px rgba(26, 26, 26, 0.22);
}

.g22-kontakty__voice-link img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 320ms var(--g22-ease-out);
}

.g22-kontakty__voice-link:hover img,
.g22-kontakty__voice-link:focus-visible img {
	transform: scale(1.04);
}

.g22-kontakty__voice-ph {
	display: grid;
	place-items: center;
	height: 100%;
	font-size: 2rem;
	opacity: 0.7;
}

.g22-kontakty__voice-name {
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 12px;
	font-size: 0.88rem;
	font-weight: 600;
}

/* ---------- News archive (ТЗ §5.5) — homepage clean cards + page chrome ---------- */

body:has(.g22-news-archive),
body:has(.g22-news-article) {
	background: #e5e5e5;
}

body:has(.g22-news-archive) .g22-main,
body:has(.g22-news-article) .g22-main {
	padding-top: 0;
}

.g22-news-archive__intro {
	padding: clamp(96px, 12vw, 136px) 0 clamp(28px, 4vw, 40px);
}

.g22-news-archive__title {
	margin: 0 0 16px;
	max-width: 14ch;
	font-size: clamp(2.4rem, 5vw, 3.8rem);
	line-height: 1.04;
	letter-spacing: -0.048em;
	font-weight: 700;
	color: #1a1a1a;
	font-family: Manrope, sans-serif;
}

.g22-news-archive__lede {
	margin: 0;
	max-width: 42ch;
	font-size: 1.05rem;
	line-height: 1.6;
	font-weight: 500;
	color: rgba(26, 26, 26, 0.68);
}

.g22-henna--clean .g22-news--archive {
	padding-block: 0 clamp(72px, 10vw, 120px);
}

.g22-henna--clean .g22-news--archive .g22-news__shell {
	gap: clamp(24px, 3.5vw, 36px);
}

.g22-news-archive__filter {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.g22-news-archive__chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 10px 18px;
	border-radius: 999px;
	border: 1px solid rgba(26, 26, 26, 0.12);
	background: transparent;
	color: rgba(26, 26, 26, 0.68);
	font-size: 0.9rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color 160ms cubic-bezier(0.4, 0, 0.2, 1),
		color 160ms cubic-bezier(0.4, 0, 0.2, 1),
		border-color 160ms cubic-bezier(0.4, 0, 0.2, 1),
		box-shadow 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

.g22-news-archive__chip:hover {
	border-color: #1a1a1a;
	color: #1a1a1a;
}

.g22-news-archive__chip.is-active {
	background: #3F2780;
	border-color: #3F2780;
	color: #fff;
	box-shadow: 0 10px 24px rgba(63, 39, 128, 0.2);
}

.g22-news-archive__chip:focus-visible {
	outline: 3px solid #ffd141;
	outline-offset: 3px;
}

.g22-news-archive__pagination {
	margin-top: 8px;
	padding-top: 8px;
}

.g22-news-archive__pagination .page-numbers {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.g22-news-archive__pagination a.page-numbers,
.g22-news-archive__pagination span.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 14px;
	border-radius: 999px;
	border: 1px solid rgba(26, 26, 26, 0.12);
	background: transparent;
	color: #1a1a1a;
	text-decoration: none;
	font-weight: 700;
	cursor: pointer;
	transition:
		background-color 160ms cubic-bezier(0.4, 0, 0.2, 1),
		border-color 160ms cubic-bezier(0.4, 0, 0.2, 1),
		color 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

.g22-news-archive__pagination .current {
	background: #1a1a1a;
	border-color: #1a1a1a;
	color: #fff;
	cursor: default;
}

.g22-news-archive__pagination a.page-numbers:hover {
	border-color: #3F2780;
	color: #3F2780;
}

.g22-news-archive__pagination a.page-numbers:focus-visible {
	outline: 3px solid #ffd141;
	outline-offset: 3px;
}

.g22-news-archive__pagination .dots {
	border-color: transparent;
	cursor: default;
}

/* ---------- Single article ---------- */

.g22-news-article__head {
	padding: clamp(96px, 12vw, 136px) 0 clamp(28px, 4vw, 40px);
}

.g22-news-article__head .g22-clean__eyebrow a {
	color: inherit;
	text-decoration: none;
	cursor: pointer;
	transition: color 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

.g22-news-article__head .g22-clean__eyebrow a:hover {
	color: #3F2780;
}

.g22-news-article__title {
	margin: 0 0 14px;
	max-width: 20ch;
	font-size: clamp(2.2rem, 4.6vw, 3.5rem);
	line-height: 1.05;
	letter-spacing: -0.045em;
	font-weight: 700;
	color: #1a1a1a;
	font-family: Manrope, sans-serif;
}

.g22-news-article__date {
	margin: 0;
	color: rgba(26, 26, 26, 0.68); /* WCAG AA fix: was 0.45 (~2.75:1), now ~5.4:1 */
	font-size: 0.9rem;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.g22-news-article__cover {
	margin: 0 0 clamp(36px, 6vw, 56px);
}

.g22-news-article__cover-shell {
	overflow: hidden;
	border-radius: 28px;
	background: #3F2780;
}

.g22-news-article__cover img {
	display: block;
	width: 100%;
	height: auto;
	max-height: min(68vh, 720px);
	object-fit: cover;
}

.g22-news-article__body {
	max-width: min(70ch, var(--g22-shell, min(1120px, calc(100% - 64px))));
	margin-inline: auto;
	padding-bottom: 40px;
	font-size: 1.08rem;
	line-height: 1.7;
	color: rgba(26, 26, 26, 0.72);
}

.g22-news-article__body > *:first-child {
	margin-top: 0;
}

.g22-news-article__body h2,
.g22-news-article__body h3 {
	color: #1a1a1a;
	letter-spacing: -0.03em;
}

.g22-news-article__body img,
.g22-news-article__body video,
.g22-news-article__body iframe {
	max-width: 100%;
	border-radius: 18px;
}

.g22-news-article__share {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px 20px;
	padding-bottom: clamp(48px, 8vw, 80px);
	border-bottom: 1px solid rgba(26, 26, 26, 0.12);
}

.g22-news-article__share-label {
	margin: 0;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1.2;
	color: rgba(26, 26, 26, 0.68); /* WCAG AA fix: was 0.45 (~2.75:1), now ~5.4:1 */
}

.g22-news-article__share-links {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 12px 16px;
}

.g22-news-article__share-links a {
	display: inline;
	min-height: 0;
	padding: 0;
	color: #3F2780;
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: color 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

.g22-news-article__share-links a:hover {
	color: #5235a0;
}

.g22-news-article__share-links a:focus-visible {
	outline: 3px solid #ffd141;
	outline-offset: 3px;
}

.g22-henna--clean .g22-news--related {
	padding-block: clamp(48px, 8vw, 88px);
}

.g22-news-article__more-head {
	opacity: 1;
	transform: none;
}

@media (max-width: 900px) {
	.g22-studio {
		--g22-shell: min(1120px, calc(100% - 40px));
	}

	.g22-kontakty__layout,
	.g22-kontakty__voices-grid {
		grid-template-columns: 1fr 1fr;
	}

	.g22-kontakty__social-list {
		grid-template-columns: 1fr 1fr;
	}

	.g22-henna--clean .g22-news--archive .g22-news__grid {
		grid-template-columns: 1fr 1fr;
	}

	.g22-news-article__cover-shell {
		border-radius: 22px;
	}
}

@media (max-width: 640px) {
	.g22-studio {
		--g22-shell: calc(100% - 32px);
	}

	.g22-studio__intro,
	.g22-news-archive__intro,
	.g22-news-article__head {
		padding-top: var(--g22-below-nav, 72px);
	}

	.g22-kontakty__layout,
	.g22-kontakty__voices-grid {
		grid-template-columns: 1fr;
	}

	/* Socials stay 2x2 at 390px (brief spec), not the 1-column collapse
	   the rest of the page's grids use — 4 short pill cards read fine at
	   half-width down to small phones and 2x2 keeps them feeling like a
	   grid instead of a long stack. */
	.g22-kontakty__social-list {
		grid-template-columns: 1fr 1fr;
	}

	.g22-kontakty__aside {
		align-self: auto;
	}

	.g22-henna--clean .g22-news--archive .g22-news__grid {
		grid-template-columns: 1fr;
	}

	.g22-news-article__more-head {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media (prefers-reduced-motion: reduce) {
	.g22-kontakty__map-card,
	.g22-kontakty__map-cta,
	.g22-kontakty__voice-link,
	.g22-kontakty__voice-link img,
	.g22-studio .g22-form input,
	.g22-studio .g22-form select,
	.g22-studio .g22-form textarea,
	.g22-studio .g22-form button,
	.g22-kontakty__social-link,
	.g22-kontakty__social-arrow,
	a.g22-kontakty__fact-value,
	.g22-news-archive__chip {
		transition: none;
	}

	.g22-kontakty__map-card:hover,
	.g22-kontakty__map-card:focus-visible,
	.g22-kontakty__map-card:hover .g22-kontakty__map-cta,
	.g22-kontakty__map-card:focus-visible .g22-kontakty__map-cta,
	.g22-kontakty__voice-link:hover,
	.g22-kontakty__voice-link:focus-visible,
	.g22-kontakty__voice-link:hover img,
	.g22-kontakty__voice-link:focus-visible img,
	.g22-kontakty__social-link:hover,
	.g22-kontakty__social-link:focus-visible,
	.g22-kontakty__social-link:hover .g22-kontakty__social-arrow,
	.g22-kontakty__social-link:focus-visible .g22-kontakty__social-arrow,
	.g22-studio .g22-form button:hover,
	.g22-studio .g22-form [type="submit"]:hover,
	.g22-studio .g22-form button:active,
	.g22-studio .g22-form [type="submit"]:active {
		transform: none;
	}
}

/* ---------- Reveal — kontakty-local scroll fade-up ----------
 *
 * The homepage's reveal (home-why-scroll.js) is off-limits here — it's
 * mid-edit elsewhere and its root query only ever looks for
 * .g22-henna--clean, which this page doesn't render as a real content
 * wrapper (see the hidden marker span at the top of
 * template-contacts.php, which exists only to satisfy a :has() selector
 * for the reviews skin, not to host a reveal timeline). Wiring a second
 * consumer onto that shared script would mean editing it — also
 * off-limits.
 *
 * BUG FIX (2026-07): .g22-kontakty__socials and .g22-kontakty__map were
 * shipping stuck at opacity:0. There is no JS class gate involved at all
 * on this template (reveal.js's revealSelector list never mentions any
 * .g22-kontakty-* selector, see assets/reveal.js) — every [data-g22-reveal]
 * section here was 100% owned by the @supports-gated scroll-timeline block
 * that used to live here alone. The bug: `@supports (animation-timeline:
 * view())` only proves the ENGINE PARSES that value, not that it actually
 * drives the timeline at runtime. WebKit shipped `animation-timeline`
 * property parsing before it shipped working scroll-driven timelines, so on
 * that engine the @supports check passes, `opacity: 0` is written, and the
 * view() progress never advances — the animation is permanently parked on
 * its 0% keyframe. That is exactly "stuck invisible", and it reproduces
 * hardest on sections further down the page (socials, map) where a partial/
 * delayed engine is more likely to miss entry; .g22-kontakty__main sits at
 * the top and is often already inside the (mis-measured) entry range at
 * load, which is why it read as fine while the two lower sections did not.
 *
 * Fix: stop trusting the scroll-timeline alone. Every [data-g22-reveal]
 * node now runs TWO animations in one `animation` shorthand — the scroll-
 * linked fade-up (nice-to-have, still gated per-entry via its own
 * `animation-timeline: view()`) AND a real-clock fallback identical in
 * spirit to the homepage's "1ms insurance" keyframe (home-studio.css,
 * `g22-reveal-fallback-in`, 2.4s delay). Per the Web Animations spec, later
 * animations in an element's animation-name list sit later in the effect
 * stack, so when both are simultaneously trying to set `opacity`, the later
 * one (the fallback) wins. Result: if the scroll timeline never advances —
 * unsupported engine, frozen/partial engine, section too short to scroll
 * through, anything — opacity is still force-set to 1 a few seconds after
 * paint, no matter what. Stuck-invisible content is now impossible here,
 * same guarantee as the homepage.
 */
@media (prefers-reduced-motion: no-preference) {
	.g22-kontakty [data-g22-reveal] {
		opacity: 0;
		transform: translateY(24px);
		animation:
			g22-kontakty-reveal-in linear both,
			g22-kontakty-reveal-fallback-in 1ms linear 2.4s forwards;
		animation-timeline: view(), auto;
		animation-range: entry 0% entry 45%, normal;
	}
}

@keyframes g22-kontakty-reveal-in {
	to {
		opacity: 1;
		transform: none;
	}
}

/* Same 2.4s "insurance" timing as home-studio.css's g22-reveal-fallback-in,
   but also resets `transform` — this page's at-rest state carries a
   translateY(24px) offset that the homepage's opacity-only fallback never
   had to clear. */
@keyframes g22-kontakty-reveal-fallback-in {
	to {
		opacity: 1;
		transform: none;
	}
}