/* ==========================================================================
   2J Game — Obsidian Royale
   pages/contact.css — contact & support
   ========================================================================== */

.contact-layout {
  display: grid;
  gap: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);
  align-items: start;
}

/* Grid items default to min-width:auto, which lets a wide <select> or table
   stretch the column past the viewport. */
.contact-layout > * {
  min-width: 0;
}

.contact-form-panel {
  padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.5rem);
  border-radius: var(--radius-lg);
  background: var(--gradient-panel);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
}

.contact-form-panel h2 {
  margin-bottom: var(--space-8);
}

.contact-form-panel > p {
  margin-bottom: var(--space-24);
  font-size: var(--fs-sm);
}

.contact-channels {
  display: grid;
  gap: var(--space-16);
}

.channel-card {
  display: flex;
  gap: var(--space-16);
  padding: var(--space-20);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border-neutral);
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}

.channel-card:hover {
  border-color: var(--color-border-strong);
  transform: translateY(-3px);
}

.channel-card__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: var(--radius-md);
  background: rgba(212, 175, 55, 0.1);
  border: 1px solid var(--color-border);
  color: var(--color-accent-bright);
}

.channel-card__icon--tg {
  background: linear-gradient(135deg, #229ED9, #2AABEE);
  border-color: rgba(120, 210, 255, 0.5);
  color: #04222E;
}

.channel-card__icon svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.channel-card h3 {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  margin-bottom: 0.3rem;
}

.channel-card p {
  font-size: var(--fs-xs);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-8);
}

.channel-card__link {
  font-size: var(--fs-xs);
  font-weight: 600;
  word-break: break-word;
}

.hours-table td:first-child {
  color: var(--color-text-primary);
  font-weight: 500;
}

@media (min-width: 1200px) {
  .contact-layout {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  }
}