/* ════════════════════════════════════════
   CONTACTS.CSS — страница «Контакты» (SMSTECH-30)

   Секции собраны из паттернов patterns/contacts-*.php на классах главной:
   карточки (.feat-card), тёмный блок (.dark-cta-block), FAQ и финальный CTA
   приходят из main.css. Здесь только то, чего у главной нет.

   Скоупинг: каждый селектор верхнего уровня начинается с класса своей секции
   или блока (.contacts-…, .contact-card…). Дженерик-селекторы запрещены —
   иначе правила поедут на главную и продуктовые страницы.

   Подключается после main.css: на фронте — inc/contacts-page.php только для
   страниц с этими секциями, в редакторе — через add_editor_style.
   В комментариях нельзя писать последовательность «звёздочка+слэш» кроме
   закрытия комментария: wp.blockEditor.transformStyles падает на
   преждевременно закрытом комментарии.
   ════════════════════════════════════════ */

/* ─── 2. Свяжитесь с нами ─── */

/* Десктоп — четыре карточки в ряд, планшет — 2×2, мобильные — в колонку.
   Порог 1080px тот же, что у горизонтальной шапки. */
.contacts-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media(min-width:768px){
  .contacts-grid{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:1080px){
  .contacts-grid{grid-template-columns:repeat(4,1fr)}
}

/* Стаггер появления — как у карточек услуг (main.css) */
.contacts-grid>.contact-card:nth-child(2){--reveal-delay:.07s}
.contacts-grid>.contact-card:nth-child(3){--reveal-delay:.14s}
.contacts-grid>.contact-card:nth-child(4){--reveal-delay:.21s}

/* Карточка услуги рассчитана на длинный текст (min-height:400px); у способа
   связи содержимого меньше — высоту в ряду всё равно выравнивает грид. */
.contact-card{
  min-height: 0;
  gap: 14px;
  padding: 28px 26px 26px;
}
@media(min-width:768px){
  .contacts-grid>.contact-card{min-height:288px}
}

.contact-card .contact-card-icon{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--green);
  flex-shrink: 0;
}
.contact-card .contact-card-icon svg{width:24px;height:24px}

.contact-card .contact-card-title{
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.25rem, 1.7vw, 1.45rem);
  line-height: 1.2;
  letter-spacing: -.02em;
  margin: 0;
}

.contact-card .contact-card-main{
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.22rem;
  line-height: 1.3;
  letter-spacing: -.02em;
  color: var(--ink-deep);
  overflow-wrap: anywhere;
}
.contact-card .contact-card-main a{color:inherit;transition:color .15s}
.contact-card .contact-card-main a:hover{color:var(--green-deep)}

.contact-card .contact-card-caption{margin:0}

/* Ссылки прижаты к низу: в ряду карточки разной длины, кнопки должны
   выстроиться на одной линии. */
.contact-card .contact-card-links{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 4px;
}
.contact-card .contact-card-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--ink);
  font-weight: 700;
  font-size: .9rem;
  line-height: 1.2;
  transition: border-color .2s ease, color .2s ease, transform .15s ease;
}
.contact-card .contact-card-link:hover{
  border-color: var(--green);
  color: var(--green-deep);
  transform: translateY(-1px);
}
.contact-card .contact-card-link svg{width:18px;height:18px;flex-shrink:0;color:var(--green)}
.contact-card .contact-card-link--telegram svg{color:#26a5e4}
.contact-card .contact-card-link--whatsapp svg{color:#25d366}
.contact-card .contact-card-link--vk svg{color:#0077ff}

/* ─── 3. Реквизиты и адрес ─── */

/* Gutenberg добавляет flow-разметке интервал в 24px между блоками. Секции
   главной перечислены в main.css поимённо; эта новая — здесь. */
.contacts-req-section.wp-block-group.is-layout-flow>*,
.contacts-req-section .wp-block-group.is-layout-flow>*{
  margin-block-start: 0;
  margin-block-end: 0;
}
/* Восстановленный интервал обязан быть специфичнее сброса выше — отсюда
   лишний класс блока заголовка. */
.contacts-req-section .section-header h2.wp-block-heading{margin-block-end:16px}

.contacts-req-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: stretch;
}
@media(min-width:1080px){
  .contacts-req-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:24px}
}
.contacts-req-grid>.contacts-map{--reveal-delay:.1s}

.contacts-req-card{
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: clamp(24px, 4vw, 40px);
}
.contacts-req-list{display:flex;flex-direction:column;margin:0}
.contacts-req-row{
  padding: 18px 0;
  border-bottom: 1px solid var(--stroke);
}
.contacts-req-row:first-child{padding-top:0}
.contacts-req-row:last-child{padding-bottom:0;border-bottom:none}
.contacts-req-row dt{
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.contacts-req-row dd{
  margin: 0;
  color: var(--ink);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
}

.contacts-map{display:flex;flex-direction:column;gap:16px;min-width:0}
.contacts-map-head{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
}
.contacts-map-address{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex: 1 1 260px;
  margin: 0;
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
}
.contacts-map-address svg{width:20px;height:20px;flex-shrink:0;margin-top:2px;color:var(--green)}

.contacts-map-route{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border-radius: var(--radius-pill);
  background: var(--green);
  color: #fff;
  font-weight: 700;
  font-size: .95rem;
  white-space: nowrap;
  box-shadow: var(--shadow-lg);
  transition: background .2s ease, transform .15s ease;
}
.contacts-map-route:hover{background:var(--green-deep);transform:translateY(-1px)}
.contacts-map-route svg{width:18px;height:18px}

/* Карта живёт в iframe стороннего виджета: его создаёт main.js на подходе к
   секции. Без JS контейнер скрыт — остаются адрес и «Построить маршрут»;
   в редакторе блоков (.aisms-dynamic-block-preview) показываем заглушку. */
.contacts-map-frame{
  display: none;
  position: relative;
  flex: 1 1 auto;
  min-height: 320px;
  border: 1px solid var(--stroke);
  border-radius: var(--radius-xl);
  background: var(--soft);
  overflow: hidden;
}
.aisms-js .contacts-map-frame,
.aisms-dynamic-block-preview .contacts-map-frame{display:block}
@media(min-width:1080px){
  .contacts-map-frame{min-height:400px}
}
.contacts-map-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.contacts-map-placeholder{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--muted);
  font-weight: 600;
}
.contacts-map-placeholder svg{width:32px;height:32px;color:var(--green-light)}
.contacts-map-frame.is-loaded .contacts-map-placeholder{display:none}

/* ─── 4. Форма заявки (тёмная секция) ─── */

.contacts-form-block h2{font-size:clamp(2rem,5.5vw,3.4rem)}

/* Белая карточка формы на тёмном блоке: возвращаем обычный цвет текста и
   выравнивание по левому краю, которые перебивает .dark-cta-block.
   Лишний класс в селекторах — чтобы перебить сброс интервалов flow-разметки
   из main.css (он специфичнее одноклассовых правил). */
.contacts-form-block.wp-block-group .form-card{
  max-width: 620px;
  margin-inline: auto;
  margin-block-start: 36px;
  color: var(--ink);
  text-align: left;
}
.contacts-form-block .form-card .form-card-note{
  margin-block-start: 16px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}

.contacts-form-block .wpcf7 textarea{
  width: 100%;
  min-height: 104px;
  padding: 14px 18px;
  background: var(--soft);
  border: 1.5px solid transparent;
  border-radius: 22px;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink);
  outline: none;
  resize: vertical;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.contacts-form-block .wpcf7 textarea::placeholder{color:var(--muted);font-weight:400}
.contacts-form-block .wpcf7 textarea:focus{
  border-color: var(--green);
  background: var(--card);
  box-shadow: var(--shadow-lg);
}

.contacts-form-block .wpcf7 .wpcf7-acceptance a{
  color: var(--green-deep);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.contacts-form-block .wpcf7 .wpcf7-acceptance a:hover{color:var(--green)}

/* Ответ формы: у .dark-cta-block белый текст, а карточка формы светлая.
   Классы состояния Contact Form 7 вешает на сам form. */
.contacts-form-block .wpcf7 form.sent .wpcf7-response-output{
  background: var(--green-soft);
  color: var(--green-deep);
}
.contacts-form-block .wpcf7 form.invalid .wpcf7-response-output,
.contacts-form-block .wpcf7 form.unaccepted .wpcf7-response-output{
  background: #fff5e6;
  color: #8a5a00;
}
.contacts-form-block .wpcf7 form.failed .wpcf7-response-output,
.contacts-form-block .wpcf7 form.aborted .wpcf7-response-output,
.contacts-form-block .wpcf7 form.spam .wpcf7-response-output{
  background: #fff0f0;
  color: #c0392b;
}

@media(max-width:480px){
  .contacts-form-block{padding-inline:16px}
  .contacts-form-block .form-card{padding:28px 20px 24px}
}

/* ─── 6. Финальный CTA в одну колонку ─── */

.contacts-cta .cta-center{
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}
.contacts-cta .cta-center p{margin-inline:auto}
.contacts-cta .btn-row{justify-content:center}