/*
===============================================================================
DEVNITE STUDIOS
===============================================================================
Project      : Kirzen 4.1
Organization : Devnite Studios
License      : Proprietary
Copyright    : © 2026 Devnite Studios. All rights reserved.

This source file is proprietary software developed and maintained by
Devinte Studios as part of the Kirzen 4.1 project.

Unauthorized copying, redistribution, modification, publication,
or reproduction of this file or any portion of its contents is strictly
prohibited without prior written authorization from Devnite Studios.
===============================================================================
*/

/* ============================================================================
   SUPPORT GRID
   ============================================================================ */

.support-grid {
  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

  gap: 20px;

  margin-bottom: 48px;
}

/* ============================================================================
   SUPPORT CARD
   ============================================================================ */

.support-card {
  display: flex;
  flex-direction: column;

  gap: 12px;

  padding: 28px;

  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);

  background: var(--bg-surface);

  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
}

.support-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* ============================================================================
   CARD ICON
   ============================================================================ */

.support-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 44px;
  height: 44px;

  border-radius: var(--radius-md);

  background: var(--accent-subtle);
  color: var(--accent-primary);
}

/* ============================================================================
   CARD CONTENT
   ============================================================================ */

.support-card-title {
  font-size: 16px;
  font-weight: 600;
}

.support-card-desc {
  flex: 1;

  color: var(--text-secondary);

  font-size: 14px;

  line-height: 1.5;
}

/* ============================================================================
   CARD LINK
   ============================================================================ */

.support-card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  color: var(--accent-primary);

  font-size: 13px;
  font-weight: 500;

  transition:
    gap var(--transition-fast),
    color var(--transition-fast);
}

.support-card-link:hover {
  gap: 9px;
  color: var(--accent-hover);
}

/* ============================================================================
   CONTACT SECTION
   ============================================================================ */

.support-contact {
  max-width: 560px;

  padding: 32px;

  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);

  background: var(--bg-surface);
}

.support-contact-title {
  margin-bottom: 8px;

  font-size: 18px;
  font-weight: 700;
}

.support-contact-desc {
  margin-bottom: 20px;

  color: var(--text-secondary);

  font-size: 14px;

  line-height: 1.55;
}

/* ============================================================================
   LEGAL LINKS
   ============================================================================ */

.support-legal {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;

  margin-top: 32px;

  padding-top: 24px;

  border-top: 1px solid var(--border-subtle);
}

.support-legal-link {
  color: var(--text-muted);

  font-size: 12px;
  font-weight: 500;

  transition: color var(--transition-fast);
}

.support-legal-link:hover {
  color: var(--text-primary);
}

.support-legal-separator {
  color: var(--text-muted);

  font-size: 12px;
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */

@media (max-width: 640px) {
  .support-card {
    padding: 22px;
  }

  .support-contact {
    padding: 24px;
  }

  .support-legal {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .support-legal-separator {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .support-card,
  .support-card-link {
    transition: none !important;
  }
}