/* Typography */

.social-links h2 {
  color: #333;
  font-family: 'Playfair Display',serif;
  font-weight: 700;
}

/* Card */

.social-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 0 rgba(0,0,0,0.14), 0 8px 30px rgba(0,0,0,.06);
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
  will-change: transform;
}

/* Icon sizes */

.social-card .icon {
  font-size: 2.6rem;
  line-height: 1;
}

/* Label */

.social-card .label {
  font-family: 'Playfair Display',serif;
  font-weight: 700;
  color: #2f2f2f;
  letter-spacing: .2px;
}

/* Brand colors */

.icon.fb {
  color: #1877F2;
}

/* Facebook */

.icon.yt {
  color: #FF0033;
}

/* YouTube */

.icon.mail {
  color: #78cb63;
}

/* Email */

.icon.ig {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Hover / focus */

.social-card:hover, .social-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0,0,0,.10);
}

/* Subtle interactive glow on hover */

.social-card:hover .icon.fb {
  text-shadow: 0 6px 18px rgba(24,119,242,.25);
}

.social-card:hover .icon.yt {
  text-shadow: 0 6px 18px rgba(255,0,51,.25);
}

.social-card:hover .icon.mail {
  text-shadow: 0 6px 18px rgba(120,203,99,.25);
}

/* Add a faint white overlay for a premium “sheen” */

.social-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.0) 0%, rgba(255,255,255,.06) 100%);
  pointer-events: none;
}

/* Accessibility: reduce motion */

@media (prefers-reduced-motion: reduce) {
  .social-card {
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .social-card:hover, .social-card:focus-visible {
    transform: none;
  }
}

/* Tight grid on small screens; comfy on desktop handled by row g-* classes */