/* ============================================================
   contact.css — страница «Send Me A Message»
   Использует токены из tokens.css. Подключается на contact.html.
   ============================================================ */

/* ---------- Общий layout: форма слева, фото+контакты справа ---------- */
.contact-section {
  padding: clamp(2.5rem, 6vw, 5rem) 0;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;   /* форма шире, правая колонка уже */
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: stretch;               /* правая колонка по высоте формы */
}

/* ---------- Левая карточка с формой ---------- */
.contact-form-card {
  background: var(--color-light-grey);
  border-radius: var(--radius-xl);
  padding: clamp(1.75rem, 4vw, 3rem);
}

.contact-form-card .contact-title {
  font-family: var(--font-heading);
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  line-height: 1.05;
  margin: 0 0 var(--space-5);
  color: var(--color-black);
}

.contact-form-card .contact-subtitle {
  font-size: 1.0625rem;
  line-height: 1.65;
  max-width: 46ch;
  margin: 0 0 clamp(1.5rem, 4vw, 2.5rem);
  color: var(--color-medium-gray);
}

/* ---------- Поля формы ---------- */
.contact-form .field {
  margin-bottom: var(--space-6);
}

.contact-form label {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-black);
  margin-bottom: var(--space-3);
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-dark-gray);
  background: var(--color-white);
  border: 1px solid #e2e2e2;
  border-radius: var(--radius-md);
  padding: 0.95rem 1.1rem;
  transition: border-color var(--transition-base, 0.2s ease),
              box-shadow var(--transition-base, 0.2s ease);
  -webkit-appearance: none;
  appearance: none;
}

.contact-form textarea {
  min-height: 160px;
  resize: vertical;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: var(--color-gray);
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-bg);
}

/* Кастомная стрелка для select */
.contact-form .select-wrap {
  position: relative;
}
.contact-form .select-wrap::after {
  content: "";
  position: absolute;
  right: 1.1rem;
  top: 50%;
  width: 0.7rem;
  height: 0.7rem;
  transform: translateY(-65%) rotate(45deg);
  border-right: 2px solid var(--color-gray);
  border-bottom: 2px solid var(--color-gray);
  pointer-events: none;
}
.contact-form select {
  padding-right: 2.6rem;
  cursor: pointer;
}
/* Серый текст когда выбран плейсхолдер */
.contact-form select:required:invalid {
  color: var(--color-gray);
}

.contact-form .btn-submit {
  width: 100%;
  margin-top: var(--space-2);
  font-size: 1.05rem;
  padding: 1.05rem;
}

/* Honeypot — скрыт от людей, видим ботам */
.contact-form .hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Статус отправки */
.contact-form .form-status {
  margin-top: var(--space-4);
  font-size: 0.95rem;
  text-align: center;
  display: none;
}
.contact-form .form-status.is-success {
  display: block;
  color: var(--color-success);
}
.contact-form .form-status.is-error {
  display: block;
  color: var(--color-error);
}

/* ---------- Правая колонка: фото + контактные карточки ---------- */
.contact-aside {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 3vw, 1.5rem);
}

.contact-photo {
  width: 100%;
  aspect-ratio: 4 / 3;          /* ниже, чем раньше — фото компактнее */
  max-height: 360px;
  object-fit: cover;
  object-position: center 25%;  /* держим лицо в кадре */
  border-radius: var(--radius-xl);
  display: block;
}

/* Контакты — крупные «строки-кнопки»: иконка + текст (под-строка + значение) + стрелка */
.contact-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.contact-card {
  --accent: var(--color-primary);
  --accent-bg: var(--color-primary-bg);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-4);
  padding: clamp(1rem, 2.4vw, 1.35rem) clamp(1rem, 2.4vw, 1.4rem);
  background: var(--color-white);
  border: 1px solid #ededed;
  border-left: 4px solid var(--accent);   /* цветной акцент слева */
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.contact-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--accent);
}
.contact-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.contact-card .icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);   /* мягкий квадрат, не круг — крупнее смотрится */
  display: grid;
  place-items: center;
  background: var(--accent-bg);
  color: var(--accent);
  flex-shrink: 0;
  transition: background 0.2s ease, color 0.2s ease;
}
.contact-card:hover .icon {
  background: var(--accent);
  color: var(--color-white);
}
.contact-card .icon svg {
  width: 26px;
  height: 26px;
}

.contact-card .card-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;          /* чтобы длинный email переносился, а не ломал верстку */
  flex: 1;
}
.contact-card .card-sub {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-gray);
}
.contact-card .label {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--color-black);
  line-height: 1.2;
  word-break: break-word;
}

.contact-card .card-arrow {
  flex-shrink: 0;
  color: var(--color-gray);
  display: grid;
  place-items: center;
  transition: transform 0.2s ease, color 0.2s ease;
}
.contact-card .card-arrow svg { width: 18px; height: 18px; }
.contact-card:hover .card-arrow {
  color: var(--accent);
  transform: translateX(4px);
}

/* Цветовые варианты — каждая карточка свой бренд-цвет */
.contact-card.is-mail     { --accent: var(--color-primary);  --accent-bg: var(--color-primary-bg); }
.contact-card.is-insta    { --accent: var(--color-blue);     --accent-bg: var(--color-blue-bg); }
.contact-card.is-linkedin { --accent: var(--color-dark-blue);--accent-bg: var(--color-blue-bg); }

/* ТОЛЬКО НОУТБУК (769–1024): длинный email не влезает в карточку и переносится.
   Уменьшаем шрифт значения, чтобы он помещался в одну строку. */
@media (min-width: 769px) and (max-width: 1024px) {
  .contact-card .label { font-size: 0.9rem; }
}

/* ---------- Адаптив ---------- */
@media (max-width: 880px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
  /* На мобайле форма — сверху (главное), фото и контакты — под ней */
  .contact-aside { order: 1; }
  /* Фото шире и ниже. Кадр смещён к лицу — над головой было много пустого фона,
     срезаем его сверху, акцент на лицо. */
  .contact-photo {
    aspect-ratio: 16 / 9;
    max-height: 380px;
    object-position: center 42%;
  }
}

/* На мобилке форма компактнее: меньше заголовок, подзаголовок, отступы */
@media (max-width: 600px) {
  .contact-form-card {
    padding: var(--space-6) var(--space-5);
  }
  .contact-form-card .contact-title {
    font-size: 1.9rem;
    margin: 0 0 var(--space-3);
  }
  .contact-form-card .contact-subtitle {
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0 0 var(--space-6);
  }
  .contact-form .field {
    margin-bottom: var(--space-4);
  }
  .contact-form label {
    margin-bottom: var(--space-2);
  }
  /* input font-size оставляем 16px — меньше нельзя, iOS зумит при фокусе */
  .contact-form input,
  .contact-form select,
  .contact-form textarea {
    padding: 0.75rem 0.95rem;
  }
  .contact-form textarea {
    min-height: 120px;
  }
}

/* Уважаем системную настройку «меньше движения» */
@media (prefers-reduced-motion: reduce) {
  .contact-card,
  .contact-card .icon,
  .contact-card .card-arrow {
    transition: none;
  }
  .contact-card:hover {
    transform: none;
  }
  .contact-card:hover .card-arrow {
    transform: none;
  }
}