/* =====================================================
   CONTAINER
===================================================== */

.tribal-guardian__container {
  max-width: 1100px;
  margin: 0 auto;
}


/* =====================================================
   BUTTONS (TABS)
===================================================== */

.guardian-selections {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.guardian-button {
  min-width: 120px;
  text-align: center;

  font-size: var(--font-size-xs);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}


/* =====================================================
   LIST WRAPPER
===================================================== */

.guardian-list {
  display: none;
  width: 100%;
}

.guardian-list.is-active {
  display: block;
  animation: fadeInGuardian var(--transition-fast);
}


/* =====================================================
   GUARDIAN CARD
===================================================== */

.guardian-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);

  padding: var(--space-md);
  margin: var(--space-sm) 0;

  box-shadow: var(--shadow-sm);

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

.guardian-card:hover {
  border-color: var(--accent-primary);
  box-shadow: var(--shadow-md);
}


/* =====================================================
   CARD TITLE
===================================================== */

.guardian-card__title {
  margin-bottom: var(--space-sm);
}

.guardian-card__title h4 {
  margin: 0;
  font-size: var(--font-size-lg);
  color: var(--accent-primary);
}


/* =====================================================
   LIST GRID
===================================================== */

.guardian-card ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-xs) var(--space-md);

  padding: 0;
  margin: 0;
}


/* =====================================================
   LIST ITEMS
===================================================== */

.tribal-guardian__list-item {
  list-style: none;
  margin: var(--space-xs) 0;
}

.tribal-guardian__list-item a {
  color: var(--text-secondary);
  text-decoration: none;

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

.tribal-guardian__list-item a:hover {
  color: var(--accent-primary);
}


/* underline animation */

.tribal-guardian__list-item a::after {
  content: "";
  position: absolute;

  left: 0;
  bottom: -2px;

  width: 100%;
  height: 1px;

  background: var(--accent-primary);

  transform: scaleX(0);
  transform-origin: left;

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

.tribal-guardian__list-item a:hover::after {
  transform: scaleX(1);
}


/* =====================================================
   DECEASED NOTE
===================================================== */

.guardian-note {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  margin-top: var(--space-xs);
}


/* =====================================================
   DIVIDER
===================================================== */

.tribal-guardian__container hr {
  border: none;
  border-top: 1px solid var(--border-subtle);
  margin: var(--space-md) 0;
}


/* =====================================================
   ANIMATION
===================================================== */

@keyframes fadeInGuardian {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}