/* =====================================================
   P77 App — Contact page
   ===================================================== */
.contact-cards { display: grid; grid-template-columns: 1fr; gap: var(--sp-lg); margin-bottom: var(--sp-3xl); }
.contact-card { padding: var(--sp-xl); text-align: center; }
.contact-card .ico { font-size: 2.2rem; display: block; margin-bottom: var(--sp-md); }
.contact-card h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-xs); }
.contact-card a, .contact-card p { color: var(--clr-text-secondary); font-size: var(--fs-sm); margin: 0; }
.contact-card a:hover { color: var(--clr-accent-gold); }

.contact-form {
  max-width: 620px; margin-inline: auto;
  padding: var(--sp-2xl); display: grid; gap: var(--sp-lg);
}
.form-group { display: flex; flex-direction: column; gap: var(--sp-xs); }
.form-group label { font-weight: var(--fw-medium); font-size: var(--fs-sm); color: var(--clr-text-primary); }
.form-group input,
.form-group select,
.form-group textarea {
  background: var(--clr-bg-deep); border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm); padding: 0.75em 1em; color: var(--clr-text-primary);
  font-family: var(--font-body); transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-group textarea { resize: vertical; min-height: 120px; }
.form-group input::placeholder, .form-group textarea::placeholder { color: var(--clr-text-muted); }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none; border-color: var(--clr-accent-gold); box-shadow: 0 0 0 3px var(--clr-accent-glow);
}
.contact-form .btn { justify-self: start; }

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