/* ============================================================
   MTSP — Контакти (v2 canon)
   Верстка за docs-claude/mockups/Контакти v2.html.
   Токени — canon --mtsp-* (tokens.css). Generic-класи скоуплені
   під .mtsp-kontakti-page (патерн .mtsp-catalog-page / .mtsp-ki-page).
   Форма — CF7 shortcode; поля .wpcf7 стилізовані під макет.
   ============================================================ */

.mtsp-kontakti-page {
	font-family: var(--mtsp-font-body);
	color: var(--mtsp-gray-800);
}

/* ============ CONTAINER ============ */
.mtsp-kontakti-page .container {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 24px;
}

/* BREADCRUMBS — спільне джерело .mtsp-info-page .breadcrumbs (page-head.css). Корінь несе клас .mtsp-info-page. */

/* ============ PAGE HEAD (світлий) ============ */
.mtsp-kontakti-page .page-head {
	background: var(--mtsp-gray-50);
	border-bottom: 1px solid var(--mtsp-gray-200);
	padding: 48px 0 40px;
}
.mtsp-kontakti-page .page-head h1 {
	font-family: var(--mtsp-font-display);
	font-size: 40px; font-weight: 600;
	color: var(--mtsp-navy);
	letter-spacing: -1px; line-height: 1.08;
	margin: 0 0 12px;
}
.mtsp-kontakti-page .page-head p {
	color: var(--mtsp-gray-600);
	font-size: 15px; line-height: 1.7;
	max-width: 620px; margin: 0;
}

/* ============ SECTION SHELL ============ */
.mtsp-kontakti-page .section {
	padding: 72px 0;
	border-bottom: 1px solid var(--mtsp-gray-100);
}
.mtsp-kontakti-page .section.compact { padding: 44px 0; }
.mtsp-kontakti-page .section.alt { background: var(--mtsp-gray-50); }
.mtsp-kontakti-page .section:last-of-type { border-bottom: none; }
/* .section-eyebrow / .section-title / .section-header → канон у page-head.css (sitewide) */

/* ============ CONTACTS GRID ============ */
.mtsp-kontakti-page .contacts-grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: 24px;
	align-items: start;
}

/* ---- org-card (реквізити) ---- */
.mtsp-kontakti-page .org-card {
	background: var(--mtsp-white);
	border: 1px solid var(--mtsp-gray-200);
	border-radius: 8px;
	overflow: hidden;
}
.mtsp-kontakti-page .org-head {
	padding: 22px 28px;
	border-bottom: 1px solid var(--mtsp-gray-100);
}
.mtsp-kontakti-page .org-head h3 {
	font-family: var(--mtsp-font-display);
	font-size: 22px; font-weight: 600;
	color: var(--mtsp-navy); letter-spacing: -0.3px;
	margin: 0 0 2px;
}
.mtsp-kontakti-page .org-head .edrpou {
	font-family: var(--mtsp-font-mono);
	font-size: 12.5px; color: var(--mtsp-gray-500);
}
.mtsp-kontakti-page .org-rows { padding: 8px 28px; }
.mtsp-kontakti-page .org-row {
	display: grid;
	grid-template-columns: 130px 1fr;
	gap: 24px;
	padding: 16px 0;
	border-bottom: 1px dashed var(--mtsp-gray-200);
	align-items: baseline;
}
.mtsp-kontakti-page .org-row:last-child { border-bottom: none; }
.mtsp-kontakti-page .org-row .lbl {
	font-family: var(--mtsp-font-mono);
	font-size: 11px; font-weight: 600;
	letter-spacing: 1px; text-transform: uppercase;
	color: var(--mtsp-gray-500);
}
.mtsp-kontakti-page .org-row .val { font-size: 15px; color: var(--mtsp-gray-800); line-height: 1.6; }
.mtsp-kontakti-page .org-row .val a {
	color: var(--mtsp-navy); font-weight: 700; text-decoration: none;
	display: inline-block;
}
.mtsp-kontakti-page .org-row .val a:hover { color: var(--mtsp-accent); }
.mtsp-kontakti-page .org-row .val .phones { display: flex; flex-direction: column; gap: 4px; }
.mtsp-kontakti-page .org-row .val .muted { color: var(--mtsp-gray-500); font-size: 13px; font-weight: 400; }

/* ---- map-card (iframe з G62) ---- */
.mtsp-kontakti-page .map-card {
	margin-top: 24px;
	border: 1px solid var(--mtsp-gray-200);
	border-radius: 8px;
	overflow: hidden;
	background: var(--mtsp-gray-50);
}
.mtsp-kontakti-page .map-embed { line-height: 0; }
.mtsp-kontakti-page .map-embed iframe {
	display: block;
	width: 100%;
	min-height: 300px;
	border: 0;
}
.mtsp-kontakti-page .map-label {
	padding: 14px 20px;
	border-top: 1px solid var(--mtsp-gray-200);
	background: var(--mtsp-white);
}
.mtsp-kontakti-page .map-label .t { font-size: 14px; font-weight: 700; color: var(--mtsp-navy); }
.mtsp-kontakti-page .map-label .s { font-size: 12.5px; color: var(--mtsp-gray-500); margin-top: 2px; }
.mtsp-kontakti-page .map-label a {
	display: inline-block;
	margin-top: 8px;
	font-size: 12.5px; font-weight: 700;
	color: var(--mtsp-accent);
	text-decoration: none;
}
.mtsp-kontakti-page .map-label a:hover { text-decoration: underline; }

/* ============ WRITE-CARD (форма CF7) ============ */
.mtsp-kontakti-page .write-card {
	background: var(--mtsp-white);
	border: 1px solid var(--mtsp-gray-200);
	border-radius: 8px;
	overflow: hidden;
	position: sticky;
	top: 24px;
}
.mtsp-kontakti-page .write-head {
	background: var(--mtsp-navy);
	color: var(--mtsp-white);
	padding: 18px 26px;
}
.mtsp-kontakti-page .write-head h3 {
	font-family: var(--mtsp-font-mono);
	font-size: 13px; font-weight: 600;
	letter-spacing: 1.5px; text-transform: uppercase;
	color: var(--mtsp-white);
	margin: 0;
}
.mtsp-kontakti-page .write-body { padding: 24px 26px 26px; }
.mtsp-kontakti-page .write-body label {
	display: block;
	font-size: 12px; font-weight: 700;
	color: var(--mtsp-gray-600);
	margin: 0 0 6px;
}
/* CF7 поля */
.mtsp-kontakti-page .write-body input[type="text"],
.mtsp-kontakti-page .write-body input[type="tel"],
.mtsp-kontakti-page .write-body input[type="email"],
.mtsp-kontakti-page .write-body textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--mtsp-gray-200);
	border-radius: 6px;
	font-family: inherit;
	font-size: 14px;
	color: var(--mtsp-gray-800);
	background: var(--mtsp-white);
	margin-bottom: 16px;
	box-sizing: border-box;
}
.mtsp-kontakti-page .write-body textarea { min-height: 140px; resize: vertical; }
.mtsp-kontakti-page .write-body input:focus,
.mtsp-kontakti-page .write-body textarea:focus {
	outline: none;
	border-color: var(--mtsp-accent);
	box-shadow: 0 0 0 3px var(--mtsp-accent-soft);
}
/* CF7 submit → як btn-primary */
.mtsp-kontakti-page .write-body input[type="submit"],
.mtsp-kontakti-page .write-body button[type="submit"] {
	display: inline-flex; align-items: center; justify-content: center;
	width: 100%;
	padding: 14px 22px;
	border: none; border-radius: 6px;
	background: var(--mtsp-accent); color: var(--mtsp-white);
	font-family: inherit; font-size: 14px; font-weight: 700;
	cursor: pointer;
	box-shadow: 0 4px 12px -2px rgba(217, 116, 65, 0.35);
	transition: background 0.2s, box-shadow 0.2s;
}
.mtsp-kontakti-page .write-body input[type="submit"]:hover,
.mtsp-kontakti-page .write-body button[type="submit"]:hover {
	background: var(--mtsp-accent-hover);
	box-shadow: 0 8px 20px -4px rgba(217, 116, 65, 0.45);
}
/* CF7 повідомлення */
.mtsp-kontakti-page .write-body .wpcf7-response-output {
	margin: 14px 0 0;
	padding: 12px 14px;
	border-radius: 6px;
	font-size: 13px; line-height: 1.5;
}
.mtsp-kontakti-page .write-body .wpcf7-not-valid-tip {
	color: var(--mtsp-red);
	font-size: 12px; font-weight: 600;
	margin: -10px 0 12px;
}
.mtsp-kontakti-page .write-body .wpcf7-spinner { margin: 8px auto 0; display: block; }

/* ============ VISIT-CARDS ============ */
.mtsp-kontakti-page .visit-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
.mtsp-kontakti-page .visit-card {
	border: 1px solid var(--mtsp-gray-200);
	border-radius: 8px;
	padding: 20px 22px;
	background: var(--mtsp-white);
}
.mtsp-kontakti-page .visit-card h4 {
	font-family: var(--mtsp-font-mono);
	font-size: 11px; font-weight: 600;
	letter-spacing: 1.5px; text-transform: uppercase;
	color: var(--mtsp-accent);
	margin: 0 0 10px;
}
.mtsp-kontakti-page .visit-card p { font-size: 14px; color: var(--mtsp-gray-700); line-height: 1.65; margin: 0; }
.mtsp-kontakti-page .visit-card p strong { color: var(--mtsp-navy); }

/* ============ RESPONSIVE ============ */
@media (max-width: 1024px) {
	.mtsp-kontakti-page .contacts-grid { grid-template-columns: 1fr; }
	.mtsp-kontakti-page .write-card { position: static; }
	.mtsp-kontakti-page .visit-grid { grid-template-columns: 1fr; }
	.mtsp-kontakti-page .page-head h1 { font-size: 30px; }
	.mtsp-kontakti-page .org-row { grid-template-columns: 1fr; gap: 4px; }
}