/* css/contact.css */

#contact { background: linear-gradient(180deg, var(--color-bg), #0a1a0e 15%, #0a1a0e 85%, var(--color-bg)); }
.contact-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); }
.c-info-item { display: flex; gap: 12px; margin-bottom: 20px; align-items: flex-start; }
.c-icon { font-size: 1.2rem; flex-shrink: 0; margin-top: 2px; }
.c-info-item p { color: #aaa; font-size: var(--text-sm); line-height: 1.5; }
.c-info-item a { color: var(--color-primary); text-decoration: none; }
.c-info-item a:hover { text-decoration: underline; }
.contact-form { display: flex; flex-direction: column; gap: 12px; }
.contact-form input, .contact-form textarea {
  width: 100%; padding: 12px 16px; background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; color: var(--color-text);
  font-family: var(--font-body); font-size: var(--text-sm); outline: none;
  transition: border-color var(--transition-base);
}
.contact-form input:focus, .contact-form textarea:focus {
  border-color: var(--color-primary); box-shadow: 0 0 12px rgba(0,218,152,0.12);
}
.contact-form textarea { min-height: 110px; resize: vertical; }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: rgba(255,255,255,0.25); }
.social-row { display: flex; gap: 10px; margin-top: 24px; }
.social-link {
  width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; transition: var(--transition-base);
}
.social-link:hover { background: var(--color-primary); border-color: var(--color-primary); }

@media (min-width: 768px) {
  .contact-grid { grid-template-columns: 1fr 1fr; }
}