/*
 * Static pages built from the design concept: About (page-about.html),
 * Cooperation (page-cooperation.html), Contacts (page-contacts.html),
 * plus the generic page.html template.
 *
 * Shared primitives (.utr-section, .utr-kicker, .utr-section-title,
 * .utr-flag, button variants, .utr-apply-* / .utr-lead-form) live in
 * style.css — only page-scoped classes belong here.
 */

/* ==========================================================================
   Shared dark page hero (About / Cooperation / Contacts)
   Design: padding 160px 56px 72px under a *fixed* header; our header is
   sticky, so the ~64px header clearance collapses out of the padding.
   ========================================================================== */

.utr-page-hero {
	padding: 96px 56px 72px;
}

.utr-page-hero-title {
	font-size: clamp(44px, 5.4vw, 84px);
	font-weight: 900;
	line-height: 1;
	letter-spacing: -0.03em;
	text-transform: uppercase;
	margin: 0;
}

.utr-page-hero-title mark {
	background: none;
	color: var(--wp--preset--color--accent);
}

.utr-page-hero-lede {
	margin: 32px 0 0;
	font-size: 19px;
	line-height: 1.55;
	color: var(--wp--preset--color--grey-400);
	max-width: 640px;
	font-weight: 500;
	text-wrap: pretty;
}

.utr-page-hero-actions {
	margin-top: 40px;
}

/* ==========================================================================
   About — company story (patterns/about-story.php)
   ========================================================================== */

.utr-story-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.utr-story-content {
	padding: 96px 64px 96px 56px;
}

.utr-story-content .utr-section-title {
	font-size: clamp(26px, 2.4vw, 38px);
	line-height: 1.1;
	margin-bottom: 24px;
}

.utr-story-copy {
	margin: 0 0 18px;
	font-size: 16.5px;
	line-height: 1.65;
	color: #3f434c;
	font-weight: 500;
	text-wrap: pretty;
}

.utr-story-copy:last-child {
	margin-bottom: 0;
}

.utr-story-media {
	background: var(--wp--preset--color--light);
	min-height: 520px;
}

/* ==========================================================================
   About — ATR International AG band (patterns/about-atr.php)
   ========================================================================== */

.utr-atr {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: 48px;
	align-items: center;
	padding: 56px;
	border-top: 1px solid #e2e4e8;
}

.utr-atr-logo {
	margin: 0;
	background: #fff;
	padding: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.utr-atr-logo img {
	max-width: 160px;
	height: auto;
}

.utr-atr-title {
	font-size: 22px;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	margin: 0 0 10px;
}

.utr-atr-text {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--wp--preset--color--grey-600);
	font-weight: 500;
	max-width: 720px;
	text-wrap: pretty;
}

/* ==========================================================================
   About — Фонд Незламних (patterns/about-fond.php)
   ========================================================================== */

.utr-fond-dark .utr-kicker {
	font-size: 13px;
	letter-spacing: 0.2em;
	margin-bottom: 20px;
}

.utr-fond-dark .utr-section-title {
	font-size: clamp(28px, 2.8vw, 44px);
	line-height: 1.05;
	margin-bottom: 18px;
}

.utr-fond-dark-lede {
	margin: 0 0 28px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--wp--preset--color--grey-400);
	max-width: 620px;
	font-weight: 500;
	text-wrap: pretty;
}

.utr-fond-points {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* Smaller flag bullet used in the fond section (22×28 vs the default 26×34). */
.utr-flag-sm {
	padding-left: 38px;
	font-size: 16px;
}

.utr-flag-sm::before {
	width: 22px;
	height: 28px;
}

/* ==========================================================================
   About — CTA band (patterns/about-cta.php)
   ========================================================================== */

.utr-about-cta {
	padding: 56px;
	/* Separator against the red charity-feed section right above. */
	border-top: 1px solid rgba(16, 19, 24, 0.2);
}

.utr-about-cta-title {
	font-size: clamp(22px, 2vw, 32px);
	letter-spacing: -0.02em;
	text-transform: uppercase;
	margin: 0;
}

/* ==========================================================================
   Cooperation — Order24 band (patterns/coop-order24.php)
   Renders as the visual tail of the dark partner-steps section (the design
   nests the band inside #steps; here it is its own zero-top-padding band).
   ========================================================================== */

.utr-order24 {
	padding: 0 56px 96px;
}

.utr-order24-band {
	border: 1px solid var(--wp--preset--color--surface-dark);
	padding: 36px 40px;
}

.utr-order24-label {
	font-size: 12.5px;
	font-weight: 800;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--grey-500);
	margin: 0 0 10px;
}

.utr-order24-title {
	font-size: 22px;
	letter-spacing: -0.01em;
	margin: 0;
}

/* ==========================================================================
   Cooperation — apply form add-ons (patterns/coop-apply.php reuses the
   .utr-apply-* and .utr-lead-form primitives from style.css)
   ========================================================================== */

.utr-coop-apply {
	scroll-margin-top: 80px;
}

.utr-apply-note {
	margin: 0;
	font-size: 13.5px;
	color: var(--wp--preset--color--grey-500);
	font-weight: 500;
}

.utr-apply-note a {
	color: var(--wp--preset--color--accent);
	font-weight: 700;
}

/* ==========================================================================
   Contacts — hero meta (patterns/contacts-hero.php)
   ========================================================================== */

.utr-contacts-meta {
	margin-top: 36px;
}

.utr-contacts-tel {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(34px, 3vw, 52px);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1;
	margin: 0;
}

.utr-contacts-tel-label {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--grey-500);
	margin: 6px 0 0;
}

.utr-contacts-note {
	font-size: 15px;
	line-height: 1.55;
	color: var(--wp--preset--color--grey-400);
	font-weight: 500;
	max-width: 460px;
	margin: 0;
	padding-bottom: 6px;
	text-wrap: pretty;
}

/* ==========================================================================
   Contacts — three special contact cards (patterns/contacts-cards.php)
   ========================================================================== */

.utr-contact-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2px;
	padding: 2px;
}

.utr-contact-card {
	padding: 40px;
}

.utr-card-kicker {
	font-size: 12.5px;
	font-weight: 800;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
	margin: 0 0 14px;
}

.utr-card-city {
	font-size: 20px;
	font-weight: 800;
	margin: 0 0 8px;
}

.utr-card-tel {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
}

.utr-card-tel a {
	color: var(--wp--preset--color--dark);
}

.utr-card-tel a:hover {
	color: var(--wp--preset--color--accent);
}

.utr-card-note {
	font-size: 13.5px;
	color: var(--wp--preset--color--grey-500);
	font-weight: 600;
	margin: 8px 0 0;
}

.utr-card-extra {
	font-size: 13.5px;
	font-weight: 600;
	margin: 8px 0 0;
}

.utr-card-extra a {
	color: var(--wp--preset--color--accent);
}

/* ==========================================================================
   Contacts — branches grid + representative-office chips
   (patterns/contacts-branches.php)
   .utr-branch-grid styles both the Query Loop <ul> and the static fallback.
   ========================================================================== */

.utr-branch-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin: 40px 0 0;
	padding: 0;
	list-style: none;
}

.utr-branch-grid > li {
	margin: 0;
}

.utr-branch-tile {
	position: relative;
	background: var(--wp--preset--color--light);
	padding: 24px 26px 24px 64px;
}

.utr-branch-tile::before {
	content: "";
	position: absolute;
	left: 26px;
	top: 50%;
	width: 22px;
	height: 30px;
	background: var(--wp--preset--color--accent);
	transform: translateY(-50%) skewX(-14deg);
}

.utr-branch-city {
	font-family: var(--wp--preset--font-family--body);
	font-size: 16.5px;
	font-weight: 800;
	letter-spacing: 0;
	text-transform: none;
	margin: 0;
}

.utr-branch-sub {
	font-size: 13.5px;
	color: var(--wp--preset--color--grey-500);
	font-weight: 600;
	margin: 3px 0 0;
}

.utr-branches-sub {
	font-size: clamp(20px, 1.8vw, 28px);
	margin: 64px 0 0;
}

.utr-rep-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 28px;
}

.utr-rep-chip {
	padding: 12px 20px;
	border: 1px solid var(--wp--preset--color--dark);
	font-size: 14px;
	font-weight: 700;
	margin: 0;
}

.utr-branches-note {
	margin: 48px 0 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--wp--preset--color--grey-600);
	font-weight: 500;
	max-width: 820px;
	text-wrap: pretty;
}

/* ==========================================================================
   Generic page.html
   ========================================================================== */

.utr-page {
	padding: 64px 24px 96px;
}

.utr-page-title {
	font-size: clamp(32px, 3.4vw, 52px);
	letter-spacing: -0.02em;
	text-transform: uppercase;
	margin: 0 0 40px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1100px) {
	.utr-branch-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.utr-contact-cards {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 900px) {
	.utr-page-hero {
		padding: 64px 24px 48px;
	}

	.utr-story-grid {
		grid-template-columns: 1fr;
	}

	.utr-story-content {
		padding: 64px 24px;
	}

	.utr-story-media {
		min-height: 320px;
	}

	/* The placeholder spacer carries an inline 520px height. */
	.utr-story-media .wp-block-spacer {
		height: 320px !important;
	}

	.utr-atr {
		grid-template-columns: 1fr;
		gap: 28px;
		padding: 40px 24px;
	}

	.utr-atr-logo {
		max-width: 220px;
	}

	.utr-about-cta {
		padding: 40px 24px;
	}

	.utr-order24 {
		padding: 0 24px 64px;
	}

	.utr-order24-band {
		padding: 28px 24px;
	}

	.utr-contact-card {
		padding: 28px 24px;
	}
}

@media (max-width: 600px) {
	.utr-branch-grid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Fixed header (design port): inner-page heroes start under the fixed bar —
   design inner pages use padding:160px 56px … for their dark hero bands.
   ========================================================================== */

.utr-page-hero,
.utr-brandhero,
.utr-brandsingle-hero {
	padding-top: 160px !important;
}