/* ==========================================================================
   Сторінка «Контакти» (template-contacts.php)
   .sp-hero (відступи/overflow) підключені з services-page.css — тут тільки
   те, що специфічне для цієї сторінки.
   ========================================================================== */

/* --- Херо: тільки заголовок + короткий текст, без картинки/якоря --- */
.c-hero{ padding:72px 0 64px; }
.c-hero-inner{ position:relative; z-index:1; max-width:760px; }
.c-hero-inner h1{
	font-family:var(--font-display); font-weight:800; font-size:48px; line-height:58px;
	letter-spacing:-.96px; color:#fff; margin:0 0 20px;
}
.c-hero-inner p{
	font-family:var(--font-display); font-weight:300; font-size:18px; line-height:29px;
	color:#fff; margin:0;
}

/* --- Контакти + форма --- */
.c-info{
	/* position+z-index обов'язкові: .hero-bg-layer (position:absolute;
	   z-index:0) інакше малюється ПОВЕРХ цієї секції (позиційовані елементи
	   завжди рендеряться після звичайного block-контенту, незалежно від
	   порядку в DOM) — той самий прийом, що і в .sp-hero-inner/.hero-inner. */
	position:relative; z-index:1;
	background:#FCFCFC; padding-top:64px; padding-bottom:80px;
}
.c-info-inner{
	display:grid; grid-template-columns:.85fr 1.15fr; gap:48px; align-items:start;
}

.c-info-list{ padding-top:8px; }
.c-info-item{ margin-bottom:32px; }
.c-info-label{
	display:block; font-family:var(--font-button); font-weight:600; font-size:12px;
	letter-spacing:1.2px; text-transform:uppercase; color:var(--green); margin-bottom:7px;
}
.c-info-value{
	display:inline-block; font-family:var(--font-display); font-weight:600; font-size:20px;
	line-height:28px; color:#181C1E;
}
.c-info-meta{ border-top:1px solid rgba(195,197,217,.3); margin-top:8px; padding-top:32px; display:flex; flex-direction:column; gap:16px; }
.c-info-meta-row{ display:flex; align-items:center; gap:16px; font-family:var(--font-button); font-weight:400; font-size:16px; color:#181C1E; }
.c-info-meta-row svg{ flex-shrink:0; color:var(--green); }

/* Картка форми — саме заявка (текстова верстка-заглушка або форма з
   Contact Form 7 після того, як в ACF вставлять шорткод) */
.c-form-card{
	background:rgba(255,255,255,.6); border:1px solid rgba(0,76,237,.1); border-radius:12px;
	padding:40px; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.c-form-card h2{
	font-family:var(--font-display); font-weight:600; font-size:24px; line-height:32px; color:#191C1E; margin:0 0 32px;
}
.c-form-row{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:32px; }

/* Рамка знизу + відступ до неї (8px для однорядкових полів, 15px для
   коментаря) навмисно висять на ОБГОРТЦІ .c-form-field, а не на самому
   input/textarea — за точним Figma-спеком під лейблом+полем ще є проміжок
   ("padding-bottom") ПЕРЕД лінією, а не лінія одразу під текстом. */
.c-form-field{
	display:flex; flex-direction:column; gap:4px;
	padding-bottom:8px; border-bottom:1px solid #C3C5D9;
}
.c-form-field label{
	font-family:var(--font-button); font-weight:600; font-size:12px; line-height:14px;
	letter-spacing:.6px; text-transform:uppercase; color:var(--green);
}
.c-form-field input,
.c-form-field select{
	width:100%; border:none; background:transparent;
	padding:2px 0 3px; font-family:var(--font-button); font-weight:400; font-size:16px; line-height:20px; color:#181C1E;
	appearance:none; -webkit-appearance:none; border-radius:0;
}
.c-form-field select{
	cursor:pointer; line-height:24px; color:#191C1E;
	background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%236B7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
	background-repeat:no-repeat; background-position:right center; padding-right:20px;
}
.c-form-field input::placeholder{ color:rgba(195,197,217,.5); }
.c-form-field input:focus,
.c-form-field select:focus{ outline:none; }
.c-form-field:focus-within{ border-bottom-color:var(--green); }

.c-form-field-full{ padding-bottom:15px; margin-bottom:32px; }
.c-form-field-full textarea{
	width:100%; border:none; background:transparent; resize:vertical; min-height:48px;
	font-family:var(--font-button); font-weight:400; font-size:16px; line-height:24px; color:#181C1E;
	padding:0; appearance:none; -webkit-appearance:none; border-radius:0;
}
.c-form-field-full textarea::placeholder{ color:rgba(195,197,217,.5); }
.c-form-field-full textarea:focus{ outline:none; }
.c-form-submit{
	display:flex; align-items:center; justify-content:center; width:100%; border:none; border-radius:8px; padding:16px;
	background:var(--green); color:#fff; font-family:var(--font-button); font-weight:700;
	font-size:16px; letter-spacing:.8px; text-transform:uppercase; cursor:pointer;
}
.c-form-submit:hover{ background:#0b7a1a; }

/* --- Форма, вставлена як шорткод Contact Form 7 (field_c_form_shortcode) ---
   Готова CF7-розмітка (яку ми даємо користувачу окремо, для вставки в
   Contact → Add New) вже використовує ці ж класи (.c-form-row/.c-form-field/
   .c-form-submit), тому додаткових CF7-специфічних стилів переважно не
   треба. Нижче — тільки службові елементи, які сам плагін домальовує. */
.c-form-embed{ font-family:var(--font-button); }
/* Той самий фікс, що й у .cta-form-embed (style.css): CF7 огортає приховані
   службові поля у <fieldset class="hidden-fields-container"> (браузерна
   рамка-"привид" зверху форми без скидання) і пропускає шаблон форми через
   wpautop() — одинарні переноси рядків між <label> і шорткодом поля стають
   зайвими <br>, додаючи видимий відступ, якого немає в дизайні. */
.c-form-embed fieldset.hidden-fields-container{ display:none; }
.c-form-embed .c-form-field br,
.c-form-embed .c-form-row br{ display:none; }
.c-form-embed .wpcf7-form-control-wrap{ display:block; }
.c-form-embed .wpcf7-not-valid-tip{ display:block; font-family:var(--font-body); font-size:12px; color:#e03131; margin-top:4px; }
.c-form-embed .wpcf7-response-output{ margin:16px 0 0; border-radius:8px; font-family:var(--font-body); font-size:14px; }
.c-form-embed .wpcf7-spinner{ margin-left:12px; }

@media (max-width:900px){
	.c-info-inner{ grid-template-columns:1fr; }
	.c-form-row{ grid-template-columns:1fr; gap:20px; }
}

/* --- Карта --- */
.c-map-section{ position:relative; z-index:1; height:380px; overflow:hidden; background:#0c1a12; }
.c-map-frame{ display:block; width:100%; height:100%; border:0; object-fit:cover; }
.c-map-tooltip{
	position:absolute; z-index:1; left:24px; top:40px; max-width:320px;
	background:rgba(255,255,255,.88); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
	border-radius:20px; padding:24px 28px 28px;
}
.c-map-tooltip::after{
	content:''; position:absolute; left:24px; bottom:-14px; width:6px; height:28px;
	border-radius:4px; background:rgba(255,255,255,.6);
}
.c-map-tooltip h3{
	font-family:var(--font-display); font-weight:700; font-size:20px; color:#0B0F0B; margin:0 0 8px;
}
.c-map-tooltip p{
	font-family:var(--font-body); font-size:14px; line-height:22px; color:#3a423a; margin:0;
}

/* --- Підбірка послуг --- */
.c-services{ position:relative; z-index:1; background:#FCFCFC; padding-top:64px; padding-bottom:80px; }
.c-services-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; }
.c-service-card{
	background:#fff; border:1px solid rgba(11,15,11,.08); border-radius:20px; padding:32px;
}
.c-service-icon{
	display:flex; align-items:center; justify-content:center; width:48px; height:48px;
	border-radius:12px; background:rgba(9,100,21,.1); color:var(--green); margin-bottom:20px;
}
.c-service-icon img{ width:22px; height:22px; object-fit:contain; }
.c-service-icon i{ font-size:18px; }
.c-service-card h3{
	font-family:var(--font-display); font-weight:700; font-size:22px; color:#0B0F0B; margin:0 0 10px;
}
.c-service-card p{
	font-family:var(--font-body); font-size:15px; line-height:23px; color:#5a625a; margin:0 0 16px;
}
.c-services .link-arrow{ color:#096415; transition:color .15s ease; }
.c-services .link-arrow:hover{ color:#FF922D; }

@media (max-width:900px){
	.c-services-grid{ grid-template-columns:1fr; }
	.c-map-section{ height:300px; }
}