/**
 * @file
 * Social grid component styles.
 */

.social-grid__items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}

.social-grid__item {
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  text-decoration: none;
  color: inherit;
  transition: transform var(--transition-fast);
}

.social-grid__item:hover {
  transform: translateY(-2px);
}

.social-grid__item--cream {
  background: var(--color-background);
}

.social-grid__item--gold {
  background: var(--color-background-gold);
}

.social-grid__icon {
  font-size: 22px;
}

.social-grid__title {
  margin-top: var(--grid-gap-sm);
  font-size: 16px;
  font-weight: var(--font-weight-bold);
}

.social-grid__value {
  margin-top: var(--space-2xs);
  font-size: var(--font-size-small);
  color: var(--color-text-secondary);
}

.social-grid__note {
  grid-column: span 2;
  margin-top: var(--space-lg);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  font-size: 14.5px;
  line-height: var(--line-height-body);
  color: var(--color-text-secondary);
}

@media (max-width: 768px) {
  .social-grid__item {
    padding: var(--space-lg);
  }

  .social-grid__icon {
    font-size: 18px;
  }

  .social-grid__title {
    font-size: 14.5px;
  }
}