/* Extra breathing room below the sticky header before the cards, on top
   of the shared .cards-section's own padding. */
.contact-main {
  padding-top: 2rem;
}

/* Contact page has exactly 3 cards. The shared .cards-grid component's
   >=1200px tier forces 4 equal columns (sized for shop.html's longer
   product grid), which leaves an empty 4th slot and makes the row of 3
   read as pushed left instead of centered. Override just that tier via
   the exposed "grid" shadow part so it uses 3 columns here, matching the
   item count and filling the row evenly. The narrower tiers (1/2/3
   columns) already fit 3 items correctly and are left untouched. */
@media (min-width: 1200px) {
  metascan-cards::part(grid) {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Subtle "follow us" icon row below the contact cards — same pill
   treatment as the footer's social icons (footer.css .footer-social-link),
   just centered here instead of left-aligned. */
.contact-social {
  padding: 1rem 0 4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.contact-social-label {
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.9rem;
  color: #a0a0a0; /* ink-muted, matches .hm-final-cta p */
}

.social-links {
  display: flex;
  gap: 16px;
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #ccc;
  transition: all 0.3s ease;
}

.social-link svg {
  width: 18px;
  height: 18px;
}

.social-link:hover {
  transform: translateY(-2px);
  background: linear-gradient(to right, #6a0dad, #8a2be2);
  border-color: transparent;
  color: #ffffff;
}