/* ==========================================================================
   2J Game — pages/contact.css
   ========================================================================== */

.contact-layout {
  display: grid;
  gap: clamp(36px, 5vw, 64px);
  align-items: start;
}

@media (min-width: 1024px) {
  .contact-layout { grid-template-columns: 0.95fr 1.05fr; }
}

.contact-form-panel {
  padding: clamp(24px, 3.4vw, 40px);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
}

/* Key/value info rows */
.contact-info {
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  overflow: hidden;
}

.contact-info__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 14px 18px;
  border-bottom: 1px solid var(--color-border);
}

.contact-info__row:last-child { border-bottom: 0; }

.contact-info__k {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--color-text-secondary);
}

.contact-info__v {
  font-family: var(--font-num);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--color-charcoal);
}

/* Form footnote centring */
.form .field__hint.text-center { text-align: center; }