/* =========================================================================
   contact.css — Contact page only (enqueued on is_page('contact')).
   Shared pieces (.page-hero, .card, .contact-card, .reveal, buttons) live in
   base.css.
   ========================================================================= */

.contact-page__cards > .contact-card { grid-column: span 4; }

/* Cascade the 3 cards instead of revealing them as one block. */
.contact-page__cards > .contact-card:nth-child(2) { --du-stagger: 80ms; }
.contact-page__cards > .contact-card:nth-child(3) { --du-stagger: 160ms; }

.contact-page__social { margin-top: clamp(2.5rem, 5vw, 4rem); text-align: center; }
.contact-page__social-label {
  font-family: var(--font-display); font-weight: 700; font-size: 0.82rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gray-500); margin-bottom: 1rem;
}
.contact-page__social-links {
  display: flex; gap: 0.75rem; flex-wrap: wrap; justify-content: center;
}
/* Outline buttons sit on a white page here, not on a dark band. */
.contact-page__social-links .btn--outline { color: var(--brand); border-color: var(--gray-200); }

.contact-page-cta { text-align: center; max-width: 640px; }
.contact-page-cta p { opacity: 0.9; }
.contact-page-cta__actions {
  display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center;
  margin-top: 1.5rem;
}

@media (max-width: 1024px) {
  .contact-page__cards > .contact-card { grid-column: span 6; }
  /* Orphan third card: center the span-6 item in the 12-col row. */
  .contact-page__cards > .contact-card:last-child:nth-child(odd) {
    grid-column: 4 / span 6;
  }
}
@media (max-width: 480px) {
  .contact-page__cards > .contact-card { grid-column: span 12; }
  .contact-page__cards > .contact-card:last-child:nth-child(odd) {
    grid-column: span 12;
  }
}

@media (hover: hover) and (pointer: fine) {
  .contact-page__social-links .btn--outline:hover { color: var(--ink); }
}