/*
 * Contacts page hero.
 * Loaded only on template-contacts.php, which otherwise rides on .works-page —
 * the kanji, the bg-gradient and .block-start already come from styles.min.css.
 * Same 10px rem base as the rest of the theme; the two columns and the map are
 * expressed as ratios so they keep the design's proportions at any width.
 */

/*
 * The decorative diagonals (.intro_title_line, .work_start_line) are 300rem
 * wide and run off the page, the same way they do on a single work — which
 * clamps them with overflow:hidden on <main>. Scope it to the template instead.
 */
.contacts-page {
	overflow: hidden;
}

/* 1184 x (464 | 16 | 704) in the 1920 mock, centred inside the wide .container. */
.contacts-intro {
	display: grid;
	grid-template-columns: 464fr 704fr;
	gap: 4.3rem 1.6rem;
	align-items: end;
	max-width: 118.4rem;
	margin: 0 auto;
	position: relative;
	z-index: 2;
}

/* --- Headline ----------------------------------------------------------- */

.contacts-page .contacts-h1 {
	/* The mock's text box: "Contact Us:" breaks after the first word. */
	max-width: 25.1rem;
	/* ...but never narrower than its longest word ("Свяжитесь", "Контакти"): the gradient only
	   paints inside the box, so a longer word was cut off. */
	min-width: min-content;
	margin-bottom: 0;
	/* .h1's own family only applies on the homepage wrapper, so set it here. */
	font-family: "Random Grotesque Standard";
	font-weight: 600;
	font-size: 7.2rem;
	line-height: 1;
	letter-spacing: normal;
	color: transparent;
	background: radial-gradient(110% 125% at 21% 38%,
			#fff 0%,
			rgba(202, 207, 214, 0.87) 25%,
			rgba(150, 159, 173, 0.74) 50%,
			rgba(97, 111, 131, 0.61) 75%,
			rgba(45, 63, 90, 0.48) 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* --- Phone + e-mail ----------------------------------------------------- */

.contacts-lines {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.6rem;
}

.contacts-phone,
.contacts-email {
	font-family: "Random Grotesque Standard";
	font-weight: 600;
	line-height: 1.05;
	letter-spacing: -0.03em;
	text-decoration: none;
}

.contacts-phone {
	font-size: 4rem;
	color: #fff;
}

.contacts-email {
	font-size: 5.6rem;
	color: transparent;
	background: radial-gradient(110% 125% at 21% 38%,
			#fff 0%,
			rgba(202, 207, 214, 0.87) 25%,
			rgba(150, 159, 173, 0.74) 50%,
			rgba(97, 111, 131, 0.61) 75%,
			rgba(45, 63, 90, 0.48) 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* --- Telegram card ------------------------------------------------------ */

.contacts-telegram {
	grid-column: 1;
	grid-row: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2.4rem;
	padding: 3.6rem 3.2rem;
	border-radius: 1.6rem;
	background: #1f96d2;
	text-decoration: none;
	transition: background-color 0.3s ease;
}

.contacts-telegram:hover,
.contacts-telegram:focus-visible {
	background: #1a84ba;
}

.contacts-telegram__label {
	display: flex;
	align-items: center;
	gap: 2.4rem;
	font-family: "Random Grotesque Standard";
	font-weight: 600;
	font-size: 4.8rem;
	line-height: 1.05;
	letter-spacing: -0.03em;
	color: #fff;
}

.contacts-telegram__label img {
	flex-shrink: 0;
}

.contacts-telegram__wave {
	font-size: 4rem;
	line-height: 1.05;
}

/* --- Map ---------------------------------------------------------------- */

.contacts-map {
	grid-column: 2;
	grid-row: 2;
	position: relative;
	overflow: hidden;
	aspect-ratio: 704 / 257;
	border-radius: 1.6rem;
	background: #15191d;
}

/* The crop from the mock: a 900 x 401 plate offset inside the 704 x 257 card. */
.contacts-map img {
	position: absolute;
	left: -5.4%;
	top: -37.35%;
	width: 127.87%;
	height: 156.03%;
	object-fit: cover;
}

.contacts-map::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(15, 34, 46, 0.31);
	pointer-events: none;
}

/* --- Ready to start ----------------------------------------------------- */

.contacts-page .block-start {
	padding-top: 8rem;
	padding-bottom: 10rem;
}

/* --- Responsive --------------------------------------------------------- */

@media (max-width: 1200px) {
	.contacts-page .contacts-h1 {
		max-width: 22rem;
		font-size: 6rem;
	}

	.contacts-email {
		font-size: 4.8rem;
	}

	.contacts-telegram__label {
		font-size: 4rem;
		gap: 1.6rem;
	}

	.contacts-telegram__label img {
		width: 4rem;
		height: 4rem;
	}
}

@media (max-width: 992px) {
	.contacts-intro {
		grid-template-columns: 1fr;
		gap: 3.2rem;
		align-items: stretch;
	}

	.contacts-telegram,
	.contacts-map {
		grid-column: 1;
		grid-row: auto;
	}

	.contacts-page .contacts-h1 {
		max-width: none;
		font-size: 5.6rem;
	}

	.contacts-phone {
		font-size: 3.2rem;
	}

	.contacts-email {
		font-size: 4rem;
	}
}

@media (max-width: 575px) {
	.contacts-telegram {
		padding: 2.4rem;
	}

	.contacts-telegram__label {
		font-size: 3.2rem;
	}

	.contacts-email {
		font-size: 3.2rem;
	}

	.contacts-phone {
		font-size: 2.8rem;
	}
}